@carbon/charts-vue 0.53.3 → 0.53.4

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.4](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.3...v0.53.4) (2021-12-13)
+
+**Note:** Version bump only for package @carbon/charts-vue
+
+
+
+
+
 ## [0.53.3](https://github.com/carbon-design-system/carbon-charts/compare/v0.53.2...v0.53.3) (2021-12-07)
 
 **Note:** Version bump only for package @carbon/charts-vue

package/charts-vue.common.js

@@ -441,6 +441,7 @@ var events_Toolbar;
 (function (Toolbar) {
     Toolbar["SHOW_OVERFLOW_MENU"] = "show-toolbar-overflow-menu";
     Toolbar["HIDE_OVERFLOW_MENU"] = "hide-toolbar-overflow-menu";
+    Toolbar["BUTTON_CLICK"] = "toolbar-button-click";
 })(events_Toolbar || (events_Toolbar = {}));
 /**
  * enum of all events related to the zoom-bar
@@ -884,6 +885,7 @@ var ToolbarControlTypes;
     ToolbarControlTypes["RESET_ZOOM"] = "Reset zoom";
     ToolbarControlTypes["MAKE_FULLSCREEN"] = "Make fullscreen";
     ToolbarControlTypes["SHOW_AS_DATATABLE"] = "Show as data-table";
+    ToolbarControlTypes["CUSTOM"] = "Custom";
 })(ToolbarControlTypes || (ToolbarControlTypes = {}));
 /**
  * enum of title orientations for _vertical axes_
@@ -38635,23 +38637,26 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             var self_1 = this;
             var allToolbarControls = enteringToolbarControls
                 .merge(toolbarControls)
-                .classed('disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
-                .attr('aria-disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
+                .classed('disabled', function (d) { return d.shouldBeDisabled(); })
+                .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
                 .attr('aria-label', function (d) { return d.title; })
-                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconWidth !== undefined ? d.iconWidth : '20px') + "; height: " + (d.iconWidth !== undefined ? d.iconHeight : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVGContent + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
+                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
+                ? d.iconSVG.height
+                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVG.content + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
                 .each(function (d, index) {
+                var _this = this;
                 src_select(this)
                     .select('button')
-                    .on('click', !d.shouldBeDisabled() ? d.clickFunction : null)
+                    .on('click', function (event) {
+                    if (!d.shouldBeDisabled()) {
+                        self_1.triggerFunctionAndEvent(d, event, _this);
+                    }
+                })
                     .on('keydown', function (event) {
                     if ((event.key && event.key === 'Enter') ||
                         event.key === ' ') {
                         event.preventDefault();
-                        d.clickFunction();
+                        self_1.triggerFunctionAndEvent(d, event, _this);
                     }
                     else if (event.key && event.key === 'ArrowLeft') {
                         self_1.focusOnPreviousEnabledToolbarItem(index);
@@ -38805,15 +38810,13 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 var element = src_select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
                 if (element !== null) {
                     element.on('click', function () {
-                        // call the specified function
-                        menuItem.clickFunction();
+                        self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         // hide overflow menu
                         self_2.updateOverflowMenu(false);
                     });
                     element.on('keydown', function (keyEvent) {
                         if (keyEvent && keyEvent.key === 'Enter') {
-                            // call the specified function
-                            menuItem.clickFunction();
+                            self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         }
                         else if (keyEvent && keyEvent.key === 'ArrowUp') {
                             // focus on previous menu item
@@ -38840,35 +38843,75 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             event.stopImmediatePropagation();
         }
     };
+    // Calls passed function && dispatches event
+    Toolbar.prototype.triggerFunctionAndEvent = function (control, event, element) {
+        // Call custom function only if it exists
+        if (typeof control.clickFunction === 'function') {
+            control.clickFunction(event);
+        }
+        // Dispatch selection event
+        this.services.events.dispatchEvent(Events.Toolbar.BUTTON_CLICK, {
+            control: control,
+            event: event,
+            element: element,
+        });
+    };
     Toolbar.prototype.getControlConfigs = function () {
         var _this = this;
-        var numberOfIcons = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons');
+        var numberOfIcons = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') -
+            1;
         var controls = tools_Tools.getProperty(this.getOptions(), 'toolbar', 'controls');
-        var controlList = [];
         var overflowSpecificControls = [];
+        var buttonList = [];
+        var overflowList = [];
         controls.forEach(function (control) {
-            var controlConfig = _this.getControlConfigByType(control.type);
+            var controlConfig = null;
+            // check if button is custom or default control
+            if (control.type === ToolbarControlTypes.CUSTOM) {
+                // add generic id if missing
+                if (tools_Tools.getProperty(control, 'id') === null) {
+                    // add id directly to the data passed so that id isn't reassigned on rerender
+                    control.id = "toolbar-button-" + Toolbar.buttonID++;
+                }
+                // define function if missing
+                if (tools_Tools.getProperty(control, 'shouldBeDisabled') === null) {
+                    control.shouldBeDisabled = function () { return false; };
+                }
+                controlConfig = control;
+            }
+            else {
+                controlConfig = _this.getControlConfigByType(control.type);
+            }
             // add to list if config is valid
             if (controlConfig) {
                 controlConfig.text = control.text ? control.text : control.type;
                 if (controlConfig.id.indexOf('toolbar-export') !== -1) {
                     overflowSpecificControls.push(controlConfig);
                 }
+                else if (buttonList.length < numberOfIcons) {
+                    // check if icon exists else assign to the overflow list
+                    if (tools_Tools.getProperty(controlConfig, 'iconSVG', 'content') === null) {
+                        overflowList.push(controlConfig);
+                    }
+                    else {
+                        buttonList.push(controlConfig);
+                    }
+                }
                 else {
-                    controlList.push(controlConfig);
+                    overflowList.push(controlConfig);
                 }
             }
         });
-        if (controlList.length <= numberOfIcons &&
-            overflowSpecificControls.length === 0) {
+        // Ensures the `export` controls are always at the bottom
+        overflowList.push.apply(overflowList, overflowSpecificControls);
+        if (!overflowList.length) {
             return {
-                buttonList: controlList,
+                buttonList: buttonList,
             };
         }
         return {
-            // leave one button for overflow button
-            buttonList: controlList.splice(0, numberOfIcons - 1),
-            overflowMenuItemList: controlList.concat(overflowSpecificControls),
+            buttonList: buttonList,
+            overflowMenuItemList: overflowList,
         };
     };
     Toolbar.prototype.getToolbarButtonItems = function () {
@@ -38897,7 +38940,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             id: 'toolbar-overflow-menu',
             title: 'More options',
             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>",
+            iconSVG: {
+                content: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            },
             clickFunction: function (event) { return _this.toggleOverflowMenu(event); },
         };
     };
@@ -38917,7 +38962,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMinZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomIn(); },
                     };
                 }
@@ -38930,7 +38977,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomOut(); },
                     };
                 }
@@ -38943,7 +38992,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () {
                             return _this.services.zoom.resetZoomDomain();
                         },
@@ -38953,10 +39004,12 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.MAKE_FULLSCREEN:
                 controlConfig = {
                     id: 'toolbar-makefullscreen',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                        width: '15px',
+                        height: '15px',
+                    },
                     title: 'Make fullscreen',
-                    iconSVGContent: this.getControlIconByType(controlType),
-                    iconWidth: '15px',
-                    iconHight: '15px',
                     shouldBeDisabled: function () { return false; },
                     clickFunction: function () {
                         _this.services.domUtils.toggleFullscreen();
@@ -38966,8 +39019,10 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.SHOW_AS_DATATABLE:
                 controlConfig = {
                     id: 'toolbar-showasdatatable',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     title: 'Show as table',
-                    iconSVGContent: this.getControlIconByType(controlType),
                     shouldBeDisabled: function () { return displayData.length === 0; },
                     clickFunction: function () {
                         return _this.services.events.dispatchEvent(Events.Modal.SHOW);
@@ -38979,7 +39034,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-CSV',
                     title: 'Export as CSV',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.model.exportToCSV(); },
                 };
                 break;
@@ -38988,7 +39045,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-PNG',
                     title: 'Export as PNG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToPNG(); },
                 };
                 break;
@@ -38997,7 +39056,9 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-JPG',
                     title: 'Export as JPG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToJPG(); },
                 };
                 break;
@@ -39030,6 +39091,7 @@ var toolbar_Toolbar = /** @class */ (function (_super) {
                 throw Error('Not supported toolbar control type: ' + controlType);
         }
     };
+    Toolbar.buttonID = 0;
     return Toolbar;
 }(component_Component));