@carbon/charts 0.39.0 → 0.40.2

package/components/axes/toolbar.d.ts

@@ -0,0 +1,34 @@
+import { Component } from "../component";
+import { ToolbarControlTypes } from "../../interfaces";
+export declare class Toolbar extends Component {
+    type: string;
+    overflowButton: any;
+    overflowMenu: any;
+    overflowMenuX: number;
+    overflowMenuY: number;
+    overflowMenuItemId: number;
+    init(): void;
+    render(animate?: boolean): void;
+    isOverflowMenuOpen(): boolean;
+    updateOverflowMenu(show: boolean): void;
+    focusOnPreviousEnabledMenuItem(currentItemIndex: any): void;
+    focusOnNextEnabledMenuItem(currentItemIndex: any): void;
+    toggleOverflowMenu(): void;
+    getOverflowMenuHTML(): any;
+    getControlConfigs(): {
+        buttonList: any[];
+        overflowMenuItemList?: undefined;
+    } | {
+        buttonList: any[];
+        overflowMenuItemList: any[];
+    };
+    getOverflowMenuItems(): any[];
+    getOverflowButtonConfig(): {
+        id: string;
+        shouldBeDisabled: () => boolean;
+        iconSVGContent: string;
+        clickFunction: () => void;
+    };
+    getControlConfigByType(controlType: ToolbarControlTypes): any;
+    getControlIconByType(controlType: ToolbarControlTypes): "<polygon points=\"19 13 15 13 15 9 13 9 13 13 9 13 9 15 13 15 13 19 15 19 15 15 19 15 19 13\"/>\n    \t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>" | "<rect x=\"9\" y=\"13\" width=\"10\" height=\"2\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>" | "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>";
+}

package/components/axes/toolbar.js

