@watermarkinsights/ripple 3.8.2 → 3.9.0-2

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

@@ -0,0 +1,53 @@
+/* --------------------------------------
+   1. Box-shadow
+   -------------------------------------- */
+/* --------------------------------------
+   2. Border-radius
+   -------------------------------------- */
+/* --------------------------------------
+   3. Transforms
+   -------------------------------------- */
+/* --------------------------------------
+   4. Button Focus
+   -------------------------------------- */
+/* --------------------------------------
+   5. Flex
+   -------------------------------------- */
+/* --------------------------------------
+   6. Button Hover
+   -------------------------------------- */
+/* --------------------------------------
+   7. Screen Reader Only
+   -------------------------------------- */
+/* --------------------------------------
+   8. Label styles
+   this mixin includes all the styles for the label
+   + flex rules on the parent container to switch between top and left position
+   + srOnly when label is hidden
+   Assumes the following markup:
+   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
+   .wrapper is for the flex rules
+   .label-wrapper is to set the height of the label when positioned left so it's the same height as
+   the input. It can't be done directly on .label because of possible line wrapping.
+   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
+   (they can't be aligned on the baseline because of possible description text and error message)
+   -------------------------------------- */
+/********************************************************************************************/
+/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
+/********************************************************************************************/
+/* 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;
+}
+
+:host(.row) {
+  flex-direction: row;
+}
+
+:host(.column) {
+  flex-direction: column;
+}

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

@@ -0,0 +1,95 @@
+import { Component, h, Host, Element, Prop, Event, forceUpdate, Listen } from "@stencil/core";
+import { throttle } from "../../../global/functions";
+export class ProgressMonitor {
+  constructor() {
+    this.doughnutWidth = 300;
+    this.modeInitialized = false;
+    this.throttledUpdate = throttle(() => 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";
+  }
+  componentDidLoad() {
+    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed
+    this.wmProgressMonitorModeChange.emit(this.mode);
+    this.modeInitialized = true;
+    // once indicators have initialized modes, rerender to reveal
+    forceUpdate(this.el);
+  }
+  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;
+  }
+  handleResize() {
+    this.throttledUpdate();
+  }
+  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"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,111 @@
+import { Component, Prop, Event } from "@stencil/core";
+export class ProgressSlice {
+  componentDidUpdate() {
+    this.wmProgressSliceUpdated.emit();
+  }
+  static get is() { return "wm-progress-slice"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "legend": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "legend",
+      "reflect": false
+    },
+    "amount": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "amount",
+      "reflect": false
+    },
+    "popoverTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-title",
+      "reflect": false
+    },
+    "popoverText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-text",
+      "reflect": false
+    },
+    "popoverButtonText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "popover-button-text",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "wmProgressSliceUpdated",
+      "name": "wmProgressSliceUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}