@watermarkinsights/ripple 5.13.0-alpha.3 → 5.13.0-alpha.5

package/dist/{esm → ripple}/wm-wrapper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, g as getElement } from './index-EopL5zo4.js';
+import { r as registerInstance, e as createEvent, g as getElement } from './index-CU5QNCKv.js';
 
 const Wrapper = class {
     constructor(hostRef) {

package/dist/types/components/wm-flyout/wm-flyout.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+export declare class Flyout {
+    el: HTMLWmFlyoutElement;
+    private dialogEl;
+    private closeButtonEl;
+    private headingEl;
+    private breadcrumbsEl;
+    private breadcrumbsMeasureEl;
+    private resizeObserver;
+    eyebrow?: string;
+    heading: string;
+    subheading?: string;
+    flyoutWidth: string;
+    primaryText?: string;
+    secondaryText?: string;
+    infoText?: string;
+    breadcrumbs?: string;
+    elementToFocus: "primary" | "secondary" | string;
+    open: boolean;
+    returnFocusEl: HTMLElement;
+    isBreadcrumbsOverflowing: boolean;
+    wmFlyoutCloseTriggered: EventEmitter<void>;
+    wmFlyoutPrimaryTriggered: EventEmitter<void>;
+    wmFlyoutSecondaryTriggered: EventEmitter<void>;
+    wmFlyoutBreadcrumbClicked: EventEmitter<{
+        breadcrumb: string;
+    }>;
+    get lastFocusableEl(): HTMLElement;
+    get focusOnOpenEl(): HTMLElement;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    debouncedCheckBreadcrumbOverflow: (this: any) => void;
+    checkBreadcrumbOverflow(): void;
+    handleOpenChange(newValue: boolean): void;
+    focusHeading(): Promise<void>;
+    handleKeyDown(ev: KeyboardEvent): void;
+    handleStartBookendFocus(): void;
+    handleEndBookendFocus(): void;
+    showFlyout(): void;
+    hideFlyout(): void;
+    renderBreadcrumbList(): any;
+    renderBreadcrumb(breadcrumbName: string, isLast: boolean): any;
+    renderHeader(): any;
+    renderFooter(): any;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -140,6 +140,19 @@ export namespace Components {
     interface WmFileList {
         "showInfo": "size" | "last-updated" | "uploaded-by" | "all" | "none";
     }
+    interface WmFlyout {
+        "breadcrumbs"?: string;
+        "elementToFocus": "primary" | "secondary" | string;
+        "eyebrow"?: string;
+        "flyoutWidth": string;
+        "focusHeading": () => Promise<void>;
+        "heading": string;
+        "infoText"?: string;
+        "open": boolean;
+        "primaryText"?: string;
+        "secondaryText"?: string;
+        "subheading"?: string;
+    }
     interface WmInput {
         "characterLimit"?: number;
         "disabled": boolean;
@@ -472,6 +485,10 @@ export interface WmFileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWmFileElement;
 }
+export interface WmFlyoutCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLWmFlyoutElement;
+}
 export interface WmInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLWmInputElement;
@@ -786,6 +803,26 @@ declare global {
         prototype: HTMLWmFileListElement;
         new (): HTMLWmFileListElement;
     };
+    interface HTMLWmFlyoutElementEventMap {
+        "wmFlyoutCloseTriggered": void;
+        "wmFlyoutPrimaryTriggered": void;
+        "wmFlyoutSecondaryTriggered": void;
+        "wmFlyoutBreadcrumbClicked": { breadcrumb: string };
+    }
+    interface HTMLWmFlyoutElement extends Components.WmFlyout, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLWmFlyoutElementEventMap>(type: K, listener: (this: HTMLWmFlyoutElement, ev: WmFlyoutCustomEvent<HTMLWmFlyoutElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLWmFlyoutElementEventMap>(type: K, listener: (this: HTMLWmFlyoutElement, ev: WmFlyoutCustomEvent<HTMLWmFlyoutElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLWmFlyoutElement: {
+        prototype: HTMLWmFlyoutElement;
+        new (): HTMLWmFlyoutElement;
+    };
     interface HTMLWmInputElementEventMap {
         "wmInputValueChanged": { value: string };
     }
@@ -1331,6 +1368,7 @@ declare global {
         "wm-datepicker": HTMLWmDatepickerElement;
         "wm-file": HTMLWmFileElement;
         "wm-file-list": HTMLWmFileListElement;
+        "wm-flyout": HTMLWmFlyoutElement;
         "wm-input": HTMLWmInputElement;
         "wm-line-chart": HTMLWmLineChartElement;
         "wm-menuitem": HTMLWmMenuitemElement;
@@ -1517,6 +1555,22 @@ declare namespace LocalJSX {
     interface WmFileList {
         "showInfo"?: "size" | "last-updated" | "uploaded-by" | "all" | "none";
     }
+    interface WmFlyout {
+        "breadcrumbs"?: string;
+        "elementToFocus"?: "primary" | "secondary" | string;
+        "eyebrow"?: string;
+        "flyoutWidth"?: string;
+        "heading": string;
+        "infoText"?: string;
+        "onWmFlyoutBreadcrumbClicked"?: (event: WmFlyoutCustomEvent<{ breadcrumb: string }>) => void;
+        "onWmFlyoutCloseTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
+        "onWmFlyoutPrimaryTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
+        "onWmFlyoutSecondaryTriggered"?: (event: WmFlyoutCustomEvent<void>) => void;
+        "open"?: boolean;
+        "primaryText"?: string;
+        "secondaryText"?: string;
+        "subheading"?: string;
+    }
     interface WmInput {
         "characterLimit"?: number;
         "disabled"?: boolean;
@@ -1888,6 +1942,7 @@ declare namespace LocalJSX {
         "wm-datepicker": WmDatepicker;
         "wm-file": WmFile;
         "wm-file-list": WmFileList;
+        "wm-flyout": WmFlyout;
         "wm-input": WmInput;
         "wm-line-chart": WmLineChart;
         "wm-menuitem": WmMenuitem;
@@ -1940,6 +1995,7 @@ declare module "@stencil/core" {
             "wm-datepicker": LocalJSX.WmDatepicker & JSXBase.HTMLAttributes<HTMLWmDatepickerElement>;
             "wm-file": LocalJSX.WmFile & JSXBase.HTMLAttributes<HTMLWmFileElement>;
             "wm-file-list": LocalJSX.WmFileList & JSXBase.HTMLAttributes<HTMLWmFileListElement>;
+            "wm-flyout": LocalJSX.WmFlyout & JSXBase.HTMLAttributes<HTMLWmFlyoutElement>;
             "wm-input": LocalJSX.WmInput & JSXBase.HTMLAttributes<HTMLWmInputElement>;
             "wm-line-chart": LocalJSX.WmLineChart & JSXBase.HTMLAttributes<HTMLWmLineChartElement>;
             "wm-menuitem": LocalJSX.WmMenuitem & JSXBase.HTMLAttributes<HTMLWmMenuitemElement>;

package/dist/types/global/functions.d.ts

@@ -35,6 +35,7 @@ export declare function checkForActiveElInShadow(element: HTMLElement): HTMLElem
 export declare function checkForFocusableElInShadow(element: HTMLElement): HTMLElement;
 export declare function isFocusable(element: any): boolean;
 export declare function getFirstFocusableDescendant(element: HTMLElement): HTMLElement | undefined;
+export declare function getLastFocusableDescendant(element: HTMLElement): HTMLElement | null;
 export declare function getAcceptedMimeTypesList(acceptedExtensions: string[]): any;
 export declare function snakeCaseToCamelCase(str: string): string;
 export declare function csvToArray(csv: string): string[];

package/package.json

@@ -1,17 +1,41 @@
 {
   "name": "@watermarkinsights/ripple",
-  "version": "5.13.0-alpha.3",
+  "version": "5.13.0-alpha.5",
   "description": "Ripple Component Library",
   "module": "dist/index.js",
   "main": "dist/index.cjs.js",
-  "unpkg": "dist/ripple/ripple.js",
   "types": "dist/types/components.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "files": [
     "dist/"
   ],
-  "es2017": "dist/esm/index.mjs",
-  "es2015": "dist/esm/index.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/ripple/ripple.esm.js",
+      "require": "./dist/ripple/ripple.cjs.js",
+      "types": "./dist/types/components.d.ts"
+    },
+    "./dist/components/*": {
+      "import": "./dist/components/*",
+      "types": "./dist/components/*"
+    },
+    "./dist/types/*": {
+      "types": "./dist/types/*"
+    },
+    "./dist/*": {
+      "import": "./dist/*",
+      "types": "./dist/*"
+    },
+    "./components/*": {
+      "import": "./dist/components/*.js",
+      "types": "./dist/components/*.d.ts"
+    },
+    "./loader": {
+      "import": "./loader/index.js",
+      "require": "./loader/index.cjs",
+      "types": "./loader/index.d.ts"
+    }
+  },
   "scripts": {
     "build": "stencil build",
     "release": "bash ./scripts/release.sh",
@@ -32,10 +56,10 @@
     "@axe-core/puppeteer": "^4.9.1",
     "@formatjs/cli": "^6.2.12",
     "@stencil/core": "^4.20.0",
-    "@stencil/react-output-target": "^0.5.3",
+    "@stencil/react-output-target": "^1.0.3",
     "@stencil/sass": "^3.0.12",
     "@types/jest": "^29.5.12",
     "jest": "^29.7.0"
   },
-  "gitHead": "cb64b2694a372b6d0cc84b5f8b280014d956b2aa"
+  "gitHead": "95f170adb9e105c5e2b185741c92bb73703d8554"
 }

package/dist/cjs/app-globals-DztnjEf7.js

@@ -1,92 +0,0 @@
-'use strict';
-
-require('./index-Cig4P4gJ.js');
-
-const version = "5.13.0-alpha.2";
-
-// 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);
-const globalFn = () => { };
-
-const globalScripts = globalFn;
-
-exports.globalScripts = globalScripts;