@@ -0,0 +1,388 @@
+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 __());
+    };
+})();
+// Internal Imports
+import { Component } from "../component";
+import { Events, Roles, ToolbarControlTypes } from "../../interfaces";
+import { Tools } from "../../tools";
+import { DOMUtils } from "../../services";
+import * as Configuration from "../../configuration";
+// D3 Imports
+import { event, select } from "d3-selection";
+// import the settings for the css prefix
+import settings from "carbon-components/es/globals/js/settings";
+var Toolbar = /** @class */ (function (_super) {
+    __extends(Toolbar, _super);
+    function Toolbar() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = "toolbar";
+        // x, y coordinate of overflow menu
+        _this.overflowMenuX = 0;
+        _this.overflowMenuY = 0;
+        // Use a random number to create overflow menu item unique ID
+        // so they don't interfere the other overflow menu item in a page
+        _this.overflowMenuItemId = Math.floor(Math.random() * 99999999999);
+        return _this;
+    }
+    Toolbar.prototype.init = function () {
+        var _this = this;
+        var options = this.model.getOptions();
+        // Grab the tooltip element
+        var holder = select(this.services.domUtils.getHolder());
+        var chartPrefix = Tools.getProperty(options, "style", "prefix");
+        this.overflowMenu = DOMUtils.appendOrSelect(holder, "div." + settings.prefix + "--" + chartPrefix + "--overflowMenu");
+        this.overflowMenu.style("max-width", null);
+        // listen to show overflow menu event to render the overflow menu
+        this.services.events.addEventListener(Events.Toolbar.SHOW_OVERFLOW_MENU, function () {
+            _this.overflowMenu.html(_this.getOverflowMenuHTML());
+        });
+        // listen to hide overflow menu event to hide the overflow menu
+        this.services.events.addEventListener(Events.Toolbar.HIDE_OVERFLOW_MENU, function () {
+            _this.overflowMenu.html(null);
+        });
+        // hide overflow menu if user clicks on somewhere in web page
+        document.body.addEventListener("click", function () {
+            return _this.updateOverflowMenu(false);
+        });
+    };
+    Toolbar.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        var isDataLoading = Tools.getProperty(this.model.getOptions(), "data", "loading");
+        // size of toolbar button with background
+        var buttonSize = Configuration.toolbar.buttonSize;
+        var parentY = parseFloat(this.parent.node().getAttribute("y"));
+        var svg = this.getContainerSVG();
+        // TODO -- adjust toolbar Y position to align title component
+        // before layout component supports vertical alignment center
+        var Y_OFFSET = -6;
+        svg.attr("transform", "translate(0, " + (parentY + Y_OFFSET) + ")");
+        var width = DOMUtils.getSVGElementSize(this.services.domUtils.getMainSVG(), {
+            useAttrs: true
+        }).width;
+        // overflow menu width is 160px
+        // it's set by Carbon component
+        var overflowMenuWidth = 160;
+        // no good solution to get correct Toolbar position
+        // parent x doesn't work well
+        // assume the overflow icon has right alignment in layout
+        this.overflowMenuX = width - overflowMenuWidth;
+        this.overflowMenuY = parentY + Y_OFFSET + buttonSize;
+        var container = DOMUtils.appendOrSelect(svg, "svg.toolbar-container")
+            .attr("width", "100%")
+            .attr("height", Configuration.toolbar.height)
+            .attr("opacity", 1);
+        // clean children first
+        container.html(null);
+        // get the toolbar buttons
+        var _a = this.getControlConfigs(), buttonList = _a.buttonList, overflowMenuItemList = _a.overflowMenuItemList;
+        // overflow button is required only if overflow menu item list is valid
+        if (!!overflowMenuItemList) {
+            buttonList.push(this.getOverflowButtonConfig());
+        }
+        // loading or empty state
+        if (isDataLoading || buttonList.length === 0) {
+            // put an empty rect to keep space unchanged
+            DOMUtils.appendOrSelect(container, "svg.toolbar-loading-spacer")
+                .append("rect")
+                .attr("height", Configuration.toolbar.height)
+                .attr("width", buttonSize * 3) // value doesn't matter but can't be empty
+                .attr("opacity", 0);
+        }
+        else {
+            // render toolbar buttons sequentially
+            var buttonXPosition_1 = 0;
+            buttonList.forEach(function (button) {
+                // button container
+                var buttonContainer = DOMUtils.appendOrSelect(container, "svg." + button.id).classed("toolbar-button", true);
+                // add button background rect
+                var buttonBackground = DOMUtils.appendOrSelect(buttonContainer, "rect.toolbar-button-background")
+                    .attr("x", buttonXPosition_1)
+                    .attr("y", 0)
+                    .attr("width", buttonSize)
+                    .attr("height", buttonSize);
+                var buttonIcon = DOMUtils.appendOrSelect(buttonContainer, "svg.toolbar-button-icon")
+                    .attr("x", buttonXPosition_1 + Configuration.toolbar.iconPadding)
+                    .attr("y", Configuration.toolbar.iconPadding)
+                    .attr("width", Configuration.toolbar.iconSize)
+                    .attr("height", Configuration.toolbar.iconSize)
+                    .attr("viewBox", "0 0 32 32")
+                    .attr("role", Roles.IMG);
+                buttonIcon.html(button.iconSVGContent);
+                if (button.shouldBeDisabled()) {
+                    buttonContainer
+                        .classed("toolbar-button--disabled", true)
+                        .classed("toolbar-button--focusable", false)
+                        .attr("tabindex", -1)
+                        .attr("role", null);
+                    buttonIcon.classed("toolbar-button-icon--disabled", true);
+                    buttonBackground.classed("toolbar-button-background--disabled", true);
+                    buttonContainer.on("click", null).on("keyup", null);
+                }
+                else {
+                    buttonContainer
+                        .classed("toolbar-button--disabled", false)
+                        .classed("toolbar-button--focusable", true)
+                        .attr("tabindex", 0)
+                        .attr("role", Roles.BUTTON);
+                    buttonIcon.classed("toolbar-button-icon--disabled", false);
+                    buttonBackground.classed("toolbar-button-background--disabled", false);
+                    buttonContainer
+                        .on("click", button.clickFunction)
+                        .on("keyup", function () {
+                        if ((event.key && event.key === "Enter") ||
+                            event.key === " ") {
+                            event.preventDefault();
+                            button.clickFunction();
+                        }
+                    });
+                }
+                buttonXPosition_1 += buttonSize;
+            });
+            this.overflowButton = this.getContainerSVG().select("svg.toolbar-overflow-menu");
+            if (this.isOverflowMenuOpen()) {
+                // keep overflow menu displayed
+                this.updateOverflowMenu(true);
+            }
+        }
+    };
+    Toolbar.prototype.isOverflowMenuOpen = function () {
+        return (this.overflowMenu
+            .selectAll("ul.bx--overflow-menu-options--open")
+            .size() > 0);
+    };
+    // show/hide overflow menu
+    Toolbar.prototype.updateOverflowMenu = function (show) {
+        // update overflow button background
+        if (this.overflowButton) {
+            this.overflowButton.classed("toolbar-button--hovered", show);
+        }
+        if (show) {
+            this.services.events.dispatchEvent(Events.Toolbar.SHOW_OVERFLOW_MENU);
+        }
+        else {
+            this.services.events.dispatchEvent(Events.Toolbar.HIDE_OVERFLOW_MENU);
+        }
+    };
+    Toolbar.prototype.focusOnPreviousEnabledMenuItem = function (currentItemIndex) {
+        var overflowMenuItems = this.getOverflowMenuItems();
+        var previousItemIndex = overflowMenuItems.length;
+        for (var i = currentItemIndex - 1; i >= 0; i--) {
+            var previousOverflowMenuItem = overflowMenuItems[i];
+            if (!previousOverflowMenuItem.shouldBeDisabled()) {
+                previousItemIndex = i;
+                break;
+            }
+        }
+        // only if previous enabled menu item found
+        if (previousItemIndex < overflowMenuItems.length) {
+            var previousItemNode = select("#" +
+                overflowMenuItems[previousItemIndex].id +
+                this.overflowMenuItemId).node();
+            if ("focus" in previousItemNode) {
+                previousItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.focusOnNextEnabledMenuItem = function (currentItemIndex) {
+        var overflowMenuItems = this.getOverflowMenuItems();
+        var nextItemIndex = -1;
+        for (var i = currentItemIndex + 1; i < overflowMenuItems.length; i++) {
+            var nextOverflowMenuItem = overflowMenuItems[i];
+            if (!nextOverflowMenuItem.shouldBeDisabled()) {
+                nextItemIndex = i;
+                break;
+            }
+        }
+        // only if next enabled menu item found
+        if (nextItemIndex > -1) {
+            var nextItemNode = select("#" +
+                overflowMenuItems[nextItemIndex].id +
+                this.overflowMenuItemId).node();
+            if ("focus" in nextItemNode) {
+                nextItemNode.focus();
+            }
+        }
+    };
+    Toolbar.prototype.toggleOverflowMenu = function () {
+        var _this = this;
+        if (this.isOverflowMenuOpen()) {
+            // hide overflow menu
+            this.updateOverflowMenu(false);
+        }
+        else {
+            // show overflow menu
+            this.updateOverflowMenu(true);
+            // setup overflow menu item event listener
+            var self_1 = this;
+            var overflowMenuItems = this.getOverflowMenuItems();
+            overflowMenuItems.forEach(function (menuItem, index) {
+                var element = select("#" + menuItem.id + _this.overflowMenuItemId);
+                if (element !== null) {
+                    element.on("click", function () {
+                        // call the specified function
+                        menuItem.clickFunction();
+                        // hide overflow menu
+                        self_1.updateOverflowMenu(false);
+                    });
+                    element.on("keyup", function () {
+                        if (event.key === "Enter") {
+                            // call the specified function
+                            menuItem.clickFunction();
+                        }
+                        else if (event.key === "ArrowUp") {
+                            // focus on previous menu item
+                            self_1.focusOnPreviousEnabledMenuItem(index);
+                        }
+                        else if (event.key === "ArrowDown") {
+                            // focus on next menu item
+                            self_1.focusOnNextEnabledMenuItem(index);
+                        }
+                        // Not hide overflow menu by keyboard arrow up/down event
+                    });
+                }
+            });
+            // default to focus on the first enabled menu item
+            self_1.focusOnNextEnabledMenuItem(-1);
+        }
+        event.stopImmediatePropagation();
+    };
+    Toolbar.prototype.getOverflowMenuHTML = function () {
+        var _this = this;
+        var overflowMenuItems = this.getOverflowMenuItems();
+        // don't render whole overflow menu if no overflow menu item
+        if (!overflowMenuItems || overflowMenuItems.length === 0) {
+            return "";
+        }
+        var overflowMenuHtml;
+        overflowMenuHtml = "<div data-floating-menu-container=\"true\" data-floating-menu-direction=\"bottom\" role=\"main\">\n\t\t\t<ul class=\"bx--overflow-menu-options bx--overflow-menu--flip bx--overflow-menu-options--open\"\n\t\t\t\ttabindex=\"-1\" role=\"" + Roles.MENU + "\" aria-label=\"Menu\" data-floating-menu-direction=\"bottom\"\n\t\t\t\tstyle=\"left:" + this.overflowMenuX + "px; top:" + this.overflowMenuY + "px;\">";
+        // generate html for each overflow menu items
+        overflowMenuItems.forEach(function (menuItem, index) {
+            var menuItemClasses = "bx--overflow-menu-options__option".concat(menuItem.shouldBeDisabled()
+                ? " bx--overflow-menu-options__option--disabled" // class for disabled menu item
+                : "");
+            overflowMenuHtml += "<li class=\"" + menuItemClasses + "\" role=\"" + Roles.MENU_ITEM + "\">\n\t\t\t\t<button class=\"bx--overflow-menu-options__btn\"\n\t\t\t\t\tdata-floating-menu-primary-focus=\"" + (index === 0) + "\"\n\t\t\t\t\ttabindex=\"-1\" index=\"" + index + "\" title=\"" + menuItem.text + "\"\n\t\t\t\t\tid=\"" + (menuItem.id + _this.overflowMenuItemId) + "\">\n\t\t\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t\t\t" + menuItem.text + "\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</li>";
+        });
+        overflowMenuHtml += "</ul></div>";
+        return overflowMenuHtml;
+    };
+    Toolbar.prototype.getControlConfigs = function () {
+        var _this = this;
+        var numberOfIcons = Tools.getProperty(this.model.getOptions(), "toolbar", "numberOfIcons");
+        var controls = Tools.getProperty(this.model.getOptions(), "toolbar", "controls");
+        var controlList = [];
+        controls.forEach(function (control) {
+            var controlConfig = _this.getControlConfigByType(control.type);
+            // add to list if config is valid
+            if (controlConfig) {
+                controlConfig.text = control.text ? control.text : control.type;
+                controlList.push(controlConfig);
+            }
+        });
+        if (controlList.length <= numberOfIcons) {
+            return {
+                buttonList: controlList
+            };
+        }
+        return {
+            // leave one button for overflow button
+            buttonList: controlList.splice(0, numberOfIcons - 1),
+            overflowMenuItemList: controlList
+        };
+    };
+    Toolbar.prototype.getOverflowMenuItems = function () {
+        var overflowMenuItemList = this.getControlConfigs().overflowMenuItemList;
+        if (!!overflowMenuItemList) {
+            return overflowMenuItemList;
+        }
+        else {
+            return [];
+        }
+    };
+    // special button config for overflow button
+    Toolbar.prototype.getOverflowButtonConfig = function () {
+        var _this = this;
+        return {
+            id: "toolbar-overflow-menu",
+            shouldBeDisabled: function () { return false; },
+            iconSVGContent: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            clickFunction: function () { return _this.toggleOverflowMenu(); }
+        };
+    };
+    Toolbar.prototype.getControlConfigByType = function (controlType) {
+        var _this = this;
+        var isZoomBarEnabled = this.services.zoom.isZoomBarEnabled() &&
+            !this.services.zoom.isEmptyState();
+        var controlConfig;
+        switch (controlType) {
+            case ToolbarControlTypes.ZOOM_IN:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: "toolbar-zoomIn",
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMinZoomDomain();
+                        },
+                        iconSVGContent: this.getControlIconByType(controlType),
+                        clickFunction: function () { return _this.services.zoom.zoomIn(); }
+                    };
+                }
+                break;
+            case ToolbarControlTypes.ZOOM_OUT:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: "toolbar-zoomOut",
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMaxZoomDomain();
+                        },
+                        iconSVGContent: this.getControlIconByType(controlType),
+                        clickFunction: function () { return _this.services.zoom.zoomOut(); }
+                    };
+                }
+                break;
+            case ToolbarControlTypes.RESET_ZOOM:
+                if (isZoomBarEnabled) {
+                    controlConfig = {
+                        id: "toolbar-resetZoom",
+                        shouldBeDisabled: function () {
+                            return _this.services.zoom.isMaxZoomDomain();
+                        },
+                        iconSVGContent: this.getControlIconByType(controlType),
+                        clickFunction: function () {
+                            return _this.services.zoom.resetZoomDomain();
+                        }
+                    };
+                }
+                break;
+            // add more toolbar control configuration here
+            default:
+                throw Error("Not supported toolbar control type: " + controlType);
+        }
+        return controlConfig;
+    };
+    Toolbar.prototype.getControlIconByType = function (controlType) {
+        switch (controlType) {
+            case ToolbarControlTypes.ZOOM_IN:
+                return "<polygon points=\"19 13 15 13 15 9 13 9 13 13 9 13 9 15 13 15 13 19 15 19 15 15 19 15 19 13\"/>\n    \t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>";
+            case ToolbarControlTypes.ZOOM_OUT:
+                return "<rect x=\"9\" y=\"13\" width=\"10\" height=\"2\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>";
+            case ToolbarControlTypes.RESET_ZOOM:
+                return "<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>";
+            // add more icons here
+            // svg icon must be with 32x32 viewBox
+            default:
+                throw Error("Not supported toolbar control type: " + controlType);
+        }
+    };
+    return Toolbar;
+}(Component));
+export { Toolbar };
+//# sourceMappingURL=../../../src/components/axes/toolbar.js.map

