toggle-components-library 1.39.20-beta.1 → 1.39.20-beta.3

package/dist/toggle-components-library.common.js

@@ -51774,12 +51774,15 @@ var ToggleStatusBar_component = normalizeComponent(
 )
 
 /* harmony default export */ var ToggleStatusBar = (ToggleStatusBar_component.exports);
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3815b7f6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/percentagebar/TogglePercentageBar.vue?vue&type=template&id=6bdd0362&
-var TogglePercentageBarvue_type_template_id_6bdd0362_render = function render() {
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3815b7f6-vue-loader-template"}!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/percentagebar/TogglePercentageBar.vue?vue&type=template&id=75a2d4de&
+var TogglePercentageBarvue_type_template_id_75a2d4de_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', {
     staticClass: "toggle-percentage-bar",
+    class: {
+      'toggle-percentage-bar--static-segments': !_vm.animateSegments
+    },
     style: _vm.wrapperStyle
   }, [_vm.showLegend && _vm.legendItems.length ? _c('div', {
     staticClass: "toggle-percentage-bar__legend"
@@ -51817,22 +51820,22 @@ var TogglePercentageBarvue_type_template_id_6bdd0362_render = function render()
     style: {
       width: _vm.fillWidthPercent + '%'
     }
-  }, _vm._l(_vm.visibleDisplayRows, function (row) {
+  }, _vm._l(_vm.visibleDisplayRows, function (row, visibleIndex) {
     return _c('div', {
       key: row.segmentIndex,
       staticClass: "toggle-percentage-bar__segment",
       class: {
         'toggle-percentage-bar__segment--hoverable': _vm.showSegmentPercentOnHover
       },
-      style: _vm.segmentStyle(row)
+      style: _vm.segmentStyle(row, visibleIndex)
     }, [_vm.showSegmentPercentOnHover ? _c('span', {
       staticClass: "toggle-percentage-bar__segment-tip"
     }, [_vm._v(_vm._s(row.hoverText))]) : _vm._e()]);
   }), 0) : _vm._e()])])]);
 };
-var TogglePercentageBarvue_type_template_id_6bdd0362_staticRenderFns = [];
+var TogglePercentageBarvue_type_template_id_75a2d4de_staticRenderFns = [];
 
-// CONCATENATED MODULE: ./src/components/percentagebar/TogglePercentageBar.vue?vue&type=template&id=6bdd0362&
+// CONCATENATED MODULE: ./src/components/percentagebar/TogglePercentageBar.vue?vue&type=template&id=75a2d4de&
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
 var es_array_reduce = __webpack_require__("13d5");
@@ -51883,6 +51886,10 @@ function segmentValue(entry) {
     trackBackgroundColor: {
       type: String,
       default: undefined
+    },
+    animateSegments: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -51990,11 +51997,15 @@ function segmentValue(entry) {
       }
       return DEFAULT_SEGMENT_COLOURS[index % DEFAULT_SEGMENT_COLOURS.length];
     },
-    segmentStyle(row) {
-      return {
+    segmentStyle(row, visibleIndex) {
+      const style = {
         flex: `${row.widthPercent} 1 0%`,
         backgroundColor: row.colour
       };
+      if (this.animateSegments) {
+        style['--toggle-pct-bar-segment-delay'] = `${visibleIndex * 55}ms`;
+      }
+      return style;
     },
     formatSegmentBarPercent(widthPercent) {
       if (widthPercent <= 0) {
@@ -52027,8 +52038,8 @@ function segmentValue(entry) {
 
 var TogglePercentageBar_component = normalizeComponent(
   percentagebar_TogglePercentageBarvue_type_script_lang_js_,
-  TogglePercentageBarvue_type_template_id_6bdd0362_render,
-  TogglePercentageBarvue_type_template_id_6bdd0362_staticRenderFns,
+  TogglePercentageBarvue_type_template_id_75a2d4de_render,
+  TogglePercentageBarvue_type_template_id_75a2d4de_staticRenderFns,
   false,
   null,
   null,