@watermarkinsights/ripple 5.13.1-0 → 5.13.1-alpha.1

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

@@ -3,23 +3,16 @@ import { uploaderMessages } from "../../global/intl";
 import { intl } from "../../global/functions";
 export class Uploader {
     constructor() {
-        this.batchCount = 0; // used to calculate the aggregate upload progress
-        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
-        this.fileIdToDelete = "";
-        this.label = undefined;
         this.uploaderType = "select";
         this.dropArea = "component";
-        this.buttonText = undefined;
-        this.icon = undefined;
         this.fileTypes = "pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";
-        this.maxSize = undefined;
-        this.maxFiles = undefined;
-        this.errorMessage = undefined;
-        this.requiredField = undefined;
         this.showInfo = "time";
         this.isTabbing = false;
-        this.notif = "";
+        this.notif = ""; // for upload notifications
         this.isCondensed = false;
+        this.batchCount = 0; // used to calculate the aggregate upload progress
+        this.prevUploadCount = 0; // comparison to determine whether or not to announce updated count
+        this.fileIdToDelete = "";
     }
     get isDisabled() {
         // disable if is the uploader is maxed out or if something is uploading
@@ -321,6 +314,7 @@ export class Uploader {
         return {
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -333,11 +327,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "uploaderType": {
                 "type": "string",
+                "attribute": "uploader-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"select\" | \"drop\"",
@@ -350,12 +346,14 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "uploader-type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"select\""
             },
             "dropArea": {
                 "type": "string",
+                "attribute": "drop-area",
                 "mutable": false,
                 "complexType": {
                     "original": "\"component\" | \"page\"",
@@ -368,12 +366,14 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "drop-area",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"component\""
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -386,11 +386,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "button-text",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -403,11 +405,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "fileTypes": {
                 "type": "string",
+                "attribute": "file-types",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -420,12 +424,14 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "file-types",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\""
             },
             "maxSize": {
                 "type": "string",
+                "attribute": "max-size",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -438,11 +444,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "maxFiles": {
                 "type": "number",
+                "attribute": "max-files",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -455,11 +463,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-files",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "errorMessage": {
                 "type": "string",
+                "attribute": "error-message",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -472,11 +482,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "error-message",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "requiredField": {
                 "type": "boolean",
+                "attribute": "required-field",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -489,11 +501,13 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "required-field",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "showInfo": {
                 "type": "string",
+                "attribute": "show-info",
                 "mutable": false,
                 "complexType": {
                     "original": "\"size\" | \"time\" | \"none\"",
@@ -506,7 +520,8 @@ export class Uploader {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "show-info",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "\"time\""
             }

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,85 @@
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-HPnDWE3g.js';
+
+const version = "5.13.1-alpha.1";
+
+// 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("%cRipple component library %c%s", "color: #575195; font-weight: bold", "font-weight: bold", version);
+}
+// Dispatching events to track whether user is navigating with keyboard or mouse
+// no longer necessary for keyboard focus indicators (thanks to :focus-visible)
+// but still used in several components for other things (search for isTabbing)
+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);
+// 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.classList.add("wm-tooltip");
+tooltipEl.setAttribute("popover", "manual");
+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: var(--wmcolor-tooltip-background);
+  color: var(--wmcolor-tooltip-text);
+  z-index: 999999;
+  max-width: var(--wmTooltipMaxWidth, 13.75rem);
+  margin-right: 1.5rem;
+  padding: 0.375rem;
+  transition-property: opacity;
+  transition-delay: 0s;
+  opacity: 0;
+  inset: unset;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+  will-change: transform;
+  transform: translate(var(--wmTooltipLeft), var(--wmTooltipTop));
+  border: none;
+}
+
+.wm-tooltip:popover-open {
+  opacity: 0;
+}
+
+.wm-tooltip.show {
+  transition-delay: 500ms;
+  opacity: 1;
+}
+`;
+document.head.appendChild(tooltipStyles);
+tooltipContainer.appendChild(tooltipEl);
+document.querySelector("body").appendChild(tooltipContainer);