/**
 * @dyna-grid/core - Advanced Data Grid / Data Table supporting Javascript / Web Components
 * @version v1.1.0
 * @link 
 * @license 
 */
"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var dyAbstractField_1 = require("./dyAbstractField");
var component_1 = require("./component");
var context_1 = require("../context/context");
var string_1 = require("../utils/string");
var dom_1 = require("../utils/dom");
var array_1 = require("../utils/array");
var keyCode_1 = require("../constants/keyCode");
var aria_1 = require("../utils/aria");
var DyList = /** @class */ (function (_super) {
    __extends(DyList, _super);
    function DyList(cssIdentifier) {
        if (cssIdentifier === void 0) { cssIdentifier = 'default'; }
        var _this = _super.call(this, /* html */ "<div class=\"dy-list dy-" + cssIdentifier + "-list\" role=\"listbox\"></div>") || this;
        _this.cssIdentifier = cssIdentifier;
        _this.options = [];
        _this.itemEls = [];
        return _this;
    }
    DyList.prototype.init = function () {
        this.addManagedListener(this.getGui(), 'keydown', this.handleKeyDown.bind(this));
    };
    DyList.prototype.handleKeyDown = function (e) {
        var key = e.keyCode;
        switch (key) {
            case keyCode_1.KeyCode.ENTER:
                if (!this.highlightedEl) {
                    this.setValue(this.getValue());
                }
                else {
                    var pos = this.itemEls.indexOf(this.highlightedEl);
                    this.setValueByIndex(pos);
                }
                break;
            case keyCode_1.KeyCode.DOWN:
            case keyCode_1.KeyCode.UP:
                var isDown = key === keyCode_1.KeyCode.DOWN;
                var itemToHighlight = void 0;
                e.preventDefault();
                if (!this.highlightedEl) {
                    itemToHighlight = this.itemEls[isDown ? 0 : this.itemEls.length - 1];
                }
                else {
                    var currentIdx = this.itemEls.indexOf(this.highlightedEl);
                    var nextPos = currentIdx + (isDown ? 1 : -1);
                    nextPos = Math.min(Math.max(nextPos, 0), this.itemEls.length - 1);
                    itemToHighlight = this.itemEls[nextPos];
                }
                this.highlightItem(itemToHighlight);
                break;
        }
    };
    DyList.prototype.addOptions = function (listOptions) {
        var _this = this;
        listOptions.forEach(function (listOption) { return _this.addOption(listOption); });
        return this;
    };
    DyList.prototype.addOption = function (listOption) {
        var value = listOption.value, text = listOption.text;
        var sanitisedText = string_1.escapeString(text || value);
        this.options.push({ value: value, text: sanitisedText });
        this.renderOption(value, sanitisedText);
        return this;
    };
    DyList.prototype.renderOption = function (value, text) {
        var _this = this;
        var itemEl = document.createElement('div');
        itemEl.setAttribute('role', 'option');
        dom_1.addCssClass(itemEl, 'dy-list-item');
        dom_1.addCssClass(itemEl, "dy-" + this.cssIdentifier + "-list-item");
        itemEl.innerHTML = "<span>" + text + "</span>";
        itemEl.tabIndex = -1;
        this.itemEls.push(itemEl);
        this.addManagedListener(itemEl, 'mouseover', function () { return _this.highlightItem(itemEl); });
        this.addManagedListener(itemEl, 'mouseleave', function () { return _this.clearHighlighted(); });
        this.addManagedListener(itemEl, 'click', function () { return _this.setValue(value); });
        this.getGui().appendChild(itemEl);
    };
    DyList.prototype.setValue = function (value, silent) {
        if (this.value === value) {
            this.fireItemSelected();
            return this;
        }
        if (value == null) {
            this.reset();
            return this;
        }
        var idx = array_1.findIndex(this.options, function (option) { return option.value === value; });
        if (idx !== -1) {
            var option = this.options[idx];
            this.value = option.value;
            this.displayValue = option.text != null ? option.text : option.value;
            this.highlightItem(this.itemEls[idx]);
            if (!silent) {
                this.fireChangeEvent();
            }
        }
        return this;
    };
    DyList.prototype.setValueByIndex = function (idx) {
        return this.setValue(this.options[idx].value);
    };
    DyList.prototype.getValue = function () {
        return this.value;
    };
    DyList.prototype.getDisplayValue = function () {
        return this.displayValue;
    };
    DyList.prototype.refreshHighlighted = function () {
        var _this = this;
        this.clearHighlighted();
        var idx = array_1.findIndex(this.options, function (option) { return option.value === _this.value; });
        if (idx !== -1) {
            this.highlightItem(this.itemEls[idx]);
        }
    };
    DyList.prototype.reset = function () {
        this.value = null;
        this.displayValue = null;
        this.clearHighlighted();
        this.fireChangeEvent();
    };
    DyList.prototype.highlightItem = function (el) {
        if (!el.offsetParent) {
            return;
        }
        this.clearHighlighted();
        this.highlightedEl = el;
        dom_1.addCssClass(this.highlightedEl, DyList.ACTIVE_CLASS);
        aria_1.setAriaSelected(this.highlightedEl, true);
        this.highlightedEl.focus();
    };
    DyList.prototype.clearHighlighted = function () {
        if (!this.highlightedEl || !this.highlightedEl.offsetParent) {
            return;
        }
        dom_1.removeCssClass(this.highlightedEl, DyList.ACTIVE_CLASS);
        aria_1.setAriaSelected(this.highlightedEl, false);
        this.highlightedEl = null;
    };
    DyList.prototype.fireChangeEvent = function () {
        this.dispatchEvent({ type: dyAbstractField_1.DyAbstractField.EVENT_CHANGED });
        this.fireItemSelected();
    };
    DyList.prototype.fireItemSelected = function () {
        this.dispatchEvent({ type: DyList.EVENT_ITEM_SELECTED });
    };
    DyList.EVENT_ITEM_SELECTED = 'selectedItem';
    DyList.ACTIVE_CLASS = 'dy-active-item';
    __decorate([
        context_1.PostConstruct
    ], DyList.prototype, "init", null);
    return DyList;
}(component_1.Component));
exports.DyList = DyList;

//# sourceMappingURL=dyList.js.map
