@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/esm/wm-datepicker.entry.js

@@ -1,167 +1,167 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7e11ea42.js';
-import { t as toBool, a as handleDisabledAttribute } from './functions-5afd09f4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f164fbca.js';
+import { t as toBool, a as handleDisabledAttribute } from './functions-d0e70094.js';
 
 const wmDatepickerCss = ":host{--wmcolor-datepicker-background:var(--wmcolor-background);--wmcolor-datepicker-day-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-day-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-day-text-outside:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-day-text-selected:var(--wmcolor-interactive-text-selected);--wmcolor-datepicker-day-text:var(--wmcolor-text);--wmcolor-datepicker-input-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-input-background:var(--wmcolor-input-background);--wmcolor-datepicker-input-border:var(--wmcolor-input-border);--wmcolor-datepicker-input-text-disabled:var(--wmcolor-input-text-disabled);--wmcolor-datepicker-input-text:var(--wmcolor-input-text);--wmcolor-datepicker-month-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-month-background-selected:var(--wmcolor-interactive);--wmcolor-datepicker-month-background:var(--wmcolor-text);--wmcolor-datepicker-month-border:var(--wmcolor-border-light);--wmcolor-datepicker-month-text-selected:var(--wmcolor-text-ondark);--wmcolor-datepicker-month-text:var(--wmcolor-interactive);--wmcolor-datepicker-navigation-background-hover:var(--wmcolor-button-background-navigational-hover);--wmcolor-datepicker-navigation-background:var(--wmcolor-button-background-navigational);--wmcolor-datepicker-navigation-text:var(--wmcolor-button-icon-navigational);--wmcolor-datepicker-selector-background:var(--wmcolor-button-background-secondary);--wmcolor-datepicker-selector-border:var(--wmcolor-button-border-secondary);--wmcolor-datepicker-selector-text:var(--wmcolor-button-text-secondary);--wmcolor-datepicker-toggle-background-disabled:var(--wmcolor-input-background-disabled);--wmcolor-datepicker-toggle-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-datepicker-toggle-background:var(--wmcolor-input-background);--wmcolor-datepicker-toggle-icon-disabled:var(--wmcolor-interactive-disabled);--wmcolor-datepicker-toggle-icon:var(--wmcolor-interactive);--wmcolor-datepicker-weekdays-background:var(--wmcolor-table-header-background);--wmcolor-datepicker-weekdays-text:var(--wmcolor-text);font-family:inherit}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}:host .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required{color:var(--wmcolor-text-required)}:host .wrapper.label-left{-ms-flex-direction:row;flex-direction:row}:host .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label{color:var(--wmcolor-text-error)}:host .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper{position:relative}:host .wrapper .inner-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.5rem;border:1px solid;border-color:var(--wmcolor-datepicker-input-border);-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;max-width:236px;-ms-flex-pack:justify;justify-content:space-between;position:relative}:host .wrapper .inner-wrapper .date-input{-moz-border-top-left-radius:3px;-webkit-border-top-left-radius:3px;border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-left-radius:3px;border:none;color:var(--wmcolor-datepicker-input-text);font-size:0.875rem;padding:0.625rem 0.9375rem 0.5rem;min-width:0;height:100%;-ms-flex:1;flex:1;margin:0;background-color:var(--wmcolor-datepicker-input-background)}:host .wrapper .inner-wrapper .date-input:disabled{background-color:var(--wmcolor-datepicker-input-background-disabled);color:var(--wmcolor-datepicker-input-text-disabled)}:host .wrapper .inner-wrapper .date-input:focus{outline:none}:host .wrapper.invalid .inner-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}:host .wrapper.invalid .error{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-top:0.25rem;margin-bottom:4px;top:100%;left:0}:host .wrapper.focus .inner-wrapper{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);box-shadow:0 0 0 1px var(--wmcolor-input-border-focus);outline:none;border-color:var(--wmcolor-input-border-focus)}:host .user-is-tabbing .toggle:focus:not(:active){border:none;z-index:11}";
 
 const DatePicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmDatepickerDateSelected = createEvent(this, "wmDatepickerDateSelected", 7);
