@watermarkinsights/ripple 3.27.1 → 3.28.0

package/dist/collection/global/global.js

@@ -1,79 +1,79 @@
-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) {
-  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) {
-  if (ev.key == "Tab") {
-    var event = new Event("wmUserIsTabbing");
-    window.dispatchEvent(event);
-    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
-  }
-  if (ev.key == "ArrowLeft" || ev.key == "ArrowUp" || ev.key == "ArrowRight" || ev.key == "ArrowDown") {
-    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);
-// 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");
-const tooltipStyles = document.createElement("style");
-tooltipStyles.textContent = `
-#wm-tooltip {
-  position: fixed;
-  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: 999999;
-  max-width: var(--wmTooltipMaxWidth, 13.75rem);
-  margin-right: 1.5rem;
-  padding: 0.375rem;
-  transition-property: opacity;
-  transition-delay: 0s;
-  opacity: 0;
-  top: 0;
-  left: 0;
-  transform: translateZ(0);
-  will-change: transform;
-  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
-}
-
-#wm-tooltip.show {
-  transition-delay: 500ms;
-  opacity: 1;
-}
-`;
-document.head.appendChild(tooltipStyles);
-tooltipContainer.appendChild(tooltipEl);
-document.querySelector("body").appendChild(tooltipContainer);
+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) {
+  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) {
+  if (ev.key == "Tab") {
+    var event = new Event("wmUserIsTabbing");
+    window.dispatchEvent(event);
+    document.querySelector("body").classList.add("wmcl-user-is-tabbing");
+  }
+  if (ev.key == "ArrowLeft" || ev.key == "ArrowUp" || ev.key == "ArrowRight" || ev.key == "ArrowDown") {
+    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);
+// 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");
+const tooltipStyles = document.createElement("style");
+tooltipStyles.textContent = `
+#wm-tooltip {
+  position: fixed;
+  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: 999999;
+  max-width: var(--wmTooltipMaxWidth, 13.75rem);
+  margin-right: 1.5rem;
+  padding: 0.375rem;
+  transition-property: opacity;
+  transition-delay: 0s;
+  opacity: 0;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+  will-change: transform;
+  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
+}
+
+#wm-tooltip.show {
+  transition-delay: 500ms;
+  opacity: 1;
+}
+`;
+document.head.appendChild(tooltipStyles);
+tooltipContainer.appendChild(tooltipEl);
+document.querySelector("body").appendChild(tooltipContainer);

package/dist/collection/global/interfaces.js

@@ -1,49 +1,49 @@
-//List of icon codes with more indicative descriptors to create labels for icon-only buttons
-export const iconLabels = {
-  f156: "Close",
-  f3eb: "Edit",
-  f739: "Cancel",
-  f12c: "Save",
-  f1c0: "Delete",
-  f349: "Search",
-  f207: "Export info",
-  f1d9: "Open dropdown",
-  f04d: "Go back",
-  f054: "Go forward",
-  f141: "Left",
-  f142: "Right",
-  f35e: "Menu left",
-  f35d: "Toggle menu down",
-  f30d: "Backspace",
-  f645: "Sort hierarchically",
-  f4bb: "Sort alphabetically",
-};
-export function getIconCodeFromName(icon) {
-  return iconCodes[icon] || icon;
-}
-const iconCodes = {
-  close: "f156",
-  pencil: "f3eb",
-  cancel: "f739",
-  check: "f12c",
-  delete: "f1c0",
-  magnify: "f349",
-  export: "f207",
-  "dots-vertical": "f1d9",
-  "arrow-left": "f04d",
-  "arrow-right": "f054",
-  "chevron-left": "f141",
-  "chevron-right": "f142",
-  "menu-left": "f35e",
-  "menu-down": "f35d",
-  "keyboard-backspace": "f30d",
-  "file-tree": "f645",
-  "sort-alphabetical": "f4bb",
-  "checkbox-marked-circle": "f133",
-  "account-settings": "f630",
-  "backup-restore": "f06f",
-};
-export const defaultMode = "planning";
-export const getWmMode = (ref) => {
-  return ref.getAttribute("mode") || document.documentElement.getAttribute("mode") || defaultMode;
-};
+//List of icon codes with more indicative descriptors to create labels for icon-only buttons
+export const iconLabels = {
+  f156: "Close",
+  f3eb: "Edit",
+  f739: "Cancel",
+  f12c: "Save",
+  f1c0: "Delete",
+  f349: "Search",
+  f207: "Export info",
+  f1d9: "Open dropdown",
+  f04d: "Go back",
+  f054: "Go forward",
+  f141: "Left",
+  f142: "Right",
+  f35e: "Menu left",
+  f35d: "Toggle menu down",
+  f30d: "Backspace",
+  f645: "Sort hierarchically",
+  f4bb: "Sort alphabetically",
+};
+export function getIconCodeFromName(icon) {
+  return iconCodes[icon] || icon;
+}
+const iconCodes = {
+  close: "f156",
+  pencil: "f3eb",
+  cancel: "f739",
+  check: "f12c",
+  delete: "f1c0",
+  magnify: "f349",
+  export: "f207",
+  "dots-vertical": "f1d9",
+  "arrow-left": "f04d",
+  "arrow-right": "f054",
+  "chevron-left": "f141",
+  "chevron-right": "f142",
+  "menu-left": "f35e",
+  "menu-down": "f35d",
+  "keyboard-backspace": "f30d",
+  "file-tree": "f645",
+  "sort-alphabetical": "f4bb",
+  "checkbox-marked-circle": "f133",
+  "account-settings": "f630",
+  "backup-restore": "f06f",
+};
+export const defaultMode = "planning";
+export const getWmMode = (ref) => {
+  return ref.getAttribute("mode") || document.documentElement.getAttribute("mode") || defaultMode;
+};

package/dist/collection/global/intl.js

@@ -1,132 +1,132 @@
-import { intl } from "./functions";
-export const globalMessages = {
-  characterLimitReached: intl.formatMessage({
-    id: "global.characterLimitReached",
-    defaultMessage: "No additional characters will be entered.",
-    description: "for screen readers",
-  }),
-  close: intl.formatMessage({
-    id: "global.closeVerb",
-    defaultMessage: "Close",
-    description: "For a button, to close a user interface element",
-  }),
-  genericError: intl.formatMessage({
-    id: "global.genericError",
-    defaultMessage: "An error occurred. Please try again.",
-  }),
-  newWindow: intl.formatMessage({
-    id: "global.newWindowLink",
-    defaultMessage: "Opens in a new window.",
-    description: "Indicates that a focused link will open in a new window",
-  }),
-  next: intl.formatMessage({
-    id: "global.next",
-    defaultMessage: "next",
-    description: "Button text, indicating an action leading to a 'next' state",
-  }),
-  open: intl.formatMessage({
-    id: "global.openVerb",
-    defaultMessage: "Open",
-    description: "For a button, to open a user interface element",
-  }),
-  previous: intl.formatMessage({
-    id: "global.previous",
-    defaultMessage: "previous",
-    description: "Button text, indicating an action leading to a 'previous' state",
-  }),
-  requiredError: intl.formatMessage({
-    id: "global.requiredError",
-    defaultMessage: "This field is required.",
-    description: "Error displayed under a required field when it has not been filled",
-  }),
-  requiredField: intl.formatMessage({
-    id: "global.requiredField",
-    defaultMessage: "required field",
-    description: "Screen reader text, indicating the currently focused field is required",
-  }),
-  // -------------------------------------------------------------------------- //
-  //                             Functions                                      //
-  // -------------------------------------------------------------------------- //
-  getCharactersEntered: (charCount, charLimit) => intl.formatMessage({
-    id: "global.charactersEntered",
-    defaultMessage: "{x, number} of {y, number} characters entered.",
-    description: "for screen readers",
-  }, { x: charCount, y: charLimit }),
-  getCharacterLimit: (characterLimit) => intl.formatMessage({
-    id: "global.characterLimit",
-    defaultMessage: "{limit, number} characters allowed.",
-    description: "for screen readers",
-  }, { limit: characterLimit }),
-};
-export const uploaderMessages = {
-  duplicateName: intl.formatMessage({
-    id: "uploader.duplicateName",
-    defaultMessage: "A file with this name already exists.",
-  }),
-  fileLimitExceeded: intl.formatMessage({
-    id: "uploader.fileUploadLimitExceeded",
-    defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
-    description: "Message displayed when trying to upload too many files",
-  }),
-  fileLimitReached: intl.formatMessage({
-    id: "uploader.fileUploadLimitReached",
-    defaultMessage: "The maximum number of files has been reached",
-    description: "Message displayed when trying to upload additional files, but the limit has been reached",
-  }),
-  finishedUploading: intl.formatMessage({
-    id: "uploader.finishedUploading",
-    defaultMessage: "Finished uploading",
-  }),
-  waitToUpload: intl.formatMessage({
-    id: "uploader.waitToUpload",
-    defaultMessage: "Please wait for current upload to complete before uploading new files.",
-    description: "Message for screen reader users",
-  }),
-  zeroFileSize: intl.formatMessage({
-    id: "uploader.zeroFileSize",
-    defaultMessage: "The file must be more than 0 bytes",
-    description: "Error message when user attempts to upload a file of no size",
-  }),
-  // -------------------------------------------------------------------------- //
-  //                             Functions                                      //
-  // -------------------------------------------------------------------------- //
-  getAcceptedFileTypes: (validTypes, amount) => intl.formatMessage({
-    id: "uploader.acceptedFileTypes",
-    defaultMessage: "Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}",
-  }, {
-    fileTypes: validTypes,
-    amount: amount,
-  }),
-  getFilesAdded: (numFiles) => intl.formatMessage({
-    id: "uploader.filesAdded",
-    defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
-  }, { numFiles: numFiles }),
-  getFileCount: (fileListLength, maxFiles) => intl.formatMessage({
-    id: "uploader.fileCount",
-    defaultMessage: "{x} of {y} Files",
-    description: "A count of the number of files currently uploaded",
-  }, { x: fileListLength, y: maxFiles }),
-  getFileTooLarge: (maxSize) => intl.formatMessage({
-    id: "uploader.fileTooLarge",
-    defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
-  }, { size: maxSize }),
-  getFilesUploading: (numFilesUploading) => intl.formatMessage({
-    id: "uploader.filesUploading",
-    defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
-  }, { num: numFilesUploading }),
-  getInvalidFileType: (validTypes) => intl.formatMessage({
-    id: "uploader.invalidFileType",
-    defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
-  }, { validTypes }),
-  getMaxSize: (maxSize) => intl.formatMessage({
-    id: "uploader.maxSize",
-    defaultMessage: "Maximum file size {maxSize}MB",
-    description: "An indicator of the maximum file size the uploader allows",
-  }, {
-    maxSize: maxSize,
-  }),
-  getUploadProgress: (percentage) => intl.formatMessage({
-    id: "uploader.uploadProgress",
-    defaultMessage: "Upload progress: {percentage}%",
-  }, { percentage: percentage }),
-};
+import { intl } from "./functions";
+export const globalMessages = {
+  characterLimitReached: intl.formatMessage({
+    id: "global.characterLimitReached",
+    defaultMessage: "No additional characters will be entered.",
+    description: "for screen readers",
+  }),
+  close: intl.formatMessage({
+    id: "global.closeVerb",
+    defaultMessage: "Close",
+    description: "For a button, to close a user interface element",
+  }),
+  genericError: intl.formatMessage({
+    id: "global.genericError",
+    defaultMessage: "An error occurred. Please try again.",
+  }),
+  newWindow: intl.formatMessage({
+    id: "global.newWindowLink",
+    defaultMessage: "Opens in a new window.",
+    description: "Indicates that a focused link will open in a new window",
+  }),
+  next: intl.formatMessage({
+    id: "global.next",
+    defaultMessage: "next",
+    description: "Button text, indicating an action leading to a 'next' state",
+  }),
+  open: intl.formatMessage({
+    id: "global.openVerb",
+    defaultMessage: "Open",
+    description: "For a button, to open a user interface element",
+  }),
+  previous: intl.formatMessage({
+    id: "global.previous",
+    defaultMessage: "previous",
+    description: "Button text, indicating an action leading to a 'previous' state",
+  }),
+  requiredError: intl.formatMessage({
+    id: "global.requiredError",
+    defaultMessage: "This field is required.",
+    description: "Error displayed under a required field when it has not been filled",
+  }),
+  requiredField: intl.formatMessage({
+    id: "global.requiredField",
+    defaultMessage: "required field",
+    description: "Screen reader text, indicating the currently focused field is required",
+  }),
+  // -------------------------------------------------------------------------- //
+  //                             Functions                                      //
+  // -------------------------------------------------------------------------- //
+  getCharactersEntered: (charCount, charLimit) => intl.formatMessage({
+    id: "global.charactersEntered",
+    defaultMessage: "{x, number} of {y, number} characters entered.",
+    description: "for screen readers",
+  }, { x: charCount, y: charLimit }),
+  getCharacterLimit: (characterLimit) => intl.formatMessage({
+    id: "global.characterLimit",
+    defaultMessage: "{limit, number} characters allowed.",
+    description: "for screen readers",
+  }, { limit: characterLimit }),
+};
+export const uploaderMessages = {
+  duplicateName: intl.formatMessage({
+    id: "uploader.duplicateName",
+    defaultMessage: "A file with this name already exists.",
+  }),
+  fileLimitExceeded: intl.formatMessage({
+    id: "uploader.fileUploadLimitExceeded",
+    defaultMessage: "Upload unsuccessful because file selection would exceed the maximum number of files",
+    description: "Message displayed when trying to upload too many files",
+  }),
+  fileLimitReached: intl.formatMessage({
+    id: "uploader.fileUploadLimitReached",
+    defaultMessage: "The maximum number of files has been reached",
+    description: "Message displayed when trying to upload additional files, but the limit has been reached",
+  }),
+  finishedUploading: intl.formatMessage({
+    id: "uploader.finishedUploading",
+    defaultMessage: "Finished uploading",
+  }),
+  waitToUpload: intl.formatMessage({
+    id: "uploader.waitToUpload",
+    defaultMessage: "Please wait for current upload to complete before uploading new files.",
+    description: "Message for screen reader users",
+  }),
+  zeroFileSize: intl.formatMessage({
+    id: "uploader.zeroFileSize",
+    defaultMessage: "The file must be more than 0 bytes",
+    description: "Error message when user attempts to upload a file of no size",
+  }),
+  // -------------------------------------------------------------------------- //
+  //                             Functions                                      //
+  // -------------------------------------------------------------------------- //
+  getAcceptedFileTypes: (validTypes, amount) => intl.formatMessage({
+    id: "uploader.acceptedFileTypes",
+    defaultMessage: "Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}",
+  }, {
+    fileTypes: validTypes,
+    amount: amount,
+  }),
+  getFilesAdded: (numFiles) => intl.formatMessage({
+    id: "uploader.filesAdded",
+    defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
+  }, { numFiles: numFiles }),
+  getFileCount: (fileListLength, maxFiles) => intl.formatMessage({
+    id: "uploader.fileCount",
+    defaultMessage: "{x} of {y} Files",
+    description: "A count of the number of files currently uploaded",
+  }, { x: fileListLength, y: maxFiles }),
+  getFileTooLarge: (maxSize) => intl.formatMessage({
+    id: "uploader.fileTooLarge",
+    defaultMessage: "The selected file is too large. Maximum file size is {size}Mb",
+  }, { size: maxSize }),
+  getFilesUploading: (numFilesUploading) => intl.formatMessage({
+    id: "uploader.filesUploading",
+    defaultMessage: "{num, plural, one {1 file uploading} other {# files uploading}}",
+  }, { num: numFilesUploading }),
+  getInvalidFileType: (validTypes) => intl.formatMessage({
+    id: "uploader.invalidFileType",
+    defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
+  }, { validTypes }),
+  getMaxSize: (maxSize) => intl.formatMessage({
+    id: "uploader.maxSize",
+    defaultMessage: "Maximum file size {maxSize}MB",
+    description: "An indicator of the maximum file size the uploader allows",
+  }, {
+    maxSize: maxSize,
+  }),
+  getUploadProgress: (percentage) => intl.formatMessage({
+    id: "uploader.uploadProgress",
+    defaultMessage: "Upload progress: {percentage}%",
+  }, { percentage: percentage }),
+};