@watermarkinsights/ripple 5.16.0-alpha.0 → 5.16.0-alpha.10

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

@@ -3,22 +3,17 @@ import { debounce, generateId, intl } from "../../../global/functions";
 import { exitChart, getDetails, handleChartKeydown, renderStackedBar, renderCompletionMessage, renderDoughnut, renderInstructionsText, renderLegend, allChartsDetails, removeSegmentInfoHighlight, } from "../chartFunctions";
 export class ProgressIndicator {
     constructor() {
+        this.showLegend = true;
+        this.printMode = false;
+        this.printModeFormat = "amount";
+        this.isTabbing = false;
+        this.userIsNavigating = false;
         this.uid = generateId();
         // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions
         this.slicesDetails = [];
         this.debouncedUpdate = debounce(async () => {
             forceUpdate(this.el);
         }, 10);
-        this.label = undefined;
-        this.subinfo = undefined;
-        this.completionMessage = undefined;
-        this.showLegend = true;
-        this.printMode = false;
-        this.printModeFormat = "amount";
-        this.isTabbing = false;
-        this.mode = undefined;
-        this.userIsNavigating = false;
-        this.focusedSliceId = undefined;
     }
     get popoverEl() {
         return this.el.shadowRoot.querySelector("priv-chart-popover");
@@ -114,6 +109,7 @@ export class ProgressIndicator {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -126,11 +122,13 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "subinfo": {
                 "type": "string",
+                "attribute": "subinfo",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -143,11 +141,13 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "subinfo",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "completionMessage": {
                 "type": "string",
+                "attribute": "completion-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +160,13 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "completion-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showLegend": {
                 "type": "boolean",
+                "attribute": "show-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +179,14 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show-legend",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
             },
             "printMode": {
                 "type": "boolean",
+                "attribute": "print-mode",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -195,12 +199,14 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "print-mode",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "printModeFormat": {
                 "type": "string",
+                "attribute": "print-mode-format",
                 "mutable": false,
                 "complexType": {
                     "original": "\"amount\" | \"percentage\"",
@@ -213,7 +219,8 @@ export class ProgressIndicator {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "print-mode-format",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"amount\""
             }

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

@@ -6,9 +6,6 @@ export class ProgressMonitor {
         this.doughnutWidth = 300;
         this.modeInitialized = false;
         this.debouncedUpdate = debounce(() => forceUpdate(this.el), 50);
-        this.breakpoint = undefined;
-        this.groupLegend = undefined;
-        this.barLabelsWidth = undefined;
     }
     get parsedBreakpoint() {
         const asNumber = this.parseToNum(this.breakpoint || this.el.children.length);
@@ -78,6 +75,7 @@ export class ProgressMonitor {
         return {
             "breakpoint": {
                 "type": "any",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "number | string",
@@ -90,11 +88,13 @@ export class ProgressMonitor {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "breakpoint",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "groupLegend": {
                 "type": "string",
+                "attribute": "group-legend",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -107,11 +107,13 @@ export class ProgressMonitor {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "group-legend",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "barLabelsWidth": {
                 "type": "string",
+                "attribute": "bar-labels-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -124,7 +126,8 @@ export class ProgressMonitor {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "bar-labels-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -1,11 +1,4 @@
 export class ProgressSlice {
-    constructor() {
-        this.legend = undefined;
-        this.amount = undefined;
-        this.popoverTitle = undefined;
-        this.popoverText = undefined;
-        this.popoverButtonText = undefined;
-    }
     componentDidUpdate() {
         this.wmProgressSliceUpdated.emit();
     }
@@ -15,6 +8,7 @@ export class ProgressSlice {
         return {
             "legend": {
                 "type": "string",
+                "attribute": "legend",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -27,11 +21,13 @@ export class ProgressSlice {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "legend",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "amount": {
                 "type": "string",
+                "attribute": "amount",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -44,11 +40,13 @@ export class ProgressSlice {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "amount",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "popoverTitle": {
                 "type": "string",
+                "attribute": "popover-title",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -61,11 +59,13 @@ export class ProgressSlice {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "popover-title",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "popoverText": {
                 "type": "string",
+                "attribute": "popover-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -78,11 +78,13 @@ export class ProgressSlice {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "popover-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "popoverButtonText": {
                 "type": "string",
+                "attribute": "popover-button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,7 +97,8 @@ export class ProgressSlice {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "popover-button-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

package/dist/collection/components/datepickers/datepicker.css

@@ -847,37 +847,6 @@
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z'/%3E%3C/svg%3E%0A");
 }
 
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   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)
-   -------------------------------------- */
 :host * {
   box-sizing: border-box;
 }
@@ -923,21 +892,28 @@
   flex-direction: column;
   font-size: 0.875rem;
 }
+:host .wrapper .label-wrapper {
+  display: flex;
+}
 :host .wrapper .label {
-  display: block;
+  display: inline-block;
   line-height: normal;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-bottom: 0.25rem;
 }
-:host .wrapper .label .required {
+:host .wrapper .required {
+  display: inline-block;
   color: var(--wmcolor-text-required);
 }
 :host .wrapper.label-left {
   flex-direction: row;
 }
 :host .wrapper.label-left .label-wrapper {
-  line-height: 2.5rem;
+  height: fit-content;
+  margin-right: 0.75rem;
 }
 :host .wrapper.label-left .label-wrapper .label {
   display: flex;
@@ -945,7 +921,6 @@
   min-height: 2.5rem;
   white-space: normal;
   margin-bottom: 0;
-  margin-right: 0.75rem;
 }
 :host .wrapper.label-none label {
   position: absolute !important;
@@ -959,11 +934,11 @@
   white-space: nowrap !important;
   margin: -1px !important;
 }
-:host .wrapper.invalid .label {
+:host .wrapper.invalid .label-wrapper {
   color: var(--wmcolor-text-error);
   position: relative;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   content: "";
   display: block;
   background-color: var(--icon-fill, currentColor);
@@ -972,14 +947,14 @@
   -webkit-mask-size: 100%;
   mask-size: 100%;
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
   mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: var(--icon-fill, currentColor)' d='M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z'/%3E%3C/svg%3E%0A");
 }
-:host .wrapper.invalid .label:after {
+:host .wrapper.invalid .label-wrapper:after {
   display: inline-block;
   margin-inline-start: 0.25rem;
-  vertical-align: middle;
+  align-self: center;
   flex-shrink: 0;
   transform: translateY(-1px);
 }

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.js

@@ -3,6 +3,9 @@ import { intl, dateFind, getMonthLength, makeISO, calendar_months, weekdays } fr
 export class PrivCalendar {
     constructor() {
         this.today = this.dateToISO(new Date());
+        this.disabled = false;
+        this.view = "day";
+        this.focusDate = this.today; // ISO date
         this.calType = "single";
         this.calName = "";
         this.calInstructions = intl.formatMessage({
@@ -163,12 +166,6 @@ export class PrivCalendar {
                     this.handleDateClick(ev.target);
                 }, onMouseOver: () => this.cellHovered.emit(date), "data-month": dateFind.month.asString(date), "data-year": dateFind.year.asString(date), onBlur: (ev) => ev.stopPropagation(), tabIndex: isFocused ? 0 : -1 }, dayOfDate));
         };
-        this.disabled = false;
-        this.view = "day";
-        this.focusDate = this.today;
-        this.startDate = undefined;
-        this.endDate = undefined;
-        this.hoverDate = undefined;
     }
     setCalName() {
         const cals = this.el.parentElement.querySelectorAll("priv-calendar");
@@ -565,6 +562,7 @@ export class PrivCalendar {
         return {
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -577,12 +575,14 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "view": {
                 "type": "string",
+                "attribute": "view",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -595,12 +595,14 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "view",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"day\""
             },
             "focusDate": {
                 "type": "string",
+                "attribute": "focus-date",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -613,12 +615,14 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "focus-date",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "this.today"
             },
             "startDate": {
                 "type": "string",
+                "attribute": "start-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,11 +635,13 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "start-date",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "endDate": {
                 "type": "string",
+                "attribute": "end-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -648,11 +654,13 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "end-date",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "hoverDate": {
                 "type": "string",
+                "attribute": "hover-date",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -665,7 +673,8 @@ export class PrivCalendar {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "hover-date",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };