@watermarkinsights/ripple 3.9.1 → 3.10.0-2

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.css

@@ -38,11 +38,6 @@
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
-/* VIA */
-:host,
-wm-progress-indicator {
-  /* KEYBOARD USERS */
-}
 :host .component-wrapper,
 wm-progress-indicator .component-wrapper {
   display: flex;
@@ -440,21 +435,17 @@ wm-progress-indicator .component-wrapper.left-label .label {
   display: flex;
   align-items: center;
 }
-:host :host(:focus),
-wm-progress-indicator :host(:focus) {
+
+:host(:focus) {
   outline: none;
 }
-:host :host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,
-wm-progress-indicator :host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,
-:host :host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper,
-wm-progress-indicator :host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper {
+:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper,
+:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper {
   -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
   -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
   box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;
 }
-:host :host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,
-wm-progress-indicator :host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,
-:host :host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner,
-wm-progress-indicator :host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner {
+:host(:focus) .component-wrapper.user-is-tabbing .bar-segments-wrapper::-moz-focus-inner,
+:host(:focus) .component-wrapper.user-is-tabbing .doughnut-wrapper::-moz-focus-inner {
   border: 0;
 }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-indicator.js

@@ -1,199 +1,201 @@
-import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from "@stencil/core";
-import { generateId, intl } from "../../../global/functions";
-import { handleChartKeydown, getData, renderBar, renderCompletionMessage, renderDoughnut, renderLegend, types, } from "../../../global/chartFunctions";
-export class ProgressIndicator {
-  constructor() {
-    this.showLegend = true;
-    this.isTabbing = false;
-    this.uid = generateId();
-    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
-    this.slicesData = [];
-    this.chartLabelMessage = intl.formatMessage({
-      id: "chart.interactiveChart",
-      defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
-    });
-  }
-  get popoverEl() {
-    return this.el.shadowRoot.querySelector("priv-chart-popover");
-  }
-  get sliceEls() {
-    const isBarType = this.mode === "bar";
-    const isDoughnutType = this.mode === "doughnut";
-    return isBarType
-      ? Array.from(this.el.shadowRoot.querySelectorAll(".bar-segment"))
-      : isDoughnutType
-        ? Array.from(this.el.shadowRoot.querySelectorAll(".doughnut-segment"))
-        : undefined;
-  }
-  get chartData() {
-    return this.mode ? types[this.mode] : undefined;
-  }
-  get ariaLabelText() {
-    let text = `${this.label}, ${this.chartLabelMessage}`;
-    if (this.subinfo) {
-      text += ` ${this.subinfo}`;
-    }
-    return text;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleKeydown(ev) {
-    handleChartKeydown.call(this, ev);
-  }
-  componentWillLoad() {
-    if (!this.label) {
-      console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
-    }
-    if (this.el.children.length !== 2) {
-      console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
-    }
-    // Listen to parent for initial mode, and future changes
-    this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
-  }
-  async handleSliceUpdate() {
-    await getData.call(this, this.mode);
-    forceUpdate(this.el);
-  }
-  handleModeUpdate() {
-    if (this.mode) {
-      getData.call(this, this.mode);
-    }
-  }
-  renderBarOrDoughnut() {
-    if (this.total > 0 && this.mode === "bar") {
-      return renderBar.call(this, this.mode);
-    }
-    else {
-      return renderDoughnut.call(this, this.mode);
-    }
-  }
-  render() {
-    return (h(Host, { role: "application", "aria-label": this.ariaLabelText, tabindex: "0" },
-      h("div", { class: `component-wrapper ${this.mode} ${this.isTabbing ? "user-is-tabbing" : ""}` },
-        h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` },
-          h("span", { class: "label-text" }, this.label),
-          this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""),
-        this.mode === "bar" ? renderLegend.call(this) : "",
-        this.mode && this.renderBarOrDoughnut(),
-        this.mode === "doughnut" ? renderLegend.call(this) : "",
-        h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }),
-        this.mode === "doughnut" ? renderCompletionMessage.call(this) : "")));
-  }
-  static get is() { return "wm-progress-indicator"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-progress-indicator.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-progress-indicator.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false
-    },
-    "subinfo": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "subinfo",
-      "reflect": false
-    },
-    "completionMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "completion-message",
-      "reflect": false
-    },
-    "showLegend": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-legend",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {},
-    "mode": {}
-  }; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "mode",
-      "methodName": "handleModeUpdate"
-    }]; }
-  static get listeners() { return [{
-      "name": "wmUserIsTabbing",
-      "method": "toggleTabbingOn",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmUserIsNotTabbing",
-      "method": "toggleTabbingOff",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "handleKeydown",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "wmProgressSliceUpdated",
-      "method": "handleSliceUpdate",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from "@stencil/core";
+import { generateId, intl } from "../../../global/functions";
+import { exitChart, getData, handleChartKeydown, renderBar, renderCompletionMessage, renderDoughnut, renderLegend, types, } from "../../../global/chartFunctions";
+export class ProgressIndicator {
+  constructor() {
+    this.showLegend = true;
+    this.isTabbing = false;
+    this.userIsNavigating = false;
+    this.uid = generateId();
+    // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
+    this.slicesData = [];
+    this.chartLabelMessage = intl.formatMessage({
+      id: "chart.interactiveChart",
+      defaultMessage: "Interactive chart. Use arrow keys to browse elements, press Tab to exit.",
+    });
+  }
+  get popoverEl() {
+    return this.el.shadowRoot.querySelector("priv-chart-popover");
+  }
+  get sliceEls() {
+    const isBarType = this.mode === "bar";
+    const isDoughnutType = this.mode === "doughnut";
+    return isBarType
+      ? Array.from(this.el.shadowRoot.querySelectorAll(".bar-segment"))
+      : isDoughnutType
+        ? Array.from(this.el.shadowRoot.querySelectorAll(".doughnut-segment"))
+        : undefined;
+  }
+  get chartData() {
+    return this.mode ? types[this.mode] : undefined;
+  }
+  get ariaLabelText() {
+    let text = `${this.label}, ${this.chartLabelMessage}`;
+    if (this.subinfo) {
+      text += ` ${this.subinfo}`;
+    }
+    return text;
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleKeydown(ev) {
+    handleChartKeydown.call(this, ev);
+  }
+  componentWillLoad() {
+    if (!this.label) {
+      console.error("For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.");
+    }
+    if (this.el.children.length !== 2) {
+      console.warn("wm-progress-indicator component must have 2 wm-progress-slice children.");
+    }
+    // Listen to parent for initial mode, and future changes
+    this.el.parentElement.addEventListener("wmProgressMonitorModeChange", (ev) => (this.mode = ev.detail));
+  }
+  async handleSliceUpdate() {
+    await getData.call(this, this.mode);
+    forceUpdate(this.el);
+  }
+  handleModeUpdate() {
+    if (this.mode) {
+      getData.call(this, this.mode);
+    }
+  }
+  renderBarOrDoughnut() {
+    if (this.total > 0 && this.mode === "bar") {
+      return renderBar.call(this, this.mode);
+    }
+    else {
+      return renderDoughnut.call(this, this.mode);
+    }
+  }
+  render() {
+    return (h(Host, { role: "application", "aria-label": this.ariaLabelText, tabindex: "0", onBlur: () => exitChart.call(this) },
+      h("div", { class: `component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? "user-is-tabbing" : ""}` },
+        h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `graphic-${this.uid}` },
+          h("span", { class: "label-text" }, this.label),
+          this.subinfo ? h("span", { class: "subinfo" }, this.subinfo) : ""),
+        this.mode === "bar" ? renderLegend.call(this) : "",
+        this.mode && this.renderBarOrDoughnut(),
+        this.mode === "doughnut" ? renderLegend.call(this) : "",
+        h("priv-chart-popover", { class: this.isTabbing ? "user-is-tabbing" : "" }),
+        this.mode === "doughnut" ? renderCompletionMessage.call(this) : "")));
+  }
+  static get is() { return "wm-progress-indicator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-progress-indicator.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-progress-indicator.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "subinfo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "subinfo",
+      "reflect": false
+    },
+    "completionMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "completion-message",
+      "reflect": false
+    },
+    "showLegend": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-legend",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "isTabbing": {},
+    "mode": {},
+    "userIsNavigating": {}
+  }; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "mode",
+      "methodName": "handleModeUpdate"
+    }]; }
+  static get listeners() { return [{
+      "name": "wmUserIsTabbing",
+      "method": "toggleTabbingOn",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmUserIsNotTabbing",
+      "method": "toggleTabbingOff",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "handleKeydown",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "wmProgressSliceUpdated",
+      "method": "handleSliceUpdate",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.css

@@ -38,7 +38,6 @@
 /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
 /* TODO: replace with vars above whenever possible */
 /* Buttons */
-/* VIA */
 :host,
 wm-progress-monitor {
   display: flex;

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js

@@ -1,88 +1,88 @@
-import { Component, h, Host, Element, Prop, Event, forceUpdate } from "@stencil/core";
-import { debounce } from "../../../global/functions";
-export class ProgressMonitor {
-  constructor() {
-    this.doughnutWidth = 300;
-    this.modeInitialized = false;
-    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
-  }
-  get parsedBreakpoint() {
-    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);
-    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
-    // e.g. 4 -> 1200px, while 768 -> 768 px
-    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
-    return asPixels;
-  }
-  get mode() {
-    return this.el.clientWidth > this.parsedBreakpoint ? "doughnut" : "bar";
-  }
-  componentWillLoad() {
-    // rerender on resize in case layout needs to change
-    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
-    resizeObserver.observe(this.el);
-  }
-  componentDidLoad() {
-    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
-    this.wmProgressMonitorModeChange.emit(this.mode);
-    this.modeInitialized = true;
-  }
-  componentWillUpdate() {
-    // store prevMode before every render except first to determine when it has changed
-    if (this.prevMode !== this.mode) {
-      this.wmProgressMonitorModeChange.emit(this.mode);
-    }
-    this.prevMode = this.mode;
-  }
-  parseToNum(num) {
-    const asString = num.toString();
-    const withoutPx = asString.replace("px", "");
-    return parseInt(withoutPx);
-  }
-  render() {
-    return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && h("slot", null)));
-  }
-  static get is() { return "wm-progress-monitor"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-progress-monitor.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-progress-monitor.css"]
-  }; }
-  static get properties() { return {
-    "breakpoint": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "number | string",
-        "resolved": "number | string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "breakpoint",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "wmProgressMonitorModeChange",
-      "name": "wmProgressMonitorModeChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-}
+import { Component, h, Host, Element, Prop, Event, forceUpdate } from "@stencil/core";
+import { debounce } from "../../../global/functions";
+export class ProgressMonitor {
+  constructor() {
+    this.doughnutWidth = 300;
+    this.modeInitialized = false;
+    this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
+  }
+  get parsedBreakpoint() {
+    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);
+    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
+    // e.g. 4 -> 1200px, while 768 -> 768 px
+    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
+    return asPixels;
+  }
+  get mode() {
+    return this.el.clientWidth > this.parsedBreakpoint ? "doughnut" : "bar";
+  }
+  componentWillLoad() {
+    // rerender on resize in case layout needs to change
+    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());
+    resizeObserver.observe(this.el);
+  }
+  componentDidLoad() {
+    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
+    this.wmProgressMonitorModeChange.emit(this.mode);
+    this.modeInitialized = true;
+  }
+  componentWillUpdate() {
+    // store prevMode before every render except first to determine when it has changed
+    if (this.prevMode !== this.mode) {
+      this.wmProgressMonitorModeChange.emit(this.mode);
+    }
+    this.prevMode = this.mode;
+  }
+  parseToNum(num) {
+    const asString = num.toString();
+    const withoutPx = asString.replace("px", "");
+    return parseInt(withoutPx);
+  }
+  render() {
+    return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && h("slot", null)));
+  }
+  static get is() { return "wm-progress-monitor"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["wm-progress-monitor.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["wm-progress-monitor.css"]
+  }; }
+  static get properties() { return {
+    "breakpoint": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "breakpoint",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "wmProgressMonitorModeChange",
+      "name": "wmProgressMonitorModeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+}