-    this.wmDatepickerInputBlurred = createEvent(this, "wmDatepickerInputBlurred", 7);
-    this.value = "";
-    this.disabled = false;
-    this.dateFormat = "mm/dd/yyyy";
-    this.errorMessage = "";
-    this.labelPosition = "top";
-    this.label = "";
-    this.requiredField = false;
-    this.preselected = undefined;
-  }
-  get isDisabled() {
-    // string "false" needs to be treated as bool False because react wrappers convert bool to string.
-    return toBool(this.disabled);
-  }
-  get calendarDate() {
-    let calendarDate = new Date().toISOString();
-    const dateFormatUnits = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
-    if (this.preselected) {
-      calendarDate = this.preselected;
-    }
-    else if (this.value &&
-      dateFormatUnits[this.dateFormat] &&
-      this.isValidIsoInternal(this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value))) {
-      // if component has value, and value can be parsed to valid ISO
-      calendarDate = this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value);
-    }
-    return calendarDate;
-  }
-  handleTabbingOn() {
-    this.dpWrapper && this.dpWrapper.classList.add("user-is-tabbing");
-  }
-  handleTabbingOff() {
-    this.dpWrapper && this.dpWrapper.classList.remove("user-is-tabbing");
-  }
-  handleDisabledChange() {
-    handleDisabledAttribute(this.el, this.isDisabled);
-  }
-  updateValue() {
-    this.inputEl.value = this.value ? this.value : "";
-  }
-  handleInput(ev) {
-    // keep component's value in sync with input's value
-    this.value = ev.target.value;
-  }
-  handleInputBlur() {
-    this.dpWrapper.classList.remove("focus");
-    this.wmDatepickerInputBlurred.emit();
-  }
-  handleInputFocus() {
-    this.dpWrapper.classList.add("focus");
-  }
-  handleInputChange() {
-    // forward change externally
-    const event = new CustomEvent("change");
-    this.el.dispatchEvent(event);
-  }
-  handlePopupBlurred(ev) {
-    // emit blur event when leaving component from priv-datepicker
-    if (ev.detail.relatedTarget !== this.el) {
-      const event = new CustomEvent("blur");
-      // @ts-ignore
-      event.relatedTarget = ev.detail.relatedTarget;
-      this.el.dispatchEvent(event);
-    }
-  }
-  handleCellTriggered(ev) {
-    let dateElement = ev.detail;
-    let isoDate = dateElement.getAttribute("data-year") +
-      "-" +
-      dateElement.getAttribute("data-month") +
-      "-" +
-      dateElement.textContent;
-    this.wmDatepickerDateSelected.emit({ date: isoDate });
-    // Create events to trigger onInput and onChange on host element, to get the updated value
-    // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
-    const inputEvent = new CustomEvent("input");
-    this.el.dispatchEvent(inputEvent);
-    const changeEvent = new CustomEvent("change");
-    this.el.dispatchEvent(changeEvent);
-  }
-  async reformatDate(inputFormat, outputFormat, date) {
-    return this.reformatDateInternal(inputFormat, outputFormat, date);
-  }
-  reformatDateInternal(inputFormat, outputFormat, date) {
-    // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
-    // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
-    const parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
-    if (!date) {
-      return "";
-    }
-    else if (!parsableEntry.test(date)) {
-      return date;
-    }
-    else {
-      const dateArr = date.replace(/[\-\.]/gi, "/").split("/");
-      switch (outputFormat) {
-        case "US":
-          return dateArr[1].padStart(2, "0") + "/" + dateArr[2].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
-        case "INT":
-          return dateArr[2].padStart(2, "0") + "/" + dateArr[1].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
-        case "ISO":
-          if (inputFormat === "US") {
-            return dateArr[2].padStart(4, "20") + "-" + dateArr[0].padStart(2, "0") + "-" + dateArr[1].padStart(2, "0");
-          }
-          else if (inputFormat === "INT") {
-            return dateArr[2].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[0].padStart(2, "0");
-          }
-          else if (inputFormat === "ISO") {
-            return dateArr[0].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[2].padStart(2, "0");
-          }
-        default:
-          return dateArr.join("/");
-      }
-    }
-  }
-  async isValidIso(input) {
-    return this.isValidIsoInternal(input);
-  }
-  isValidIsoInternal(input) {
-    const isoFormat = /^\d\d\d\d[-]\d\d[-]\d\d$/;
-    if (!input || !isoFormat.test(input)) {
-      return false;
-    }
-    else {
-      // Parse the ISO date parts to integers
-      const parts = input.split("-");
-      const day = parseInt(parts[2], 10);
-      const month = parseInt(parts[1], 10);
-      const year = parseInt(parts[0], 10);
-      // Check the ranges of month and year
-      if (year < 1000 || year > 3000 || month == 0 || month > 12)
-        return false;
-      let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
-      // Adjust for leap years
-      if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
-        monthLength[1] = 29;
-      // Check the range of the day
-      return day > 0 && day <= monthLength[month - 1];
-    }
-  }
-  componentWillLoad() {
-    if (this.label === "") {
-      console.error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
-    }
-    handleDisabledAttribute(this.el, this.isDisabled);
-  }
-  render() {
-    return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { disabled: this.isDisabled, type: "text", id: "date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-controls": "popup", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("priv-datepicker", { disabled: this.isDisabled, date: new Date(this.calendarDate) })), h("div", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "disabled": ["handleDisabledChange"],
-    "value": ["updateValue"]
-  }; }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.wmDatepickerDateSelected = createEvent(this, "wmDatepickerDateSelected", 7);
+        this.wmDatepickerInputBlurred = createEvent(this, "wmDatepickerInputBlurred", 7);
+        this.value = "";
+        this.disabled = false;
+        this.dateFormat = "mm/dd/yyyy";
+        this.errorMessage = "";
+        this.labelPosition = "top";
+        this.label = "";
+        this.requiredField = false;
+        this.preselected = undefined;
+    }
+    get isDisabled() {
+        // string "false" needs to be treated as bool False because react wrappers convert bool to string.
+        return toBool(this.disabled);
+    }
+    get calendarDate() {
+        let calendarDate = new Date().toISOString();
+        const dateFormatUnits = { "mm/dd/yyyy": "US", "dd/mm/yyyy": "INT", "yyyy/mm/dd": "ISO" };
+        if (this.preselected) {
+            calendarDate = this.preselected;
+        }
+        else if (this.value &&
+            dateFormatUnits[this.dateFormat] &&
+            this.isValidIsoInternal(this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value))) {
+            // if component has value, and value can be parsed to valid ISO
+            calendarDate = this.reformatDateInternal(dateFormatUnits[this.dateFormat], "ISO", this.value);
+        }
+        return calendarDate;
+    }
+    handleTabbingOn() {
+        this.dpWrapper && this.dpWrapper.classList.add("user-is-tabbing");
+    }
+    handleTabbingOff() {
+        this.dpWrapper && this.dpWrapper.classList.remove("user-is-tabbing");
+    }
+    handleDisabledChange() {
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    updateValue() {
+        this.inputEl.value = this.value ? this.value : "";
+    }
+    handleInput(ev) {
+        // keep component's value in sync with input's value
+        this.value = ev.target.value;
+    }
+    handleInputBlur() {
+        this.dpWrapper.classList.remove("focus");
+        this.wmDatepickerInputBlurred.emit();
+    }
+    handleInputFocus() {
+        this.dpWrapper.classList.add("focus");
+    }
+    handleInputChange() {
+        // forward change externally
+        const event = new CustomEvent("change");
+        this.el.dispatchEvent(event);
+    }
+    handlePopupBlurred(ev) {
+        // emit blur event when leaving component from priv-datepicker
+        if (ev.detail.relatedTarget !== this.el) {
+            const event = new CustomEvent("blur");
+            // @ts-ignore
+            event.relatedTarget = ev.detail.relatedTarget;
+            this.el.dispatchEvent(event);
+        }
+    }
+    handleCellTriggered(ev) {
+        let dateElement = ev.detail;
+        let isoDate = dateElement.getAttribute("data-year") +
+            "-" +
+            dateElement.getAttribute("data-month") +
+            "-" +
+            dateElement.textContent;
+        this.wmDatepickerDateSelected.emit({ date: isoDate });
+        // Create events to trigger onInput and onChange on host element, to get the updated value
+        // Because there are more ways to input than just typing, we are firing this event upon cellTriggered
+        const inputEvent = new CustomEvent("input");
+        this.el.dispatchEvent(inputEvent);
+        const changeEvent = new CustomEvent("change");
+        this.el.dispatchEvent(changeEvent);
+    }
+    async reformatDate(inputFormat, outputFormat, date) {
+        return this.reformatDateInternal(inputFormat, outputFormat, date);
+    }
+    reformatDateInternal(inputFormat, outputFormat, date) {
+        // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.
+        // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits
+        const parsableEntry = /^(\d{1}|\d{2}|\d{4})[\-\.\/]\d{1,2}[\-\.\/](\d{1}|\d{2}|\d{4})$/;
+        if (!date) {
+            return "";
+        }
+        else if (!parsableEntry.test(date)) {
+            return date;
+        }
+        else {
+            const dateArr = date.replace(/[\-\.]/gi, "/").split("/");
+            switch (outputFormat) {
+                case "US":
+                    return dateArr[1].padStart(2, "0") + "/" + dateArr[2].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+                case "INT":
+                    return dateArr[2].padStart(2, "0") + "/" + dateArr[1].padStart(2, "0") + "/" + dateArr[0].padStart(4, "20");
+                case "ISO":
+                    if (inputFormat === "US") {
+                        return dateArr[2].padStart(4, "20") + "-" + dateArr[0].padStart(2, "0") + "-" + dateArr[1].padStart(2, "0");
+                    }
+                    else if (inputFormat === "INT") {
+                        return dateArr[2].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[0].padStart(2, "0");
+                    }
+                    else if (inputFormat === "ISO") {
+                        return dateArr[0].padStart(4, "20") + "-" + dateArr[1].padStart(2, "0") + "-" + dateArr[2].padStart(2, "0");
+                    }
+                default:
+                    return dateArr.join("/");
+            }
+        }
+    }
+    async isValidIso(input) {
+        return this.isValidIsoInternal(input);
+    }
+    isValidIsoInternal(input) {
+        const isoFormat = /^\d\d\d\d[-]\d\d[-]\d\d$/;
+        if (!input || !isoFormat.test(input)) {
+            return false;
+        }
+        else {
+            // Parse the ISO date parts to integers
+            const parts = input.split("-");
+            const day = parseInt(parts[2], 10);
+            const month = parseInt(parts[1], 10);
+            const year = parseInt(parts[0], 10);
+            // Check the ranges of month and year
+            if (year < 1000 || year > 3000 || month == 0 || month > 12)
+                return false;
+            let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+            // Adjust for leap years
+            if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0))
+                monthLength[1] = 29;
+            // Check the range of the day
+            return day > 0 && day <= monthLength[month - 1];
+        }
+    }
+    componentWillLoad() {
+        if (this.label === "") {
+            console.error("You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.");
+        }
+        handleDisabledAttribute(this.el, this.isDisabled);
+    }
+    render() {
+        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapper = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "inner-wrapper" }, h("input", { disabled: this.isDisabled, type: "text", id: "date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-controls": "popup", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("priv-datepicker", { disabled: this.isDisabled, date: new Date(this.calendarDate) })), h("div", { id: "error", class: "error", "aria-live": "assertive", "aria-atomic": "true" }, this.errorMessage)))));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["handleDisabledChange"],
+        "value": ["updateValue"]
+    }; }
 };
 DatePicker.style = wmDatepickerCss;
 

package/dist/esm/wm-file-list.entry.js

@@ -1,17 +1,17 @@
-import { r as registerInstance, h, g as getElement } from './index-7e11ea42.js';
+import { r as registerInstance, h, g as getElement } from './index-f164fbca.js';
 
 const wmFileListCss = ":host{display:block}.list-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0.5rem}";
 
 const FileList = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.showInfo = "time";
-  }
-  render() {
-    return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.showInfo = "time";
+    }
+    render() {
+        return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
+    }
+    static get delegatesFocus() { return true; }
+    get el() { return getElement(this); }
 };
 FileList.style = wmFileListCss;