@watermarkinsights/ripple 5.11.0-2 → 5.11.0-4

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -262,15 +262,16 @@
   --wmcolor-taginput-maxtags-border: var(--wmcolor-input-border);
   --wmcolor-taginput-maxtags-text: var(--wmcolor-text);
   --wmcolor-taginput-option-background-hover: var(--wmcolor-option-background-hover);
+  --wmcolor-taginput-option-background-focus: var(--wmcolor-option-background-focus);
   --wmcolor-taginput-option-background: var(--wmcolor-option-background);
   --wmcolor-taginput-option-border: var(--wmcolor-option-border);
   --wmcolor-taginput-option-text-selected: var(--wmcolor-option-text-disabled);
   --wmcolor-taginput-option-text: var(--wmcolor-interactive);
   --wmcolor-taginput-row-background-hover: var(--wmcolor-interactive-background-hover);
+  --wmcolor-taginput-row-background-focus: var(--wmcolor-interactive-background-focus);
   --wmcolor-taginput-row-background-selected: var(--wmcolor-table-row-background-selected);
   --wmcolor-taginput-row-background-table: var(--wmcolor-table-row-background);
   --wmcolor-taginput-row-border-selected: var(--wmcolor-table-row-border-selected);
-  --wmcolor-taginput-tag-background-focus: var(--wmcolor-palelilacgray-dark); /* EXCEPTION */
   --wmcolor-taginput-tag-background-highlight: var(--wmcolor-interactive-background-highlight);
   --wmcolor-taginput-tag-background-locked: var(--wmcolor-interactive-disabled);
   --wmcolor-taginput-tag-background: var(--wmcolor-palelilacgray); /* EXCEPTION */
@@ -438,7 +439,7 @@
   padding: 0.5rem 1rem;
   color: var(--wmcolor-taginput-maxtags-text);
   font-size: 0.875rem;
-  border-top: 1px solid var(--wmcolor-taginput-maxtags-border);
+  border-block-start: 1px solid var(--wmcolor-taginput-maxtags-border);
   border-radius: 0 0 3px 3px;
 }
 :host .tag-area {
@@ -487,7 +488,7 @@
   height: 1.25rem;
   width: 1.25rem;
   padding: 0;
-  margin-left: 0.5rem;
+  margin-inline-start: 0.5rem;
 }
 :host .tag-area li .icon.remove-btn {
   border: 1px solid var(--wmcolor-taginput-tagbutton-border);
@@ -533,7 +534,7 @@
   height: 1.75rem;
   padding: 0;
   margin: 0;
-  right: 8px;
+  inset-inline-end: 8px;
 }
 :host .input:focus {
   outline: none;
@@ -564,8 +565,8 @@
   -ms-border-radius: 3px;
   border-radius: 3px;
   position: absolute;
-  top: calc(100% + 2px);
-  right: 0;
+  inset-block-start: calc(100% + 2px);
+  inset-inline-end: 0;
   z-index: 100;
   width: 100%;
   font-size: 0.875rem;
@@ -584,8 +585,8 @@
   transform: scale(1, 1);
 }
 :host .dropdown-wrapper.upwards {
-  top: unset;
-  bottom: calc(100% + 2px);
+  inset-block-start: unset;
+  inset-block-end: calc(100% + 2px);
   -ms-transform-origin: center bottom;
   -webkit-transform-origin: center bottom;
   -moz-transform-origin: center bottom;
@@ -619,34 +620,38 @@
   font-weight: normal;
   cursor: unset;
 }
-:host .dropdown-wrapper li.option:hover:not([aria-selected=true]), :host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]), :host .dropdown-wrapper li.add-new-btn.focused,
+:host .dropdown-wrapper li.option:hover:not([aria-selected=true]), :host .dropdown-wrapper li.add-new-btn:hover:not([aria-selected=true]),
 :host .dropdown-wrapper div.option:hover:not([aria-selected=true]),
+:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]) {
+  outline: none;
+  background: var(--wmcolor-taginput-option-background-hover);
+}
+:host .dropdown-wrapper li.option.focused, :host .dropdown-wrapper li.add-new-btn.focused,
 :host .dropdown-wrapper div.option.focused,
-:host .dropdown-wrapper div.add-new-btn:hover:not([aria-selected=true]),
 :host .dropdown-wrapper div.add-new-btn.focused {
   outline: none;
-  background: var(--wmcolor-taginput-option-background-hover);
+  background: var(--wmcolor-taginput-option-background-focus);
 }
 :host .dropdown-wrapper li.help-text,
 :host .dropdown-wrapper div.help-text {
   color: var(--wmcolor-taginput-help-text);
   height: auto;
   min-height: 2.6875rem;
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block-start: 0.25rem;
+  padding-block-end: 0.25rem;
   white-space: normal;
 }
 :host .dropdown-wrapper li:not(:last-child),
 :host .dropdown-wrapper div:not(:last-child) {
-  border-bottom: 2px solid var(--wmcolor-taginput-option-border);
+  border-block-end: 2px solid var(--wmcolor-taginput-option-border);
 }
 :host .info-text {
   font-style: italic;
-  margin-top: 0.25rem;
+  margin-block-start: 0.25rem;
 }
 :host .table-wrapper {
   overflow: auto;
-  margin-top: 1.5rem;
+  margin-block-start: 1.5rem;
 }
 :host .table-wrapper #table {
   width: 100%;
