@watermarkinsights/ripple 3.1.0-3 → 3.1.0-7

package/dist/cjs/wm-modal-footer.cjs.entry.js

@@ -33,7 +33,7 @@ const ModalFooter = class {
     parentModal.emitSecondaryEvent();
   }
   render() {
-    return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.h("wm-button", { buttonStyle: this.deleteStyle ? "secondary" : "primary", permanentlyDelete: this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+    return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.h("wm-button", { buttonType: this.deleteStyle ? "secondary" : "primary", permanentlyDelete: this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-modal-header.cjs.entry.js

@@ -36,7 +36,7 @@ const ModalHeader = class {
   //   this.headingElement.focus();
   // }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-style": "navigational", icon: "f156", tooltip: this.closeTooltipMessage, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: this.closeTooltipMessage, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-network-uploader.cjs.entry.js

@@ -409,7 +409,7 @@ const NetworkUploader = class {
     })));
   }
   renderFile(item) {
-    return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.file_name), index.h("span", { class: "filedate" }, this.formatDate(item.updated_at, functions.intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-style": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }), index.h("wm-button", { class: "delete-button", "button-style": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
+    return (index.h("li", null, index.h("div", { class: "file --saved" }, index.h("div", { class: "file-info" }, index.h("span", { class: "filename" }, item.file_name), index.h("span", { class: "filedate" }, this.formatDate(item.updated_at, functions.intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))), index.h("div", { class: "file-controls" }, index.h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }), index.h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
   }
   renderFileList() {
     return index.h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));

package/dist/cjs/wm-search.cjs.entry.js

@@ -196,14 +196,14 @@ const Search = class {
    * Functions that return elements specifically for search-and-find.
    */
   renderResultsAndBrowseButtons() {
-    return (index.h("div", { class: "wm-find-elements" }, index.h("div", { id: "results-display", class: "results" }, this.getResultsMessage()), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-style": "icononly", icon: "f05d", tooltip: functions.intl.formatMessage({
+    return (index.h("div", { class: "wm-find-elements" }, index.h("div", { id: "results-display", class: "results" }, this.getResultsMessage()), index.h("div", { class: "wm-button-collection" }, index.h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: functions.intl.formatMessage({
         id: "global.previous",
         description: "button text",
         defaultMessage: "previous",
       }), "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.disabled || this.numResults < 2, "label-for-identical-buttons": functions.intl.formatMessage({
         id: "search.previousResult",
         defaultMessage: "Press to hear previous matching result",
-      }) }), index.h("wm-button", { "button-style": "icononly", icon: "f045", tooltip: functions.intl.formatMessage({
+      }) }), index.h("wm-button", { "button-type": "icononly", icon: "f045", tooltip: functions.intl.formatMessage({
         id: "global.next",
         description: "button text",
         defaultMessage: "next",

package/dist/cjs/wm-select.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ded52be4.js');
-const functions = require('./functions-ac902a4f.js');
+const functions = require('./functions-cc566e1c.js');
 
 const wmSelectCss = "@charset \"UTF-8\";:host{position:relative;display:block;box-sizing:border-box;font-family:inherit}:host .sr-only{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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:flex;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:#c0392b}.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:\"\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .dropdown{position:relative;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .dropdown .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:flex;align-items:center;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .dropdown .displayedoption{height:2.75rem}}.wrapper .dropdown .displayedoption:before{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:\"\";position:absolute;right:0.5625rem;pointer-events:none}.wrapper .dropdown .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .dropdown .displayedoption:active{-ms-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .dropdown .displayedoption:focus{outline:none}.wrapper .dropdown .displayedoption::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption.user-is-tabbing:focus{-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}.wrapper .dropdown .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex:1}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo{display:flex}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .button-text{flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .subinfo{flex:none;font-style:italic}.wrapper .dropdown .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .dropdown>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .dropdown>.options{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .dropdown>.options.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .dropdown>.options.hidden{visibility:hidden}.wrapper .dropdown>.options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .dropdown .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;display:block;top:100%;left:0;font-style:italic}.rtl>.options{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.options .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}";
 

package/dist/cjs/wm-tab-list.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ded52be4.js');
-const functions = require('./functions-ac902a4f.js');
+const functions = require('./functions-cc566e1c.js');
 
 const wmTabListCss = ":host,wm-tab-list{position:relative;white-space:nowrap;height:100%;display:block}:host *,wm-tab-list *{box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:flex;flex-direction:row;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";
 

package/dist/cjs/wm-tab-panel.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ded52be4.js');
-const functions = require('./functions-ac902a4f.js');
+const functions = require('./functions-cc566e1c.js');
 
 const wmTabPanelCss = "wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";
 

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

@@ -501,72 +501,4 @@ wm-button .sr-only {
   clip-path: inset(50%) !important;
   white-space: nowrap !important;
   margin: -1px !important;
-}
-:host .tooltip,
-wm-button .tooltip {
-  position: absolute;
-  overflow: hidden;
-  pointer-events: none;
-  line-height: normal;
-  font-family: inherit;
-  font-size: 0.875rem;
-  text-transform: none;
-  font-weight: normal;
-  background: black;
-  color: #fff;
-  z-index: 999999999;
-  white-space: nowrap;
-  opacity: 1;
-  transition: opacity 500ms 500ms;
-  padding: 0.375rem;
-}
-:host .tooltip.hidden,
-wm-button .tooltip.hidden {
-  opacity: 0;
-  transition-delay: 0s;
-}
-:host .tooltip.top,
-wm-button .tooltip.top {
-  right: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: 2.9375rem;
-}
-:host .tooltip.bottom,
-wm-button .tooltip.bottom {
-  right: auto;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 2.9375rem;
-}
-:host .tooltip.left,
-wm-button .tooltip.left {
-  top: 0.375rem;
-  right: 3rem;
-}
-:host .tooltip.right,
-wm-button .tooltip.right {
-  top: 0.375rem;
-  left: 3rem;
-}
-:host .tooltip.bottom-left,
-wm-button .tooltip.bottom-left {
-  left: auto;
-  right: 2.75rem;
-}
-:host .tooltip.bottom-right,
-wm-button .tooltip.bottom-right {
-  top: 2.75rem;
-  left: 2.75rem;
-}
-:host .tooltip.top-right,
-wm-button .tooltip.top-right {
-  bottom: 2.75rem;
-  left: 2.75rem;
-}
-:host .tooltip.top-left,
-wm-button .tooltip.top-left {
-  bottom: 2.75rem;
-  left: auto;
-  right: 2.75rem;
 }

package/dist/collection/components/wm-button/wm-button.js

@@ -14,8 +14,10 @@ export class Button {
     this.permanentlyDelete = false;
     this.textWrap = true;
     this.isTabbing = false;
+    this.id = generateId();
     this.clickFunc = null;
     this.ariaPopup = false;
+    this.tooltipVisible = false;
   }
   get tempButtonType() {
     // uses of this getter should be replaced with this.buttonType when buttonStyle is fully phased out
@@ -25,12 +27,21 @@ export class Button {
   get isTruncated() {
     return !!this.buttonEl && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth;
   }
+  get hasTooltip() {
+    // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
+    return this.tempButtonType === "icononly" || this.tempButtonType === "navigational" || this.isTruncated;
+  }
   toggleTabbingOn() {
     this.isTabbing = true;
   }
   toggleTabbingOff() {
     this.isTabbing = false;
   }
+  handleScroll() {
+    if (this.tooltipVisible) {
+      this.hideTooltip();
+    }
+  }
   handleOnClick() {
     // remove the onlick function when the component is disabled,
     // to handle a bug in Edge 42 where the function would run
@@ -108,25 +119,48 @@ export class Button {
       this.toggleTabbingOn();
     }
     this.ariaPopup = !!this.el.getAttribute("aria-haspopup");
-    forceUpdate(this.el); // originally here to renderTooltip(), now necessary to pass text-truncation tooltip test
+    forceUpdate(this.el); // necessary to pass text-truncation tooltip test
   }
   showTooltip() {
-    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
-    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
-    if (!!this.tooltipEl) {
-      this.adjustedTooltipPosition = adjustTooltipPosition(this.tooltipPosition, this.el, this.tooltipEl);
-      this.tooltipEl.classList.remove("hidden");
+    if (this.hasTooltip) {
+      const tooltipEl = document.querySelector(`#wm-tooltip`);
+      if (!!tooltipEl) {
+        // set tooltip text
+        tooltipEl.textContent = this.isTruncated ? this.el.textContent : this.tooltip;
+        // adjust position in case there is no space to place the tooltip where specified via prop
+        this.adjustedTooltipPosition = adjustTooltipPosition(this.tooltipPosition, this.buttonEl, tooltipEl);
+        // to get the center positions, calculate the difference between the button width and the tooltip width
+        const verticalDiff = (this.buttonEl.getBoundingClientRect().height - tooltipEl.getBoundingClientRect().height) / 2;
+        const horizontalDiff = (this.buttonEl.getBoundingClientRect().width - tooltipEl.getBoundingClientRect().width) / 2;
+        // center positions as default (at least one value will be changed below)
+        let verticalPos = this.buttonEl.getBoundingClientRect().top + verticalDiff;
+        let horizontalPos = this.buttonEl.getBoundingClientRect().left + horizontalDiff;
+        if (this.adjustedTooltipPosition.includes("top")) {
+          verticalPos = this.buttonEl.getBoundingClientRect().top - tooltipEl.getBoundingClientRect().height - 8;
+        }
+        if (this.adjustedTooltipPosition.includes("bottom")) {
+          verticalPos = this.buttonEl.getBoundingClientRect().bottom + 8;
+        }
+        if (this.adjustedTooltipPosition.includes("left")) {
+          horizontalPos = this.buttonEl.getBoundingClientRect().left - tooltipEl.getBoundingClientRect().width - 8;
+        }
+        if (this.adjustedTooltipPosition.includes("right")) {
+          horizontalPos = this.buttonEl.getBoundingClientRect().right + 8;
+        }
+        tooltipEl.style.top = (verticalPos / 16).toString() + "rem";
+        tooltipEl.style.left = (horizontalPos / 16).toString() + "rem";
+        tooltipEl.style.transitionDelay = "500ms";
+        tooltipEl.style.opacity = "1";
+        this.tooltipVisible = true;
+      }
     }
   }
   hideTooltip() {
-    if (!!this.tooltipEl) {
-      this.tooltipEl.classList.add("hidden");
-    }
-  }
-  renderTooltip() {
-    // tooltip is only rendered for icononly and navigational types, or if the button text is truncated
-    if (this.tempButtonType === "icononly" || this.tempButtonType === "navigational" || this.isTruncated) {
-      return (h("div", { ref: (el) => (this.tooltipEl = el), "aria-hidden": "true", class: `tooltip hidden ${this.adjustedTooltipPosition}` }, this.isTruncated ? this.el.textContent : this.tooltip));
+    const tooltipEl = document.querySelector("#wm-tooltip");
+    if (!!tooltipEl) {
+      tooltipEl.style.transitionDelay = "0s";
+      tooltipEl.style.opacity = "0";
+      this.tooltipVisible = false;
     }
   }
   getClasses() {
@@ -141,7 +175,7 @@ export class Button {
   }
   getAriaLabel() {
     if (this.tempButtonType === "icononly" || this.tempButtonType === "navigational") {
-      return this.labelForIdenticalButtons ? this.labelForIdenticalButtons : this.tooltip;
+      return this.labelForIdenticalButtons || this.tooltip;
     }
     if (this.labelForIdenticalButtons) {
       return this.labelForIdenticalButtons;
@@ -149,11 +183,10 @@ export class Button {
   }
   render() {
     return (h(Host, { class: this.disabled ? "button-disabled" : "" },
-      h("button", { id: generateId(), class: `${this.getClasses()}`, disabled: this.disabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip(), onClick: () => this.hideTooltip() },
+      h("button", { id: this.id, class: `${this.getClasses()}`, disabled: this.disabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.hideTooltip(), onClick: () => this.hideTooltip() },
         this.icon && (h("span", { class: "mdi", style: this.iconSize ? { fontSize: this.iconSize } : {} }, String.fromCodePoint(parseInt(`0x${this.icon}`)))),
         h("span", { class: "button-text" },
-          h("slot", null))),
-      this.renderTooltip()));
+          h("slot", null)))));
   }
   static get is() { return "wm-button"; }
   static get encapsulation() { return "shadow"; }
@@ -393,6 +426,12 @@ export class Button {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "scroll",
+      "method": "handleScroll",
+      "target": "window",
+      "capture": false,
+      "passive": true
     }, {
       "name": "keydown",
       "method": "handleKeydown",

package/dist/collection/components/wm-input/wm-input.js

@@ -7,6 +7,7 @@ export class Input {
     this.disabled = false;
     this.placeholder = "";
     this.requiredField = false;
+    this.type = "text";
     this.step = 1;
     this.charCount = 0;
     this.announcement = "";
@@ -19,7 +20,7 @@ export class Input {
     });
     this.numberErrorMessage = intl.formatMessage({
       id: "input.numberError",
-      defaultMessage: "This field must be a number.",
+      defaultMessage: "Please enter a valid number.",
     });
   }
   componentWillLoad() {
@@ -317,18 +318,19 @@ export class Input {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"number\"",
-        "resolved": "\"number\" | undefined",
+        "original": "\"number\" | \"text\"",
+        "resolved": "\"number\" | \"text\"",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
       "attribute": "type",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "\"text\""
     },
     "step": {
       "type": "number",

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -29,7 +29,7 @@ export class ModalFooter {
       h("div", { class: "wm-info" }, this.infoText),
       h("div", { class: "wm-button-collection" },
         this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)),
-        h("wm-button", { buttonStyle: this.deleteStyle ? "secondary" : "primary", permanentlyDelete: this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+        h("wm-button", { buttonType: this.deleteStyle ? "secondary" : "primary", permanentlyDelete: this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
   }
   static get is() { return "wm-modal-footer"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -34,7 +34,7 @@ export class ModalHeader {
           h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` },
             this.heading,
             h("span", { class: "subtitle" }, this.subheading))),
-        h("wm-button", { "button-style": "navigational", icon: "f156", tooltip: this.closeTooltipMessage, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: this.closeTooltipMessage, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
   }
   static get is() { return "wm-modal-header"; }
   static get originalStyleUrls() { return {

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

@@ -188,7 +188,7 @@ export class Search {
     return (h("div", { class: "wm-find-elements" },
       h("div", { id: "results-display", class: "results" }, this.getResultsMessage()),
       h("div", { class: "wm-button-collection" },
-        h("wm-button", { "button-style": "icononly", icon: "f05d", tooltip: intl.formatMessage({
+        h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: intl.formatMessage({
             id: "global.previous",
             description: "button text",
             defaultMessage: "previous",
@@ -196,7 +196,7 @@ export class Search {
             id: "search.previousResult",
             defaultMessage: "Press to hear previous matching result",
           }) }),
-        h("wm-button", { "button-style": "icononly", icon: "f045", tooltip: intl.formatMessage({
+        h("wm-button", { "button-type": "icononly", icon: "f045", tooltip: intl.formatMessage({
             id: "global.next",
             description: "button text",
             defaultMessage: "next",

package/dist/collection/components/wm-uploader/wm-network-uploader/wm-network-uploader.js

@@ -438,8 +438,8 @@ export class NetworkUploader {
           h("span", { class: "filename" }, item.file_name),
           h("span", { class: "filedate" }, this.formatDate(item.updated_at, intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone))),
         h("div", { class: "file-controls" },
-          h("wm-button", { class: "download-button", "button-style": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }),
-          h("wm-button", { class: "delete-button", "button-style": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
+          h("wm-button", { class: "download-button", "button-type": "icononly", tooltip: "download", "label-for-identical-buttons": `download ${item.file_name}`, icon: "f1da", onClick: () => this.downloadFile(item.uuid, item.file_path) }),
+          h("wm-button", { class: "delete-button", "button-type": "icononly", tooltip: "remove", "label-for-identical-buttons": `remove ${item.file_name}`, icon: "f1c0", onClick: () => this.deleteFile(item) })))));
   }
   renderFileList() {
     return h("ul", { class: "file-list" }, this.fileList.map((item) => this.renderFile(item)));

package/dist/collection/global/global.js

@@ -1,13 +1,13 @@
 import { setMode } from "@stencil/core";
 import { version } from "../../package.json";
+// PRINT RIPPLE VERSION IN CONSOLE
+// test envs return 0 for plugin.length
+// do not print version number there as it causes issues
 if (window.navigator.plugins.length > 0) {
-  // excluding test envs (which will return 0 for plugin.length)
   console.log("Ripple component library", version);
 }
+// USER-IS-TABBING CLASSES (FOR FOCUS INDICATORS)
 // Dispatching events to track whether user is navigating with keyboard or mouse
-// (for focus states)
-window.addEventListener("keydown", wmComponentKeys);
-window.addEventListener("mousedown", wmComponentMouseDownOnce);
 function wmComponentKeys(ev) {
   var key = ev.key || ev.keyCode;
   if (key == "Tab" || key === 9) {
@@ -34,7 +34,38 @@ function wmComponentMouseDownOnce() {
   document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
   document.querySelector("body").classList.remove("wmcl-user-is-keying");
 }
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+// MODES (FOR PRODUCT-SPECIFIC STYLING)
 //Checks for mode attribute explicitly set on the document. If "mode" is set on component, it will override the global mode. Falls back to default (Planning styles)
 setMode((elm) => {
   return elm.getAttribute("mode") || document.documentElement.getAttribute("mode") || "planning";
 });
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.setAttribute("aria-hidden", "true");
+tooltipEl.style.position = "fixed";
+tooltipEl.style.overflow = "hidden";
+tooltipEl.style.pointerEvents = "none";
+tooltipEl.style.lineHeight = "normal";
+tooltipEl.style.fontFamily = "inherit";
+tooltipEl.style.fontSize = "0.875rem";
+tooltipEl.style.textTransform = "none";
+tooltipEl.style.fontWeight = "normal";
+tooltipEl.style.background = "black";
+tooltipEl.style.color = "#fff";
+tooltipEl.style.zIndex = "999999";
+tooltipEl.style.whiteSpace = "nowrap";
+tooltipEl.style.padding = "0.375rem";
+tooltipEl.style.transitionProperty = "opacity";
+tooltipEl.style.transitionDelay = "opacity";
+tooltipEl.style.opacity = "0";
+tooltipContainer.appendChild(tooltipEl);
+const body = document.querySelector("body");
+body.appendChild(tooltipContainer);

package/dist/esm/global-024b68e0.js

@@ -0,0 +1,36 @@
+const version = "3.1.0-4";
+
+if (window.navigator.plugins.length > 0) {
+  // excluding test envs (which will return 0 for plugin.length)
+  console.log("Ripple component library", version);
+}
+// Dispatching events to track whether user is navigating with keyboard or mouse
+// (for focus states)
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+function wmComponentKeys(ev) {
+  var key = ev.key || ev.keyCode;
+  if (key == "Tab" || key === 9) {
+    var event = new Event("wmUserIsTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+  }
+  if (key == "ArrowLeft" ||
+    key === 37 ||
+    key == "ArrowUp" ||
+    key === 38 ||
+    key == "ArrowRight" ||
+    key === 39 ||
+    key == "ArrowDown" ||
+    key === 40) {
+    var event = new Event("wmUserIsKeying");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-keying");
+  }
+}
+function wmComponentMouseDownOnce() {
+  var event = new Event("wmUserIsNotTabbing");
+  window.dispatchEvent(event);
+  document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
+  document.querySelector("body").classList.remove("wmcl-user-is-keying");
+}

package/dist/esm/global-178ff07b.js

@@ -0,0 +1,66 @@
+const version = "3.1.0-7";
+
+// PRINT RIPPLE VERSION IN CONSOLE
+// test envs return 0 for plugin.length
+// do not print version number there as it causes issues
+if (window.navigator.plugins.length > 0) {
+  console.log("Ripple component library", version);
+}
+// USER-IS-TABBING CLASSES (FOR FOCUS INDICATORS)
+// Dispatching events to track whether user is navigating with keyboard or mouse
+function wmComponentKeys(ev) {
+  var key = ev.key || ev.keyCode;
+  if (key == "Tab" || key === 9) {
+    var event = new Event("wmUserIsTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+  }
+  if (key == "ArrowLeft" ||
+    key === 37 ||
+    key == "ArrowUp" ||
+    key === 38 ||
+    key == "ArrowRight" ||
+    key === 39 ||
+    key == "ArrowDown" ||
+    key === 40) {
+    var event = new Event("wmUserIsKeying");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-keying");
+  }
+}
+function wmComponentMouseDownOnce() {
+  var event = new Event("wmUserIsNotTabbing");
+  window.dispatchEvent(event);
+  document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
+  document.querySelector("body").classList.remove("wmcl-user-is-keying");
+}
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+// TOOLTIP
+// Add a tooltip element
+// This allows tooltips to be always at the highest stacking context (always on top)
+// Element is added withing a container to avoid performance impact
+const tooltipContainer = document.createElement("div");
+tooltipContainer.id = "wm-tooltip-container";
+const tooltipEl = document.createElement("div");
+tooltipEl.id = "wm-tooltip";
+tooltipEl.setAttribute("aria-hidden", "true");
+tooltipEl.style.position = "fixed";
+tooltipEl.style.overflow = "hidden";
+tooltipEl.style.pointerEvents = "none";
+tooltipEl.style.lineHeight = "normal";
+tooltipEl.style.fontFamily = "inherit";
+tooltipEl.style.fontSize = "0.875rem";
+tooltipEl.style.textTransform = "none";
+tooltipEl.style.fontWeight = "normal";
+tooltipEl.style.background = "black";
+tooltipEl.style.color = "#fff";
+tooltipEl.style.zIndex = "999999";
+tooltipEl.style.whiteSpace = "nowrap";
+tooltipEl.style.padding = "0.375rem";
+tooltipEl.style.transitionProperty = "opacity";
+tooltipEl.style.transitionDelay = "opacity";
+tooltipEl.style.opacity = "0";
+tooltipContainer.appendChild(tooltipEl);
+const body = document.querySelector("body");
+body.appendChild(tooltipContainer);

package/dist/esm/global-78624c36.js

@@ -0,0 +1,36 @@
+const version = "3.1.0-5";
+
+if (window.navigator.plugins.length > 0) {
+  // excluding test envs (which will return 0 for plugin.length)
+  console.log("Ripple component library", version);
+}
+// Dispatching events to track whether user is navigating with keyboard or mouse
+// (for focus states)
+window.addEventListener("keydown", wmComponentKeys);
+window.addEventListener("mousedown", wmComponentMouseDownOnce);
+function wmComponentKeys(ev) {
+  var key = ev.key || ev.keyCode;
+  if (key == "Tab" || key === 9) {
+    var event = new Event("wmUserIsTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+  }
+  if (key == "ArrowLeft" ||
+    key === 37 ||
+    key == "ArrowUp" ||
+    key === 38 ||
+    key == "ArrowRight" ||
+    key === 39 ||
+    key == "ArrowDown" ||
+    key === 40) {
+    var event = new Event("wmUserIsKeying");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-keying");
+  }
+}
+function wmComponentMouseDownOnce() {
+  var event = new Event("wmUserIsNotTabbing");
+  window.dispatchEvent(event);
+  document.querySelector("body").classList.remove("wmcl-user-is-tabbing");
+  document.querySelector("body").classList.remove("wmcl-user-is-keying");
+}