@watermarkinsights/ripple 5.30.0-alpha.2 → 5.30.0-alpha.4

package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.css

@@ -887,6 +887,37 @@
   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;
 }

package/dist/collection/components/wm-pagination/wm-pagination.css

@@ -887,6 +887,37 @@
   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,
 wm-pagination {
   display: block;

package/dist/collection/components/wm-search/wm-search.css

@@ -887,6 +887,37 @@
   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;
 }
@@ -903,6 +934,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  height: 2.5rem;
+}
+@media only screen and (max-width: 768px) {
+  :host .wm-search-wrapper {
+    height: 2.75rem;
+  }
 }
 :host .wm-search-wrapper .svg-search {
   --icon-size: 1.125rem;
@@ -911,7 +948,7 @@
 }
 :host .wm-search-wrapper input {
   border: none;
-  height: 40px;
+  align-self: stretch;
   padding: 0 1.75rem;
   background: var(--wmcolor-background);
   overflow: visible;

package/dist/collection/components/wm-snackbar/wm-snackbar.css

@@ -887,6 +887,37 @@
   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;
   margin: unset;

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

@@ -1021,6 +1021,7 @@
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
+  overflow: clip;
 }
 :host .field-wrapper.focused {
   outline: 2px solid var(--wmcolor-border-focus);
@@ -1062,7 +1063,7 @@
   --icon-size: 1.125rem;
   flex-shrink: 0;
   align-self: center;
-  margin: 0.75rem 0.5rem 0.75rem 0.75rem;
+  margin-inline: 0.75rem 0.5rem 0.75rem 0.75rem;
   color: var(--wmcolor-taginput-icon);
 }
 :host .lower-row {

package/dist/collection/components/wm-timepicker/wm-timepicker.css

@@ -887,6 +887,37 @@
   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;
 }

package/dist/collection/components/wm-uploader/wm-uploader.css

@@ -1587,6 +1587,37 @@
   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 {
   display: block;
   position: relative;

package/dist/esm/{app-globals-ed99915f.js → app-globals-672c8a7d.js}

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

package/dist/esm/loader.js

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

package/dist/esm/priv-calendar.entry.js

@@ -554,45 +554,17 @@ const PrivCalendar = class {
         // the start and end date, set in either of the calendars
         const eitherStart = this.startDate || (this.otherCalEl && this.otherCalEl.startDate);
         const eitherEnd = this.endDate || (this.otherCalEl && this.otherCalEl.endDate);
-        return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[0] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.su",
-            defaultMessage: "Su",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.mo",
-            defaultMessage: "Mo",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.tu",
-            defaultMessage: "Tu",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.we",
-            defaultMessage: "We",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.th",
-            defaultMessage: "Th",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.fr",
-            defaultMessage: "Fr",
-            description: "Abbreviated day of the week",
-        }))), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, h("span", { "aria-hidden": "true" }, intl.formatMessage({
-            id: "date.sa",
-            defaultMessage: "Sa",
-            description: "Abbreviated day of the week",
-        }))))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
+        return (h("div", { "aria-labelledby": "popup-title-month", role: "grid", class: "date-grid" }, h("div", { role: "rowgroup", class: "date-header" }, h("div", { role: "row", class: "header-row" }, h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[0] }, intl.formatMessage({ id: "date.su", defaultMessage: "Su", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[1] }, intl.formatMessage({ id: "date.mo", defaultMessage: "Mo", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[2] }, intl.formatMessage({ id: "date.tu", defaultMessage: "Tu", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[3] }, intl.formatMessage({ id: "date.we", defaultMessage: "We", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[4] }, intl.formatMessage({ id: "date.th", defaultMessage: "Th", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[5] }, intl.formatMessage({ id: "date.fr", defaultMessage: "Fr", description: "Abbreviated day of the week" })), h("div", { role: "columnheader", class: "header-cell", "aria-label": weekdays[6] }, intl.formatMessage({ id: "date.sa", defaultMessage: "Sa", description: "Abbreviated day of the week" })))), h("div", { role: "rowgroup" }, h("div", { role: "row", class: "date-row" }, dates.slice(0, 7).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(7, 14).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(14, 21).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(21, 28).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), h("div", { role: "row" }, dates.slice(28, 35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd))), dates.length > 35 ? (h("div", { role: "row" }, dates.slice(35).map((date) => this.renderCalendarDate(date, eitherStart, eitherEnd)))) : (""))));
     }
     renderMonthView() {
         return (h("div", { class: "month-view" }, h("div", { "aria-labelledby": "popup-title-year", role: "grid", class: "months" }, h("div", { role: "row", class: "month-row" }, calendar_months.slice(0, 3).map((month, index) => this.renderMonth(month, index))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(3, 6).map((month, index) => this.renderMonth(month, index + 3))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(6, 9).map((month, index) => this.renderMonth(month, index + 6))), h("div", { role: "row", class: "month-row" }, calendar_months.slice(9).map((month, index) => this.renderMonth(month, index + 9))))));
     }
     render() {
-        return (h(Host, { key: 'c0b7e492a324a4b252f216707574aafa33fbe21f', onMouseOut: (ev) => {
+        return (h(Host, { key: '13c2fb6cb68b7e3a35c76bc05dd266ba4525db1f', onMouseOut: (ev) => {
                 // @ts-ignore
                 if (!this.el.parentElement.contains(ev.toElement))
                     this.outOfCal.emit();
-            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '6be7c25039e7136a9877cf4270020fd02fe5569f', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '8ca29644aff6858d6eecf894bd6c3f9aef2c36ee', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: '9c47125d7d6c79a6002d1ef2f18156deae113272', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
+            }, role: "application", "aria-describedby": `application-${this.uid}` }, h("div", { key: '3faf7478450cdcfbd6aa61fee7b9f8e9d71a4dcb', class: `popup ${this.view}-view` }, this.renderHeader(), this.view === "day" ? this.renderDayView() : this.renderMonthView()), h("div", { key: '17e9cbb2b2ac43846a5eca6db7ef5ce5cb78bbf9', id: `application-${this.uid}`, class: "sr-only" }, this.calName, this.calInstructions), h("div", { key: '0d770c5bdb6c9b788a0ca3be07346d14bfc1a763', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.announcement)));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ripple.js

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