package/components/axes/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","sourceRoot":"","sources":["toolbar.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,mBAAmB;AACnB,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,KAAK,aAAa,MAAM,qBAAqB,CAAC;AAErD,aAAa;AACb,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE7C,yCAAyC;AACzC,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAEhE;IAA6B,2BAAS;IAAtC;QAAA,qEA4dC;QA3dA,UAAI,GAAG,SAAS,CAAC;QAQjB,mCAAmC;QACnC,mBAAa,GAAG,CAAC,CAAC;QAClB,mBAAa,GAAG,CAAC,CAAC;QAElB,6DAA6D;QAC7D,iEAAiE;QACjE,wBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC;;IA6c9D,CAAC;IA3cA,sBAAI,GAAJ;QAAA,iBAiCC;QAhCA,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAExC,2BAA2B;QAC3B,IAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;QAC1D,IAAM,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;QAElE,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC,cAAc,CAC1C,MAAM,EACN,SAAO,QAAQ,CAAC,MAAM,UAAK,WAAW,mBAAgB,CACtD,CAAC;QAEF,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;QAE3C,iEAAiE;QACjE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CACpC,MAAM,CAAC,OAAO,CAAC,kBAAkB,EACjC;YACC,KAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QACpD,CAAC,CACD,CAAC;QAEF,+DAA+D;QAC/D,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,gBAAgB,CACpC,MAAM,CAAC,OAAO,CAAC,kBAAkB,EACjC;YACC,KAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC,CACD,CAAC;QACF,6DAA6D;QAC7D,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE;YACvC,OAAA,KAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC;QAA9B,CAA8B,CAC9B,CAAC;IACH,CAAC;IAED,wBAAM,GAAN,UAAO,OAAc;QAAd,wBAAA,EAAA,cAAc;QACpB,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,MAAM,EACN,SAAS,CACT,CAAC;QAEF,yCAAyC;QACzC,IAAM,UAAU,GAAG,aAAa,CAAC,OAAO,CAAC,UAAU,CAAC;QACpD,IAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;QAEjE,IAAM,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAEnC,6DAA6D;QAC7D,6DAA6D;QAC7D,IAAM,QAAQ,GAAG,CAAC,CAAC,CAAC;QACpB,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,mBAAgB,OAAO,GAAG,QAAQ,OAAG,CAAC,CAAC;QAErD,IAAA;;gBAAK,CAKX;QAEF,+BAA+B;QAC/B,+BAA+B;QAC/B,IAAM,iBAAiB,GAAG,GAAG,CAAC;QAC9B,mDAAmD;QACnD,6BAA6B;QAC7B,yDAAyD;QACzD,IAAI,CAAC,aAAa,GAAG,KAAK,GAAG,iBAAiB,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;QACrD,IAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,uBAAuB,CAAC;aACrE,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC;aACrB,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;aAC5C,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QAErB,uBAAuB;QACvB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErB,0BAA0B;QACpB,IAAA,6BAA+D,EAA7D,0BAAU,EAAE,8CAAiD,CAAC;QAEtE,uEAAuE;QACvE,IAAI,CAAC,CAAC,oBAAoB,EAAE;YAC3B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAC;SAChD;QAED,yBAAyB;QACzB,IAAI,aAAa,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,4CAA4C;YAC5C,QAAQ,CAAC,cAAc,CAAC,SAAS,EAAE,4BAA4B,CAAC;iBAC9D,MAAM,CAAC,MAAM,CAAC;iBACd,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC;iBAC5C,IAAI,CAAC,OAAO,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC,0CAA0C;iBACxE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;SACrB;aAAM;YACN,sCAAsC;YACtC,IAAI,iBAAe,GAAG,CAAC,CAAC;YACxB,UAAU,CAAC,OAAO,CAAC,UAAC,MAAM;gBACzB,mBAAmB;gBACnB,IAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAC9C,SAAS,EACT,SAAO,MAAM,CAAC,EAAI,CAClB,CAAC,OAAO,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;gBAElC,6BAA6B;gBAC7B,IAAM,gBAAgB,GAAG,QAAQ,CAAC,cAAc,CAC/C,eAAe,EACf,gCAAgC,CAChC;qBACC,IAAI,CAAC,GAAG,EAAE,iBAAe,CAAC;qBAC1B,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;qBACZ,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;qBACzB,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;gBAE7B,IAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CACzC,eAAe,EACf,yBAAyB,CACzB;qBACC,IAAI,CACJ,GAAG,EACH,iBAAe,GAAG,aAAa,CAAC,OAAO,CAAC,WAAW,CACnD;qBACA,IAAI,CAAC,GAAG,EAAE,aAAa,CAAC,OAAO,CAAC,WAAW,CAAC;qBAC5C,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;qBAC7C,IAAI,CAAC,QAAQ,EAAE,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC;qBAC9C,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC;qBAC5B,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;gBAE1B,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;gBACvC,IAAI,MAAM,CAAC,gBAAgB,EAAE,EAAE;oBAC9B,eAAe;yBACb,OAAO,CAAC,0BAA0B,EAAE,IAAI,CAAC;yBACzC,OAAO,CAAC,2BAA2B,EAAE,KAAK,CAAC;yBAC3C,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;yBACpB,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;oBACrB,UAAU,CAAC,OAAO,CAAC,+BAA+B,EAAE,IAAI,CAAC,CAAC;oBAC1D,gBAAgB,CAAC,OAAO,CACvB,qCAAqC,EACrC,IAAI,CACJ,CAAC;oBACF,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;iBACpD;qBAAM;oBACN,eAAe;yBACb,OAAO,CAAC,0BAA0B,EAAE,KAAK,CAAC;yBAC1C,OAAO,CAAC,2BAA2B,EAAE,IAAI,CAAC;yBAC1C,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;yBACnB,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;oBAC7B,UAAU,CAAC,OAAO,CAAC,+BAA+B,EAAE,KAAK,CAAC,CAAC;oBAC3D,gBAAgB,CAAC,OAAO,CACvB,qCAAqC,EACrC,KAAK,CACL,CAAC;oBACF,eAAe;yBACb,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,aAAa,CAAC;yBACjC,EAAE,CAAC,OAAO,EAAE;wBACZ,IACC,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;4BACpC,KAAK,CAAC,GAAG,KAAK,GAAG,EAChB;4BACD,KAAK,CAAC,cAAc,EAAE,CAAC;4BAEvB,MAAM,CAAC,aAAa,EAAE,CAAC;yBACvB;oBACF,CAAC,CAAC,CAAC;iBACJ;gBACD,iBAAe,IAAI,UAAU,CAAC;YAC/B,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,MAAM,CAClD,2BAA2B,CAC3B,CAAC;YAEF,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;gBAC9B,+BAA+B;gBAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;aAC9B;SACD;IACF,CAAC;IAED,oCAAkB,GAAlB;QACC,OAAO,CACN,IAAI,CAAC,YAAY;aACf,SAAS,CAAC,oCAAoC,CAAC;aAC/C,IAAI,EAAE,GAAG,CAAC,CACZ,CAAC;IACH,CAAC;IAED,0BAA0B;IAC1B,oCAAkB,GAAlB,UAAmB,IAAa;QAC/B,oCAAoC;QACpC,IAAI,IAAI,CAAC,cAAc,EAAE;YACxB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,yBAAyB,EAAE,IAAI,CAAC,CAAC;SAC7D;QACD,IAAI,IAAI,EAAE;YACT,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CACjC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CACjC,CAAC;SACF;aAAM;YACN,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,aAAa,CACjC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CACjC,CAAC;SACF;IACF,CAAC;IAED,gDAA8B,GAA9B,UAA+B,gBAAgB;QAC9C,IAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACtD,IAAI,iBAAiB,GAAG,iBAAiB,CAAC,MAAM,CAAC;QACjD,KAAK,IAAI,CAAC,GAAG,gBAAgB,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;YAC/C,IAAM,wBAAwB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,gBAAgB,EAAE,EAAE;gBACjD,iBAAiB,GAAG,CAAC,CAAC;gBACtB,MAAM;aACN;SACD;QACD,2CAA2C;QAC3C,IAAI,iBAAiB,GAAG,iBAAiB,CAAC,MAAM,EAAE;YACjD,IAAM,gBAAgB,GAAG,MAAM,CAC9B,GAAG;gBACF,iBAAiB,CAAC,iBAAiB,CAAC,CAAC,EAAE;gBACvC,IAAI,CAAC,kBAAkB,CACxB,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,IAAI,gBAAgB,EAAE;gBAChC,gBAAgB,CAAC,KAAK,EAAE,CAAC;aACzB;SACD;IACF,CAAC;IAED,4CAA0B,GAA1B,UAA2B,gBAAgB;QAC1C,IAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACtD,IAAI,aAAa,GAAG,CAAC,CAAC,CAAC;QACvB,KAAK,IAAI,CAAC,GAAG,gBAAgB,GAAG,CAAC,EAAE,CAAC,GAAG,iBAAiB,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrE,IAAM,oBAAoB,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAClD,IAAI,CAAC,oBAAoB,CAAC,gBAAgB,EAAE,EAAE;gBAC7C,aAAa,GAAG,CAAC,CAAC;gBAClB,MAAM;aACN;SACD;QACD,uCAAuC;QACvC,IAAI,aAAa,GAAG,CAAC,CAAC,EAAE;YACvB,IAAM,YAAY,GAAG,MAAM,CAC1B,GAAG;gBACF,iBAAiB,CAAC,aAAa,CAAC,CAAC,EAAE;gBACnC,IAAI,CAAC,kBAAkB,CACxB,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,IAAI,YAAY,EAAE;gBAC5B,YAAY,CAAC,KAAK,EAAE,CAAC;aACrB;SACD;IACF,CAAC;IAED,oCAAkB,GAAlB;QAAA,iBA2CC;QA1CA,IAAI,IAAI,CAAC,kBAAkB,EAAE,EAAE;YAC9B,qBAAqB;YACrB,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC/B;aAAM;YACN,qBAAqB;YACrB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;YAE9B,0CAA0C;YAC1C,IAAM,MAAI,GAAG,IAAI,CAAC;YAClB,IAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;YACtD,iBAAiB,CAAC,OAAO,CAAC,UAAC,QAAQ,EAAE,KAAK;gBACzC,IAAM,OAAO,GAAG,MAAM,CACrB,GAAG,GAAG,QAAQ,CAAC,EAAE,GAAG,KAAI,CAAC,kBAAkB,CAC3C,CAAC;gBACF,IAAI,OAAO,KAAK,IAAI,EAAE;oBACrB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE;wBACnB,8BAA8B;wBAC9B,QAAQ,CAAC,aAAa,EAAE,CAAC;wBAEzB,qBAAqB;wBACrB,MAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;oBAChC,CAAC,CAAC,CAAC;oBACH,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE;wBACnB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;4BAC1B,8BAA8B;4BAC9B,QAAQ,CAAC,aAAa,EAAE,CAAC;yBACzB;6BAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;4BACnC,8BAA8B;4BAC9B,MAAI,CAAC,8BAA8B,CAAC,KAAK,CAAC,CAAC;yBAC3C;6BAAM,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;4BACrC,0BAA0B;4BAC1B,MAAI,CAAC,0BAA0B,CAAC,KAAK,CAAC,CAAC;yBACvC;wBACD,yDAAyD;oBAC1D,CAAC,CAAC,CAAC;iBACH;YACF,CAAC,CAAC,CAAC;YAEH,kDAAkD;YAClD,MAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAAC,CAAC;SACpC;QACD,KAAK,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAED,qCAAmB,GAAnB;QAAA,iBAoCC;QAnCA,IAAM,iBAAiB,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACtD,4DAA4D;QAC5D,IAAI,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE;YACzD,OAAO,EAAE,CAAC;SACV;QAED,IAAI,gBAAgB,CAAC;QACrB,gBAAgB,GAAG,8OAEK,KAAK,CAAC,IAAI,6FAClB,IAAI,CAAC,aAAa,gBAAW,IAAI,CAAC,aAAa,WAAO,CAAC;QAEvE,6CAA6C;QAC7C,iBAAiB,CAAC,OAAO,CAAC,UAAC,QAAQ,EAAE,KAAK;YACzC,IAAM,eAAe,GAAG,mCAAmC,CAAC,MAAM,CACjE,QAAQ,CAAC,gBAAgB,EAAE;gBAC1B,CAAC,CAAC,8CAA8C,CAAC,+BAA+B;gBAChF,CAAC,CAAC,EAAE,CACL,CAAC;YACF,gBAAgB,IAAI,iBAAc,eAAe,kBAChD,KAAK,CAAC,SAAS,qHAGsB,KAAK,KAAK,CAAC,+CACxB,KAAK,mBAAY,QAAQ,CAAC,IAAI,4BAC/C,QAAQ,CAAC,EAAE,GAAG,KAAI,CAAC,kBAAkB,+FAExC,QAAQ,CAAC,IAAI,uDAGZ,CAAC;QACR,CAAC,CAAC,CAAC;QAEH,gBAAgB,IAAI,aAAa,CAAC;QAClC,OAAO,gBAAgB,CAAC;IACzB,CAAC;IAED,mCAAiB,GAAjB;QAAA,iBAiCC;QAhCA,IAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CACtC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,eAAe,CACf,CAAC;QACF,IAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CACjC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,EACvB,SAAS,EACT,UAAU,CACV,CAAC;QACF,IAAM,WAAW,GAAG,EAAE,CAAC;QACvB,QAAQ,CAAC,OAAO,CAAC,UAAC,OAAO;YACxB,IAAM,aAAa,GAAG,KAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAEhE,iCAAiC;YACjC,IAAI,aAAa,EAAE;gBAClB,aAAa,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChE,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;aAChC;QACF,CAAC,CAAC,CAAC;QAEH,IAAI,WAAW,CAAC,MAAM,IAAI,aAAa,EAAE;YACxC,OAAO;gBACN,UAAU,EAAE,WAAW;aACvB,CAAC;SACF;QAED,OAAO;YACN,uCAAuC;YACvC,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,GAAG,CAAC,CAAC;YACpD,oBAAoB,EAAE,WAAW;SACjC,CAAC;IACH,CAAC;IAED,sCAAoB,GAApB;QACS,IAAA,oEAAoB,CAA8B;QAC1D,IAAI,CAAC,CAAC,oBAAoB,EAAE;YAC3B,OAAO,oBAAoB,CAAC;SAC5B;aAAM;YACN,OAAO,EAAE,CAAC;SACV;IACF,CAAC;IAED,4CAA4C;IAC5C,yCAAuB,GAAvB;QAAA,iBASC;QARA,OAAO;YACN,EAAE,EAAE,uBAAuB;YAC3B,gBAAgB,EAAE,cAAM,OAAA,KAAK,EAAL,CAAK;YAC7B,cAAc,EAAE,0KAE6B;YAC7C,aAAa,EAAE,cAAM,OAAA,KAAI,CAAC,kBAAkB,EAAE,EAAzB,CAAyB;SAC9C,CAAC;IACH,CAAC;IAED,wCAAsB,GAAtB,UAAuB,WAAgC;QAAvD,iBAkDC;QAjDA,IAAM,gBAAgB,GACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE;YACrC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpC,IAAI,aAAa,CAAC;QAClB,QAAQ,WAAW,EAAE;YACpB,KAAK,mBAAmB,CAAC,OAAO;gBAC/B,IAAI,gBAAgB,EAAE;oBACrB,aAAa,GAAG;wBACf,EAAE,EAAE,gBAAgB;wBACpB,gBAAgB,EAAE;4BACjB,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE;wBAApC,CAAoC;wBACrC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC;wBACtD,aAAa,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,EAA3B,CAA2B;qBAChD,CAAC;iBACF;gBACD,MAAM;YACP,KAAK,mBAAmB,CAAC,QAAQ;gBAChC,IAAI,gBAAgB,EAAE;oBACrB,aAAa,GAAG;wBACf,EAAE,EAAE,iBAAiB;wBACrB,gBAAgB,EAAE;4BACjB,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE;wBAApC,CAAoC;wBACrC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC;wBACtD,aAAa,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,EAAE,EAA5B,CAA4B;qBACjD,CAAC;iBACF;gBACD,MAAM;YACP,KAAK,mBAAmB,CAAC,UAAU;gBAClC,IAAI,gBAAgB,EAAE;oBACrB,aAAa,GAAG;wBACf,EAAE,EAAE,mBAAmB;wBACvB,gBAAgB,EAAE;4BACjB,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE;wBAApC,CAAoC;wBACrC,cAAc,EAAE,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC;wBACtD,aAAa,EAAE;4BACd,OAAA,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE;wBAApC,CAAoC;qBACrC,CAAC;iBACF;gBACD,MAAM;YAEP,8CAA8C;YAE9C;gBACC,MAAM,KAAK,CACV,sCAAsC,GAAG,WAAW,CACpD,CAAC;SACH;QACD,OAAO,aAAa,CAAC;IACtB,CAAC;IAED,sCAAoB,GAApB,UAAqB,WAAgC;QACpD,QAAQ,WAAW,EAAE;YACpB,KAAK,mBAAmB,CAAC,OAAO;gBAC/B,OAAO,mQAC+I,CAAC;YACxJ,KAAK,mBAAmB,CAAC,QAAQ;gBAChC,OAAO,oNAC4I,CAAC;YACrJ,KAAK,mBAAmB,CAAC,UAAU;gBAClC,OAAO,iNAA+M,CAAC;YAExN,sBAAsB;YACtB,sCAAsC;YAEtC;gBACC,MAAM,KAAK,CACV,sCAAsC,GAAG,WAAW,CACpD,CAAC;SACH;IACF,CAAC;IACF,cAAC;AAAD,CAAC,AA5dD,CAA6B,SAAS,GA4drC","sourcesContent":["// Internal Imports\nimport { Component } from \"../component\";\nimport { Events, Roles, ToolbarControlTypes } from \"../../interfaces\";\nimport { Tools } from \"../../tools\";\nimport { DOMUtils } from \"../../services\";\nimport * as Configuration from \"../../configuration\";\n\n// D3 Imports\nimport { event, select } from \"d3-selection\";\n\n// import the settings for the css prefix\nimport settings from \"carbon-components/es/globals/js/settings\";\n\nexport class Toolbar extends Component {\n\ttype = \"toolbar\";\n\n\t// overflow menu button to control background color\n\toverflowButton: any;\n\n\t// ul options list element\n\toverflowMenu: any;\n\n\t// x, y coordinate of overflow menu\n\toverflowMenuX = 0;\n\toverflowMenuY = 0;\n\n\t// Use a random number to create overflow menu item unique ID\n\t// so they don't interfere the other overflow menu item in a page\n\toverflowMenuItemId = Math.floor(Math.random() * 99999999999);\n\n\tinit() {\n\t\tconst options = this.model.getOptions();\n\n\t\t// Grab the tooltip element\n\t\tconst holder = select(this.services.domUtils.getHolder());\n\t\tconst chartPrefix = Tools.getProperty(options, \"style\", \"prefix\");\n\n\t\tthis.overflowMenu = DOMUtils.appendOrSelect(\n\t\t\tholder,\n\t\t\t`div.${settings.prefix}--${chartPrefix}--overflowMenu`\n\t\t);\n\n\t\tthis.overflowMenu.style(\"max-width\", null);\n\n\t\t// listen to show overflow menu event to render the overflow menu\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Toolbar.SHOW_OVERFLOW_MENU,\n\t\t\t() => {\n\t\t\t\tthis.overflowMenu.html(this.getOverflowMenuHTML());\n\t\t\t}\n\t\t);\n\n\t\t// listen to hide overflow menu event to hide the overflow menu\n\t\tthis.services.events.addEventListener(\n\t\t\tEvents.Toolbar.HIDE_OVERFLOW_MENU,\n\t\t\t() => {\n\t\t\t\tthis.overflowMenu.html(null);\n\t\t\t}\n\t\t);\n\t\t// hide overflow menu if user clicks on somewhere in web page\n\t\tdocument.body.addEventListener(\"click\", () =>\n\t\t\tthis.updateOverflowMenu(false)\n\t\t);\n\t}\n\n\trender(animate = true) {\n\t\tconst isDataLoading = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"data\",\n\t\t\t\"loading\"\n\t\t);\n\n\t\t// size of toolbar button with background\n\t\tconst buttonSize = Configuration.toolbar.buttonSize;\n\t\tconst parentY = parseFloat(this.parent.node().getAttribute(\"y\"));\n\n\t\tconst svg = this.getContainerSVG();\n\n\t\t// TODO -- adjust toolbar Y position to align title component\n\t\t// before layout component supports vertical alignment center\n\t\tconst Y_OFFSET = -6;\n\t\tsvg.attr(\"transform\", `translate(0, ${parentY + Y_OFFSET})`);\n\n\t\tconst { width } = DOMUtils.getSVGElementSize(\n\t\t\tthis.services.domUtils.getMainSVG(),\n\t\t\t{\n\t\t\t\tuseAttrs: true\n\t\t\t}\n\t\t);\n\n\t\t// overflow menu width is 160px\n\t\t// it's set by Carbon component\n\t\tconst overflowMenuWidth = 160;\n\t\t// no good solution to get correct Toolbar position\n\t\t// parent x doesn't work well\n\t\t// assume the overflow icon has right alignment in layout\n\t\tthis.overflowMenuX = width - overflowMenuWidth;\n\t\tthis.overflowMenuY = parentY + Y_OFFSET + buttonSize;\n\t\tconst container = DOMUtils.appendOrSelect(svg, \"svg.toolbar-container\")\n\t\t\t.attr(\"width\", \"100%\")\n\t\t\t.attr(\"height\", Configuration.toolbar.height)\n\t\t\t.attr(\"opacity\", 1);\n\n\t\t// clean children first\n\t\tcontainer.html(null);\n\n\t\t// get the toolbar buttons\n\t\tconst { buttonList, overflowMenuItemList } = this.getControlConfigs();\n\n\t\t// overflow button is required only if overflow menu item list is valid\n\t\tif (!!overflowMenuItemList) {\n\t\t\tbuttonList.push(this.getOverflowButtonConfig());\n\t\t}\n\n\t\t// loading or empty state\n\t\tif (isDataLoading || buttonList.length === 0) {\n\t\t\t// put an empty rect to keep space unchanged\n\t\t\tDOMUtils.appendOrSelect(container, \"svg.toolbar-loading-spacer\")\n\t\t\t\t.append(\"rect\")\n\t\t\t\t.attr(\"height\", Configuration.toolbar.height)\n\t\t\t\t.attr(\"width\", buttonSize * 3) // value doesn't matter but can't be empty\n\t\t\t\t.attr(\"opacity\", 0);\n\t\t} else {\n\t\t\t// render toolbar buttons sequentially\n\t\t\tlet buttonXPosition = 0;\n\t\t\tbuttonList.forEach((button) => {\n\t\t\t\t// button container\n\t\t\t\tconst buttonContainer = DOMUtils.appendOrSelect(\n\t\t\t\t\tcontainer,\n\t\t\t\t\t`svg.${button.id}`\n\t\t\t\t).classed(\"toolbar-button\", true);\n\n\t\t\t\t// add button background rect\n\t\t\t\tconst buttonBackground = DOMUtils.appendOrSelect(\n\t\t\t\t\tbuttonContainer,\n\t\t\t\t\t\"rect.toolbar-button-background\"\n\t\t\t\t)\n\t\t\t\t\t.attr(\"x\", buttonXPosition)\n\t\t\t\t\t.attr(\"y\", 0)\n\t\t\t\t\t.attr(\"width\", buttonSize)\n\t\t\t\t\t.attr(\"height\", buttonSize);\n\n\t\t\t\tconst buttonIcon = DOMUtils.appendOrSelect(\n\t\t\t\t\tbuttonContainer,\n\t\t\t\t\t\"svg.toolbar-button-icon\"\n\t\t\t\t)\n\t\t\t\t\t.attr(\n\t\t\t\t\t\t\"x\",\n\t\t\t\t\t\tbuttonXPosition + Configuration.toolbar.iconPadding\n\t\t\t\t\t)\n\t\t\t\t\t.attr(\"y\", Configuration.toolbar.iconPadding)\n\t\t\t\t\t.attr(\"width\", Configuration.toolbar.iconSize)\n\t\t\t\t\t.attr(\"height\", Configuration.toolbar.iconSize)\n\t\t\t\t\t.attr(\"viewBox\", \"0 0 32 32\")\n\t\t\t\t\t.attr(\"role\", Roles.IMG);\n\n\t\t\t\tbuttonIcon.html(button.iconSVGContent);\n\t\t\t\tif (button.shouldBeDisabled()) {\n\t\t\t\t\tbuttonContainer\n\t\t\t\t\t\t.classed(\"toolbar-button--disabled\", true)\n\t\t\t\t\t\t.classed(\"toolbar-button--focusable\", false)\n\t\t\t\t\t\t.attr(\"tabindex\", -1)\n\t\t\t\t\t\t.attr(\"role\", null);\n\t\t\t\t\tbuttonIcon.classed(\"toolbar-button-icon--disabled\", true);\n\t\t\t\t\tbuttonBackground.classed(\n\t\t\t\t\t\t\"toolbar-button-background--disabled\",\n\t\t\t\t\t\ttrue\n\t\t\t\t\t);\n\t\t\t\t\tbuttonContainer.on(\"click\", null).on(\"keyup\", null);\n\t\t\t\t} else {\n\t\t\t\t\tbuttonContainer\n\t\t\t\t\t\t.classed(\"toolbar-button--disabled\", false)\n\t\t\t\t\t\t.classed(\"toolbar-button--focusable\", true)\n\t\t\t\t\t\t.attr(\"tabindex\", 0)\n\t\t\t\t\t\t.attr(\"role\", Roles.BUTTON);\n\t\t\t\t\tbuttonIcon.classed(\"toolbar-button-icon--disabled\", false);\n\t\t\t\t\tbuttonBackground.classed(\n\t\t\t\t\t\t\"toolbar-button-background--disabled\",\n\t\t\t\t\t\tfalse\n\t\t\t\t\t);\n\t\t\t\t\tbuttonContainer\n\t\t\t\t\t\t.on(\"click\", button.clickFunction)\n\t\t\t\t\t\t.on(\"keyup\", () => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t(event.key && event.key === \"Enter\") ||\n\t\t\t\t\t\t\t\tevent.key === \" \"\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\n\t\t\t\t\t\t\t\tbutton.clickFunction();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t\tbuttonXPosition += buttonSize;\n\t\t\t});\n\n\t\t\tthis.overflowButton = this.getContainerSVG().select(\n\t\t\t\t\"svg.toolbar-overflow-menu\"\n\t\t\t);\n\n\t\t\tif (this.isOverflowMenuOpen()) {\n\t\t\t\t// keep overflow menu displayed\n\t\t\t\tthis.updateOverflowMenu(true);\n\t\t\t}\n\t\t}\n\t}\n\n\tisOverflowMenuOpen() {\n\t\treturn (\n\t\t\tthis.overflowMenu\n\t\t\t\t.selectAll(\"ul.bx--overflow-menu-options--open\")\n\t\t\t\t.size() > 0\n\t\t);\n\t}\n\n\t// show/hide overflow menu\n\tupdateOverflowMenu(show: boolean) {\n\t\t// update overflow button background\n\t\tif (this.overflowButton) {\n\t\t\tthis.overflowButton.classed(\"toolbar-button--hovered\", show);\n\t\t}\n\t\tif (show) {\n\t\t\tthis.services.events.dispatchEvent(\n\t\t\t\tEvents.Toolbar.SHOW_OVERFLOW_MENU\n\t\t\t);\n\t\t} else {\n\t\t\tthis.services.events.dispatchEvent(\n\t\t\t\tEvents.Toolbar.HIDE_OVERFLOW_MENU\n\t\t\t);\n\t\t}\n\t}\n\n\tfocusOnPreviousEnabledMenuItem(currentItemIndex) {\n\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\tlet previousItemIndex = overflowMenuItems.length;\n\t\tfor (let i = currentItemIndex - 1; i >= 0; i--) {\n\t\t\tconst previousOverflowMenuItem = overflowMenuItems[i];\n\t\t\tif (!previousOverflowMenuItem.shouldBeDisabled()) {\n\t\t\t\tpreviousItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\t// only if previous enabled menu item found\n\t\tif (previousItemIndex < overflowMenuItems.length) {\n\t\t\tconst previousItemNode = select(\n\t\t\t\t\"#\" +\n\t\t\t\t\toverflowMenuItems[previousItemIndex].id +\n\t\t\t\t\tthis.overflowMenuItemId\n\t\t\t).node();\n\t\t\tif (\"focus\" in previousItemNode) {\n\t\t\t\tpreviousItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\tfocusOnNextEnabledMenuItem(currentItemIndex) {\n\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\tlet nextItemIndex = -1;\n\t\tfor (let i = currentItemIndex + 1; i < overflowMenuItems.length; i++) {\n\t\t\tconst nextOverflowMenuItem = overflowMenuItems[i];\n\t\t\tif (!nextOverflowMenuItem.shouldBeDisabled()) {\n\t\t\t\tnextItemIndex = i;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t\t// only if next enabled menu item found\n\t\tif (nextItemIndex > -1) {\n\t\t\tconst nextItemNode = select(\n\t\t\t\t\"#\" +\n\t\t\t\t\toverflowMenuItems[nextItemIndex].id +\n\t\t\t\t\tthis.overflowMenuItemId\n\t\t\t).node();\n\t\t\tif (\"focus\" in nextItemNode) {\n\t\t\t\tnextItemNode.focus();\n\t\t\t}\n\t\t}\n\t}\n\n\ttoggleOverflowMenu() {\n\t\tif (this.isOverflowMenuOpen()) {\n\t\t\t// hide overflow menu\n\t\t\tthis.updateOverflowMenu(false);\n\t\t} else {\n\t\t\t// show overflow menu\n\t\t\tthis.updateOverflowMenu(true);\n\n\t\t\t// setup overflow menu item event listener\n\t\t\tconst self = this;\n\t\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\t\toverflowMenuItems.forEach((menuItem, index) => {\n\t\t\t\tconst element = select(\n\t\t\t\t\t\"#\" + menuItem.id + this.overflowMenuItemId\n\t\t\t\t);\n\t\t\t\tif (element !== null) {\n\t\t\t\t\telement.on(\"click\", () => {\n\t\t\t\t\t\t// call the specified function\n\t\t\t\t\t\tmenuItem.clickFunction();\n\n\t\t\t\t\t\t// hide overflow menu\n\t\t\t\t\t\tself.updateOverflowMenu(false);\n\t\t\t\t\t});\n\t\t\t\t\telement.on(\"keyup\", () => {\n\t\t\t\t\t\tif (event.key === \"Enter\") {\n\t\t\t\t\t\t\t// call the specified function\n\t\t\t\t\t\t\tmenuItem.clickFunction();\n\t\t\t\t\t\t} else if (event.key === \"ArrowUp\") {\n\t\t\t\t\t\t\t// focus on previous menu item\n\t\t\t\t\t\t\tself.focusOnPreviousEnabledMenuItem(index);\n\t\t\t\t\t\t} else if (event.key === \"ArrowDown\") {\n\t\t\t\t\t\t\t// focus on next menu item\n\t\t\t\t\t\t\tself.focusOnNextEnabledMenuItem(index);\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// Not hide overflow menu by keyboard arrow up/down event\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t});\n\n\t\t\t// default to focus on the first enabled menu item\n\t\t\tself.focusOnNextEnabledMenuItem(-1);\n\t\t}\n\t\tevent.stopImmediatePropagation();\n\t}\n\n\tgetOverflowMenuHTML() {\n\t\tconst overflowMenuItems = this.getOverflowMenuItems();\n\t\t// don't render whole overflow menu if no overflow menu item\n\t\tif (!overflowMenuItems || overflowMenuItems.length === 0) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tlet overflowMenuHtml;\n\t\toverflowMenuHtml = `<div data-floating-menu-container=\"true\" data-floating-menu-direction=\"bottom\" role=\"main\">\n\t\t\t<ul class=\"bx--overflow-menu-options bx--overflow-menu--flip bx--overflow-menu-options--open\"\n\t\t\t\ttabindex=\"-1\" role=\"${Roles.MENU}\" aria-label=\"Menu\" data-floating-menu-direction=\"bottom\"\n\t\t\t\tstyle=\"left:${this.overflowMenuX}px; top:${this.overflowMenuY}px;\">`;\n\n\t\t// generate html for each overflow menu items\n\t\toverflowMenuItems.forEach((menuItem, index) => {\n\t\t\tconst menuItemClasses = \"bx--overflow-menu-options__option\".concat(\n\t\t\t\tmenuItem.shouldBeDisabled()\n\t\t\t\t\t? \" bx--overflow-menu-options__option--disabled\" // class for disabled menu item\n\t\t\t\t\t: \"\"\n\t\t\t);\n\t\t\toverflowMenuHtml += `<li class=\"${menuItemClasses}\" role=\"${\n\t\t\t\tRoles.MENU_ITEM\n\t\t\t}\">\n\t\t\t\t<button class=\"bx--overflow-menu-options__btn\"\n\t\t\t\t\tdata-floating-menu-primary-focus=\"${index === 0}\"\n\t\t\t\t\ttabindex=\"-1\" index=\"${index}\" title=\"${menuItem.text}\"\n\t\t\t\t\tid=\"${menuItem.id + this.overflowMenuItemId}\">\n\t\t\t\t\t<div class=\"bx--overflow-menu-options__option-content\">\n\t\t\t\t\t\t${menuItem.text}\n\t\t\t\t\t</div>\n\t\t\t\t</button>\n\t\t\t</li>`;\n\t\t});\n\n\t\toverflowMenuHtml += `</ul></div>`;\n\t\treturn overflowMenuHtml;\n\t}\n\n\tgetControlConfigs() {\n\t\tconst numberOfIcons = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"toolbar\",\n\t\t\t\"numberOfIcons\"\n\t\t);\n\t\tconst controls = Tools.getProperty(\n\t\t\tthis.model.getOptions(),\n\t\t\t\"toolbar\",\n\t\t\t\"controls\"\n\t\t);\n\t\tconst controlList = [];\n\t\tcontrols.forEach((control) => {\n\t\t\tconst controlConfig = this.getControlConfigByType(control.type);\n\n\t\t\t// add to list if config is valid\n\t\t\tif (controlConfig) {\n\t\t\t\tcontrolConfig.text = control.text ? control.text : control.type;\n\t\t\t\tcontrolList.push(controlConfig);\n\t\t\t}\n\t\t});\n\n\t\tif (controlList.length <= numberOfIcons) {\n\t\t\treturn {\n\t\t\t\tbuttonList: controlList\n\t\t\t};\n\t\t}\n\n\t\treturn {\n\t\t\t// leave one button for overflow button\n\t\t\tbuttonList: controlList.splice(0, numberOfIcons - 1),\n\t\t\toverflowMenuItemList: controlList\n\t\t};\n\t}\n\n\tgetOverflowMenuItems() {\n\t\tconst { overflowMenuItemList } = this.getControlConfigs();\n\t\tif (!!overflowMenuItemList) {\n\t\t\treturn overflowMenuItemList;\n\t\t} else {\n\t\t\treturn [];\n\t\t}\n\t}\n\n\t// special button config for overflow button\n\tgetOverflowButtonConfig() {\n\t\treturn {\n\t\t\tid: \"toolbar-overflow-menu\",\n\t\t\tshouldBeDisabled: () => false,\n\t\t\ticonSVGContent: `<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"24\" r=\"2\"></circle>`,\n\t\t\tclickFunction: () => this.toggleOverflowMenu()\n\t\t};\n\t}\n\n\tgetControlConfigByType(controlType: ToolbarControlTypes) {\n\t\tconst isZoomBarEnabled =\n\t\t\tthis.services.zoom.isZoomBarEnabled() &&\n\t\t\t!this.services.zoom.isEmptyState();\n\n\t\tlet controlConfig;\n\t\tswitch (controlType) {\n\t\t\tcase ToolbarControlTypes.ZOOM_IN:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: \"toolbar-zoomIn\",\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMinZoomDomain(),\n\t\t\t\t\t\ticonSVGContent: this.getControlIconByType(controlType),\n\t\t\t\t\t\tclickFunction: () => this.services.zoom.zoomIn()\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.ZOOM_OUT:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: \"toolbar-zoomOut\",\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMaxZoomDomain(),\n\t\t\t\t\t\ticonSVGContent: this.getControlIconByType(controlType),\n\t\t\t\t\t\tclickFunction: () => this.services.zoom.zoomOut()\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase ToolbarControlTypes.RESET_ZOOM:\n\t\t\t\tif (isZoomBarEnabled) {\n\t\t\t\t\tcontrolConfig = {\n\t\t\t\t\t\tid: \"toolbar-resetZoom\",\n\t\t\t\t\t\tshouldBeDisabled: () =>\n\t\t\t\t\t\t\tthis.services.zoom.isMaxZoomDomain(),\n\t\t\t\t\t\ticonSVGContent: this.getControlIconByType(controlType),\n\t\t\t\t\t\tclickFunction: () =>\n\t\t\t\t\t\t\tthis.services.zoom.resetZoomDomain()\n\t\t\t\t\t};\n\t\t\t\t}\n\t\t\t\tbreak;\n\n\t\t\t// add more toolbar control configuration here\n\n\t\t\tdefault:\n\t\t\t\tthrow Error(\n\t\t\t\t\t\"Not supported toolbar control type: \" + controlType\n\t\t\t\t);\n\t\t}\n\t\treturn controlConfig;\n\t}\n\n\tgetControlIconByType(controlType: ToolbarControlTypes) {\n\t\tswitch (controlType) {\n\t\t\tcase ToolbarControlTypes.ZOOM_IN:\n\t\t\t\treturn `<polygon points=\"19 13 15 13 15 9 13 9 13 13 9 13 9 15 13 15 13 19 15 19 15 15 19 15 19 13\"/>\n    \t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>`;\n\t\t\tcase ToolbarControlTypes.ZOOM_OUT:\n\t\t\t\treturn `<rect x=\"9\" y=\"13\" width=\"10\" height=\"2\"/>\n\t\t\t\t\t\t<path d=\"M22.45,21A10.87,10.87,0,0,0,25,14,11,11,0,1,0,14,25a10.87,10.87,0,0,0,7-2.55L28.59,30,30,28.59ZM14,23a9,9,0,1,1,9-9A9,9,0,0,1,14,23Z\"/>`;\n\t\t\tcase ToolbarControlTypes.RESET_ZOOM:\n\t\t\t\treturn `<path d=\"M22.4478,21A10.855,10.855,0,0,0,25,14,10.99,10.99,0,0,0,6,6.4658V2H4v8h8V8H7.332a8.9768,8.9768,0,1,1-2.1,8H3.1912A11.0118,11.0118,0,0,0,14,25a10.855,10.855,0,0,0,7-2.5522L28.5859,30,30,28.5859Z\"/>`;\n\n\t\t\t// add more icons here\n\t\t\t// svg icon must be with 32x32 viewBox\n\n\t\t\tdefault:\n\t\t\t\tthrow Error(\n\t\t\t\t\t\"Not supported toolbar control type: \" + controlType\n\t\t\t\t);\n\t\t}\n\t}\n}\n"]}

package/components/axes/zoom-bar.js

@@ -246,12 +246,14 @@ var ZoomBar = /** @class */ (function (_super) {
     };
     ZoomBar.prototype.updateBrushHandle = function (svg, selection, domain) {
         var self = this;
-        var handleWidth = 5;
+        var handleWidth = Configuration.zoomBar.handleWidth;
         var zoombarType = Tools.getProperty(this.model.getOptions(), "zoomBar", "top", "type");
         var handleHeight = Configuration.zoomBar.height[zoombarType];
         var handleXDiff = -handleWidth / 2;
-        var handleBarWidth = 1;
-        var handleBarHeight = zoombarType === ZoomBarTypes.GRAPH_VIEW ? 12 : 6;
+        var handleBarWidth = Configuration.zoomBar.handleBarWidth;
+        var handleBarHeight = zoombarType === ZoomBarTypes.GRAPH_VIEW
+            ? Configuration.zoomBar.handleBarHeight
+            : 6;
         var handleBarXDiff = -handleBarWidth / 2;
         var handleYBarDiff = (handleHeight - handleBarHeight) / 2;
         // handle