@@ -660,7 +665,7 @@
   background-color: var(--wmcolor-taginput-header-background-table);
 }
 :host .table-wrapper #table .headers th {
-  text-align: left;
+  text-align: start;
   font-size: 0.75rem;
   font-weight: 700;
   text-transform: uppercase;
@@ -674,7 +679,11 @@
   box-shadow: inset 0 0 0 1px var(--wmcolor-taginput-row-border-selected);
   font-weight: 500;
 }
-:host .table-wrapper tr.focused, :host .table-wrapper tr:hover:not(.locked) {
+:host .table-wrapper tr.focused {
+  background-color: var(--wmcolor-taginput-row-background-focus);
+  box-shadow: none;
+}
+:host .table-wrapper tr:hover:not(.locked) {
   background-color: var(--wmcolor-taginput-row-background-hover);
   box-shadow: none;
 }
@@ -690,7 +699,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\f33e";
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
   color: var(--wmcolor-taginput-tag-text);
 }
 :host .table-wrapper td {

package/dist/esm/{app-globals-9eb5f635.js → app-globals-e7c0199c.js}

@@ -1,6 +1,6 @@
 import './index-130e07bb.js';
 
-const version = "5.11.0-2";
+const version = "5.11.0-4";
 
 // PRINT RIPPLE VERSION IN CONSOLE
 // test envs return 0 for plugin.length

package/dist/esm/{chartFunctions-21d5a3d3.js → chartFunctions-c273c613.js}

@@ -343,6 +343,7 @@ async function getDetails(chartType) {
         }
         const sliceDetails = {
             amount: amount,
+            visualAmount: amount,
             perc: perc,
             legend: c.getAttribute("legend"),
             color: chartColors[colorIndex] || colors.gray,
@@ -453,10 +454,10 @@ function applyMinimumAngle(minimumAngle, slicesDetails, total) {
         // apply new amounts based on adjust angles
         let offsetAcc = 0;
         slicesDetails = slicesDetails.map((s, idx) => {
-            const newAmount = (adjustedAngles[idx] / 360) * total;
+            const visualAmount = (adjustedAngles[idx] / 360) * total;
             const newOffset = offsetAcc;
-            offsetAcc += newAmount;
-            return Object.assign(Object.assign({}, s), { amount: newAmount, offset: newOffset });
+            offsetAcc += visualAmount;
+            return Object.assign(Object.assign({}, s), { visualAmount: visualAmount, offset: newOffset });
         });
     }
     return slicesDetails;
@@ -467,12 +468,14 @@ function renderDoughnut(chartType) {
     // no sorting in progress indicators
     let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
     slicesDetails = applyMinimumAngle(7, slicesDetails, this.total);
+    let perc = amountToPercent(slicesDetails[0].amount, this.total, true);
+    perc = perc === 0 ? "<1%" : perc + "%";
     return (h("div", { class: "chart-wrapper doughnut-wrapper" },
         h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
             renderFilter(),
             slicesDetails.map((s) => renderPath.call(this, s, chartType)),
             renderFocusOutline.call(this),
-            isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, amountToPercent(slicesDetails[0].amount, this.total, true) + "%")) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+            isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
 }
 function highlightSegmentInfo(infoEls, s) {
     infoEls.forEach((el) => {
@@ -492,7 +495,7 @@ function removeSegmentInfoHighlight(infoEls) {
 function renderPath(s, chartType) {
     const percentageValue = amountToPercent(s.amount, this.total, true) + "%";
     return (!isNaN(s.amount) && (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
-        h("path", { id: s.id, class: "segment doughnut-segment", fill: s.amount ? s.color : "transparent", d: getPathData.call(this, s.amount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
+        h("path", { id: s.id, class: "segment doughnut-segment", fill: s.visualAmount ? s.color : "transparent", d: getPathData.call(this, s.visualAmount, s.offset, chartType), onClick: (ev) => handleSliceClick.call(this, ev, s), onFocus: (ev) => handleSliceFocus.call(this, ev, s), onKeyDown: (ev) => handleSliceKeyDown.call(this, ev), role: "img", "aria-label": `${s.legend}, ${percentageValue}`, "data-segmentindex": s.index }))));
 }
 function renderFocusOutline() {
     return this.isTabbing ? (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})` },
@@ -501,7 +504,7 @@ function renderFocusOutline() {
         h("use", { tabindex: -1, id: "kfbg2", xlinkHref: `#${this.focusedSliceId}` }))) : ("");
 }
 function renderDoughnutText(s) {
-    const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);
+    const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
     let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
     return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, `${s.perc > 0 ? s.perc : "<1"}%`));
 }

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-9eb5f635.js';
+import { g as globalScripts } from './app-globals-e7c0199c.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;

package/dist/esm/ripple.js

@@ -1,6 +1,6 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-130e07bb.js';
 export { s as setNonce } from './index-130e07bb.js';
-import { g as globalScripts } from './app-globals-9eb5f635.js';
+import { g as globalScripts } from './app-globals-e7c0199c.js';
 
 /*
  Stencil Client Patch Browser v4.21.0 | MIT Licensed | https://stenciljs.com