tsiclient/ColorPicker-499f8df4.js

import { a as __extends } from './tslib.es6-f952ba6f.js';
import { K as KeyCodes, U as Utils } from './Utils-38a0872e.js';
import { select } from 'd3';
import { C as Component } from './Component-5173b5ea.js';

var ColorPicker = /** @class */ (function (_super) {
    __extends(ColorPicker, _super);
    function ColorPicker(renderTarget, componentId) {
        if (componentId === void 0) { componentId = Utils.guid(); }
        var _this = _super.call(this, renderTarget) || this;
        _this.getSelectedColorValue = function () {
            return _this.selectedColor;
        };
        _this.showColorGrid = function () {
            _this.colorPickerElem.select(".tsi-colorGrid").style("display", "flex");
            _this.isColorGridVisible = true;
            _this.colorPickerElem.selectAll(".tsi-colorItem").nodes()[0].focus();
            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-expanded", true);
        };
        _this.hideColorGrid = function (withFocusBackToPickerButton) {
            if (withFocusBackToPickerButton === void 0) { withFocusBackToPickerButton = false; }
            _this.colorPickerElem.select(".tsi-colorGrid").style("display", "none");
            _this.isColorGridVisible = false;
            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-expanded", false);
            if (withFocusBackToPickerButton) {
                _this.colorPickerElem.select(".tsi-colorPickerButton").node().focus();
            }
        };
        _this.setSelectedColor = function (cStr, gridItem) {
            _this.colorPickerElem.select(".tsi-selectedColor").classed("tsi-noColor", false);
            _this.colorPickerElem.select(".tsi-selectedColor").style("background-color", cStr);
            _this.colorPickerElem.select(".tsi-selectedColorValue").text(cStr);
            _this.colorPickerElem.select(".tsi-colorItem.tsi-selected").classed("tsi-selected", false);
            _this.colorPickerElem.select(".tsi-colorItem.tsi-selected").attr("aria-selected", false);
            _this.colorPickerElem.select(".tsi-colorPickerButton").attr("aria-label", (_this.selectedColor ? _this.selectedColor : _this.getString('No color')) + ' ' + _this.getString('Select color'));
            gridItem.classed("tsi-selected", true);
            gridItem.attr("aria-selected", true);
            _this.selectedColor = cStr;
        };
        _this.getColorPickerElem = function () {
            return _this.colorPickerElem;
        };
        _this.componentId = componentId;
        return _this;
    }
    ColorPicker.prototype.render = function (options) {
        var _this = this;
        if (options === void 0) { options = {}; }
        this.chartOptions.setOptions(options);
        this.selectedColor = this.chartOptions.defaultColor;
        if (this.chartOptions.colors.indexOf(this.selectedColor) === -1) {
            this.chartOptions.colors.push(this.selectedColor);
        }
        this.colorPickerElem = select(this.renderTarget).classed("tsi-colorPicker", true);
        this.colorPickerElem.text('');
        _super.prototype.themify.call(this, this.colorPickerElem, this.chartOptions.theme);
        // color selection button
        var colorPickerButton = this.colorPickerElem.append('button').classed("tsi-colorPickerButton", true)
            .attr("title", this.getString('Select color'))
            .attr("aria-label", (this.selectedColor ? this.selectedColor : this.getString('No color')) + ' ' + this.getString('Select color'))
            .attr("aria-controls", "tsi-colorGrid_" + this.componentId)
            .on('click', function (event) {
            if (_this.isColorGridVisible) {
                _this.hideColorGrid(true);
            }
            else {
                _this.chartOptions.onClick(event);
                _this.showColorGrid();
            }
        });
        if (this.selectedColor) {
            colorPickerButton.append('div').classed("tsi-selectedColor", true).style("background-color", this.selectedColor);
        }
        else {
            colorPickerButton.append('div').classed("tsi-selectedColor", true).classed("tsi-noColor", true);
        }
        colorPickerButton.append('span').classed("tsi-selectedColorValue", true).classed("hidden", this.chartOptions.isColorValueHidden)
            .attr("id", "tsi-selectedColorValue_" + this.componentId)
            .text(this.selectedColor ? this.selectedColor : this.getString('No color'));
        // color grid
        var colorGridElem = this.colorPickerElem.append('div').classed("tsi-colorGrid", true).attr("id", "tsi-colorGrid_" + this.componentId).attr("role", "grid");
        var colorGridRowElem = colorGridElem.append('div').classed("tsi-colorGridRow", true).attr("role", "row");
        this.chartOptions.colors.forEach(function (c, idx) {
            var gridItem = colorGridRowElem.append('div').classed("tsi-colorItem", true).classed("tsi-selected", c === _this.selectedColor)
                .attr("tabindex", 0)
                .attr("role", "gridcell")
                .attr("aria-label", c)
                .attr("aria-selected", c === _this.selectedColor)
                .style("background-color", c)
                .on('click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                _this.chartOptions.onSelect(c);
                _this.hideColorGrid(true);
                _this.setSelectedColor(c, gridItem);
            })
                .on('keydown', function (event) {
                if (event.keyCode === KeyCodes.Tab && !event.shiftKey && idx === _this.chartOptions.colors.length - 1) { // tab
                    event.preventDefault();
                    _this.colorPickerElem.selectAll(".tsi-colorItem").nodes()[0].focus();
                }
                else if (event.keyCode === KeyCodes.Enter) {
                    event.preventDefault();
                    event.stopPropagation();
                    _this.chartOptions.onSelect(c);
                    _this.hideColorGrid(true);
                    _this.setSelectedColor(c, gridItem);
                }
                else if (event.keyCode === KeyCodes.Esc) {
                    event.preventDefault();
                    event.stopPropagation();
                    _this.hideColorGrid(true);
                }
            });
        });
    };
    return ColorPicker;
}(Component));

export { ColorPicker as C };