define(['jquery', 'lodash', 'i18n', 'ui/component', 'handlebars', 'lib/handlebars/helpers', 'css!ui/datalist/css/datalist.css'], function ($$1, _, __, component, Handlebars, Helpers0, datalist_css) { 'use strict';

    $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
    _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
    __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
    component = component && Object.prototype.hasOwnProperty.call(component, 'default') ? component['default'] : component;
    Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
    Helpers0 = Helpers0 && Object.prototype.hasOwnProperty.call(Helpers0, 'default') ? Helpers0['default'] : Helpers0;

    if (!Helpers0.__initialized) {
      Helpers0(Handlebars);
      Helpers0.__initialized = true;
    }
    var Template = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
      this.compilerInfo = [4,'>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
      var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;

    function program1(depth0,data) {
      
      
      return "class=\"hidden\"";
      }

    function program3(depth0,data) {
      
      
      return " hidden";
      }

    function program5(depth0,data) {
      
      var buffer = "", stack1;
      buffer += "\n        <aside class=\"action-bar clearfix\">\n            ";
      stack1 = helpers.each.call(depth0, (depth0 && depth0.tools), {hash:{},inverse:self.noop,fn:self.program(6, program6, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n        </aside>\n        ";
      return buffer;
      }
    function program6(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n            <button class=\"btn-info small ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.massAction), {hash:{},inverse:self.noop,fn:self.program(7, program7, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\" data-control=\"";
      if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\" ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.title), {hash:{},inverse:self.noop,fn:self.program(9, program9, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += ">\n                ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.icon), {hash:{},inverse:self.noop,fn:self.program(11, program11, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n                ";
      if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\n            </button>\n            ";
      return buffer;
      }
    function program7(depth0,data) {
      
      
      return " mass-action hidden";
      }

    function program9(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += " title=\"";
      if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\"";
      return buffer;
      }

    function program11(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "<span class=\"icon icon-";
      if (helper = helpers.icon) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.icon); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\"></span>";
      return buffer;
      }

    function program13(depth0,data) {
      
      
      return "\n                <col/>\n                ";
      }

    function program15(depth0,data) {
      
      
      return "\n                    <th class=\"checkboxes\"><input type=\"checkbox\" name=\"checkall\" value=\"1\" /></th>\n                    ";
      }

    function program17(depth0,data) {
      
      var buffer = "", helper, options;
      buffer += "\n                    <th class=\"actions\">"
        + escapeExpression((helper = helpers.__ || (depth0 && depth0.__),options={hash:{},data:data},helper ? helper.call(depth0, "Actions", options) : helperMissing.call(depth0, "__", "Actions", options)))
        + "</th>\n                    ";
      return buffer;
      }

      buffer += "<div class=\"datalist\">\n    <h1 ";
      stack1 = helpers.unless.call(depth0, (depth0 && depth0.title), {hash:{},inverse:self.noop,fn:self.program(1, program1, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += ">";
      if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</h1>\n    <h2>\n        <span class=\"empty-list";
      stack1 = helpers.unless.call(depth0, (depth0 && depth0.textEmpty), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\">";
      if (helper = helpers.textEmpty) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.textEmpty); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</span>\n        <span class=\"available-list";
      stack1 = helpers.unless.call(depth0, (depth0 && depth0.textNumber), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\"><span class=\"label\">";
      if (helper = helpers.textNumber) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.textNumber); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</span>: <span class=\"count\"></span></span>\n        <span class=\"loading";
      stack1 = helpers.unless.call(depth0, (depth0 && depth0.textLoading), {hash:{},inverse:self.noop,fn:self.program(3, program3, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\"><span>";
      if (helper = helpers.textLoading) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.textLoading); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</span>...</span>\n    </h2>\n    <div class=\"list\">\n        ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.tools), {hash:{},inverse:self.noop,fn:self.program(5, program5, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n\n        <table class=\"matrix\">\n            <colgroup>\n                ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.selectable), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n                <col/>\n                ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.actions), {hash:{},inverse:self.noop,fn:self.program(13, program13, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n            </colgroup>\n            <thead>\n                <tr>\n                    ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.selectable), {hash:{},inverse:self.noop,fn:self.program(15, program15, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n                    <th class=\"label\">";
      if (helper = helpers.labelText) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.labelText); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</th>\n                    ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.actions), {hash:{},inverse:self.noop,fn:self.program(17, program17, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n                </tr>\n            </thead>\n            <tbody></tbody>\n        </table>\n    </div>\n</div>\n";
      return buffer;
      });
    function mainTpl(data, options, asString) {
      var html = Template(data, options);
      return (asString || true) ? html : $(html);
    }

    if (!Helpers0.__initialized) {
      Helpers0(Handlebars);
      Helpers0.__initialized = true;
    }
    var Template$1 = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
      this.compilerInfo = [4,'>= 1.0.0'];
    helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
      var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression, self=this;

    function program1(depth0,data,depth1) {
      
      var buffer = "", stack1, helper;
      buffer += "\n<tr data-id=\"";
      if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\">\n    ";
      stack1 = helpers['if'].call(depth0, (depth1 && depth1.selectable), {hash:{},inverse:self.noop,fn:self.program(2, program2, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n    <td class=\"label\">";
      if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "</td>\n    ";
      stack1 = helpers['if'].call(depth0, (depth1 && depth1.actions), {hash:{},inverse:self.noop,fn:self.programWithDepth(4, program4, data, depth0, depth1),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n</tr>\n";
      return buffer;
      }
    function program2(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n    <td class=\"checkboxes\"><input type=\"checkbox\" name=\"cb[";
      if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "]\" value=\"1\" /></td>\n    ";
      return buffer;
      }

    function program4(depth0,data,depth1,depth2) {
      
      var buffer = "", stack1;
      buffer += "\n    <td class=\"actions\">\n        ";
      stack1 = helpers.each.call(depth0, (depth2 && depth2.actions), {hash:{},inverse:self.noop,fn:self.programWithDepth(5, program5, data, depth1),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n    </td>\n    ";
      return buffer;
      }
    function program5(depth0,data,depth2) {
      
      var buffer = "", stack1;
      buffer += "\n            ";
      stack1 = helpers['with'].call(depth0, (depth2 && depth2.line), {hash:{},inverse:self.noop,fn:self.programWithDepth(6, program6, data, depth0),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n        ";
      return buffer;
      }
    function program6(depth0,data,depth1) {
      
      var buffer = "", stack1;
      buffer += "\n                ";
      stack1 = helpers.unless.call(depth0, (depth1 && depth1.hidden), {hash:{},inverse:self.noop,fn:self.programWithDepth(7, program7, data, depth1),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n            ";
      return buffer;
      }
    function program7(depth0,data,depth2) {
      
      var buffer = "", stack1;
      buffer += "\n                    ";
      stack1 = helpers['with'].call(depth0, depth2, {hash:{},inverse:self.noop,fn:self.program(8, program8, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n                ";
      return buffer;
      }
    function program8(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "\n        <button class=\"btn-info small\" data-control=\"";
      if (helper = helpers.id) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.id); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\"";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.title), {hash:{},inverse:self.noop,fn:self.program(9, program9, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += ">\n            ";
      stack1 = helpers['if'].call(depth0, (depth0 && depth0.icon), {hash:{},inverse:self.noop,fn:self.program(11, program11, data),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n            ";
      if (helper = helpers.label) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.label); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\n        </button>\n                    ";
      return buffer;
      }
    function program9(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += " title=\"";
      if (helper = helpers.title) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.title); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\"";
      return buffer;
      }

    function program11(depth0,data) {
      
      var buffer = "", stack1, helper;
      buffer += "<span class=\"icon icon-";
      if (helper = helpers.icon) { stack1 = helper.call(depth0, {hash:{},data:data}); }
      else { helper = (depth0 && depth0.icon); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; }
      buffer += escapeExpression(stack1)
        + "\"></span>";
      return buffer;
      }

      stack1 = helpers.each.call(depth0, (depth0 && depth0.list), {hash:{},inverse:self.noop,fn:self.programWithDepth(1, program1, data, depth0),data:data});
      if(stack1 || stack1 === 0) { buffer += stack1; }
      buffer += "\n";
      return buffer;
      });
    function listTpl(data, options, asString) {
      var html = Template$1(data, options);
      return (asString || true) ? html : $(html);
    }

    /**
     * This program is free software; you can redistribute it and/or
     * modify it under the terms of the GNU General Public License
     * as published by the Free Software Foundation; under version 2
     * of the License (non-upgradable).
     *
     * This program is distributed in the hope that it will be useful,
     * but WITHOUT ANY WARRANTY; without even the implied warranty of
     * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     * GNU General Public License for more details.
     *
     * You should have received a copy of the GNU General Public License
     * along with this program; if not, write to the Free Software
     * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     *
     * Copyright (c) 2015 (original work) Open Assessment Technologies SA ;
     */

    /**
     * Some default values
     * @type {Object}
     * @private
     */
    var _defaults = {
      keyName: 'id',
      labelName: 'label',
      labelText: __('Label'),
      title: false,
      textNumber: __('Available'),
      textEmpty: __('There is nothing to list!'),
      textLoading: __('Loading'),
      selectable: false
    };

    /**
     * Defines a data list
     * @type {Object}
     */
    var datalist = {
      /**
       * Updates the list
       * @param {Array} data
       * @returns {listBox}
       * @fires datalist#update
       */
      update: function update(data) {
        var self = this;
        var controls = this.controls || {};
        var config = this.config || {};
        var $list = controls.$list;
        var $numberValue = controls.$numberValue;
        var renderData = {
          selectable: config.selectable,
          actions: config.actions,
          list: []
        };
        var list = renderData.list;
        var count;

        // disable the list while updating it
        this.setLoading(true);

        // if the update method is called before rendering, or on a destroyed component, there is no placeholder to fill...
        if ($list) {
          // be sure to remove previous list before render the new data
          $list.empty();
          if (data && data.length) {
            // format the data to render
            _.forEach(data, function (line) {
              // extract the identifier and the label according to the config
              var id = line[config.keyName];
              var label = line[config.labelName];

              // optional custom renderer for the label
              if (_.isFunction(config.labelTransform)) {
                label = config.labelTransform.call(self, label, line);
              }

              // the data to render only refer to id and identifier
              list.push({
                id: id,
                label: label,
                line: line // provide the original data for dynamic behavior like hidden actions
              });
            });

            // render the data at the right placeholder
            $list.append(listTpl(renderData));

            // update the displayed counter
            if ($numberValue) {
              count = data.length;

              // optional custom renderer for the counter
              if (_.isFunction(config.countRenderer)) {
                count = config.countRenderer.call(self, count);
              }
              $numberValue.text(count);
            }

            // update the display status
            this.setState('empty', false);
            this.setState('loaded', true);
          } else {
            // nothing to display
            this.setState('empty', true);
            this.setState('loaded', false);
          }

          // update the selection of existing checkboxes
          controls.$checkboxes = this.controls.$list.find('td.checkboxes input');
          controls.$massAction.toggleClass('hidden', true);
          if (this.pendingSelection) {
            this.setSelection(this.pendingSelection);
          }
        }

        /**
         * @event datalist#update
         * @param {Array} data
         */
        self.trigger('update', data);

        // ok, the list is now ready, enable it
        this.setLoading(false);
        return this;
      },
      /**
       * Gets the current selection
       * @returns {Array}
       */
      getSelection: function getSelection() {
        var $checkboxes = this.controls && this.controls.$checkboxes;
        var selection = [];
        if ($checkboxes) {
          // extract the selection from the selected checkboxes
          $checkboxes.filter(':checked').each(function () {
            var id = $$1(this).closest('tr').data('id');
            if (id) {
              selection.push(id);
            }
          });
        } else {
          // the list may not already be rendered, but a selection may exist in pending state
          if (this.pendingSelection) {
            selection = this.pendingSelection;
          }
        }
        return selection;
      },
      /**
       * Sets the current selection
       * @param {Array} selection
       * @returns {datalist}
       * @fires datalist#select
       */
      setSelection: function setSelection(selection) {
        var controls = this.controls || {};
        var $list = controls.$list;
        if ($list) {
          // be sure to discard existing selection
          controls.$checkboxes.prop('checked', false);
          if (selection) {
            // find each line and check it according to the provided selection
            _.forEach(selection, function (id) {
              $list.find('[data-id="' + id + '"] input[type="checkbox"]').prop('checked', true);
            });
          }

          // takes care of the new selection
          this._onSelection();

          // remove pending selection to avoid overwrite on next update
          this.pendingSelection = null;
        } else {
          // keep selection ready for the next update
          this.pendingSelection = selection;
        }
        return this;
      },
      /**
       * Called when a selection has been made
       * @fires datalist#select
       * @private
       */
      _onSelection: function _onSelection() {
        var controls = this.controls || {};
        var $checkboxes = controls.$checkboxes;
        var $checkAll = controls.$checkAll;
        var $checked = $checkboxes.filter(':checked');

        // update the checkAll button
        if ($checked.length === $checkboxes.length) {
          $checkAll.prop('checked', true);
        } else {
          $checkAll.prop('checked', false);
        }

        // show/hide the mass actions tools
        controls.$massAction.toggleClass('hidden', !$checked.length);

        /**
         * @event datalist#select
         * @param {Array} selection
         */
        this.trigger('select', this.getSelection());
      },
      /**
       * Sets the loading state
       * @param {Boolean} flag
       * @returns {listBox}
       */
      setLoading: function setLoading(flag) {
        if (flag) {
          this.setState('loaded', false);
        }
        return this.setState('loading', flag);
      },
      /**
       * Sets the title of the list.
       * @param {String|Boolean} title - The text to set. If the value is false no title is displayed
       * @returns {listBox}
       */
      setTitle: function setTitle(title) {
        var $title = this.controls && this.controls.$title;
        this.config.title = title;
        if ($title) {
          if (false === title) {
            $title.addClass('hidden');
          } else {
            $title.html(title).removeClass('hidden');
          }
        }
        return this;
      },
      /**
       * Sets the label of the number of lines.
       * @param {String|Boolean} text - The text to set. If the value is false no label is displayed
       * @returns {listBox}
       */
      setTextNumber: function setTextNumber(text) {
        var $numberLabel = this.controls && this.controls.$numberLabel;
        var $textAvailable = this.controls && this.controls.$textAvailable;
        this.config.textNumber = text;
        if ($numberLabel) {
          if (text !== false) {
            $numberLabel.html(text).removeClass('hidden');
          } else if ($textAvailable) {
            $textAvailable.addClass('hidden');
          }
        }
        return this;
      },
      /**
       * Sets the label displayed when there no data available.
       * @param {String|Boolean} text - The text to set. If the value is false no label is displayed
       * @returns {listBox}
       */
      setTextEmpty: function setTextEmpty(text) {
        var $textEmpty = this.controls && this.controls.$textEmpty;
        this.config.textEmpty = text;
        if ($textEmpty) {
          if (false === text) {
            $textEmpty.addClass('hidden');
          } else {
            $textEmpty.html(text).removeClass('hidden');
          }
        }
        return this;
      },
      /**
       * Sets the label displayed when the list is loading.
       * @param {String|Boolean} text - The text to set. If the value is false no label is displayed
       * @returns {listBox}
       */
      setTextLoading: function setTextLoading(text) {
        var $textLoading = this.controls && this.controls.$textLoading;
        this.config.textLoading = text;
        if ($textLoading) {
          if (false === text) {
            $textLoading.addClass('hidden');
          } else {
            $textLoading.html(text).removeClass('hidden');
          }
        }
        return this;
      }
    };

    /**
     * Builds an instance of the datalist component
     * @param {Object} config
     * @param {String} [config.keyName] - Sets the name of the attribute containing the identifier for each data line (default: 'id')
     * @param {String} [config.labelName] - Sets the name of the attribute containing the label for each data line (default: 'label')
     * @param {String|Boolean} [config.labelText] - Sets the displayed title for the column containing the labels. If the value is false no title is displayed (default: 'Label')
     * @param {String|Boolean} [config.title] - Sets the title of the list. If the value is false no title is displayed (default: false)
     * @param {String|Boolean} [config.textNumber] - Sets the label of the number of data lines. If the value is false no label is displayed (default: 'Available')
     * @param {String|Boolean} [config.textEmpty] - Sets the label displayed when there no data available. If the value is false no label is displayed (default: 'There is nothing to list!')
     * @param {String|Boolean} [config.textLoading] - Sets the label displayed when the list is loading. If the value is false no label is displayed (default: 'Loading')
     * @param {jQuery|HTMLElement|String} [config.renderTo] - An optional container in which renders the component
     * @param {Boolean} [config.selectable] - Append a checkbox on each displayed line to allow selection (default: false)
     * @param {Boolean} [config.replace] - When the component is appended to its container, clears the place before
     * @param {Function} [config.labelTransform] - Optional renderer applied on each displayed label.
     * @param {Function} [config.countRenderer] - An optional callback applied on the list count before display
     * @param {Array} [config.tools] - An optional list of buttons to add on top of the list. Each buttons provides a mass action on the selected lines. If selectable is not enabled, all lines are selected.
     * @param {Array} [config.actions] - An optional list of buttons to add on each line.
     * @param {Array} [data] - The data to display
     * @returns {datalist}
     *
     * @event init - Emitted when the component is initialized
     * @event destroy - Emitted when the component is destroying
     * @event render - Emitted when the component is rendered
     * @event update - Emitted when the component is updated
     * @event tool - Emitted when a tool button is clicked
     * @event action - Emitted when an action button is clicked
     * @event select - Emitted when a selection is made
     * @event show - Emitted when the component is shown
     * @event hide - Emitted when the component is hidden
     * @event enable - Emitted when the component is enabled
     * @event disable - Emitted when the component is disabled
     * @event template - Emitted when the template is changed
     */
    function datalistFactory(config, data) {
      var initConfig = config || {};
      var actions = {};
      var tools = {};

      // build a map of the tools if any
      if (initConfig.tools) {
        _.forEach(initConfig.tools, function (tool) {
          tools[tool.id] = tool;
        });
      }

      // build a map of the lines actions if any
      if (initConfig.actions) {
        _.forEach(initConfig.actions, function (action) {
          actions[action.id] = action;
        });
      }
      return component(datalist, _defaults).setTemplate(mainTpl)

      // uninstalls the component
      .on('destroy', function () {
        this.controls = null;
        this.pendingSelection = null;
      })

      // renders the component
      .on('render', function () {
        var self = this;

        // get access to all needed placeholders
        this.controls = {
          $title: this.$component.find('h1'),
          $textEmpty: this.$component.find('.empty-list'),
          $textAvailable: this.$component.find('.available-list'),
          $textLoading: this.$component.find('.loading span'),
          $numberLabel: this.$component.find('.available-list .label'),
          $numberValue: this.$component.find('.available-list .count'),
          $actionBar: this.$component.find('.list .action-bar'),
          $massAction: this.$component.find('.list .mass-action'),
          $checkAll: this.$component.find('.list th.checkboxes input'),
          $checkboxes: this.$component.find('.list td.checkboxes input'),
          $list: this.$component.find('.list tbody')
        };

        // take care of tools buttons
        this.controls.$actionBar.on('click', 'button', function (e) {
          var $this = $$1(this);
          var buttonId = $this.closest('button').data('control');
          var button = tools[buttonId];
          var selection = self.getSelection();
          e.preventDefault();
          if (button && button.action) {
            button.action.call(self, selection, buttonId);
          }

          /**
           * @event datalist#tool
           * @param {Array} selection
           * @param {String} buttonId
           */
          self.trigger('tool', selection, buttonId);
        });

        // take care of actions buttons
        this.controls.$list.on('click', 'button', function (e) {
          var $this = $$1(this);
          var lineId = $this.closest('tr').data('id');
          var buttonId = $this.closest('button').data('control');
          var button = actions[buttonId];
          e.preventDefault();
          if (button && button.action) {
            button.action.call(self, lineId, buttonId);
          }

          /**
           * @event datalist#action
           * @param {String} lineId
           * @param {String} buttonId
           */
          self.trigger('action', lineId, buttonId);
        });

        // take care of clicks on labels
        this.setState('selectable', this.config.selectable);
        this.controls.$list.on('click', 'td.label', function () {
          var $checkbox;
          if (self.config.selectable) {
            $checkbox = $$1(this).closest('tr').find('input[type="checkbox"]');

            // toggle the line selection
            if ($checkbox.prop('checked')) {
              $checkbox.prop('checked', false);
            } else {
              $checkbox.prop('checked', true);
            }

            // takes care of the new selection
            self._onSelection();
          }
        });

        // take care of clicks on checkboxes
        this.controls.$list.on('click', 'input[type="checkbox"]', function () {
          // just takes care of the new selection
          self._onSelection();
        });

        // check/uncheck all checkboxes
        this.controls.$checkAll.on('click', function () {
          var $checkboxes = self.controls.$checkboxes;

          // select/unselect all lines
          if (this.checked) {
            $checkboxes.prop('checked', true);
          } else {
            $checkboxes.prop('checked', false);
          }

          // takes care of the new selection
          self._onSelection();
        });

        // data already available ?
        if (data) {
          this.update(data);
        } else {
          this.setState('empty', true);
          this.setState('loaded', false);
        }
      }).init(initConfig);
    }

    return datalistFactory;

});
