@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -1,119 +1,119 @@
 import { h, Host } from "@stencil/core";
 import { intl, showTooltip, hideTooltip } from "../../global/functions";
 export class NavigationHamburger {
-  constructor() {
-    this.showNavMessage = intl.formatMessage({
-      id: "navigation.showNavigation",
-      defaultMessage: "Show navigation",
-      description: "For user interface element opening a navigation menu",
-    });
-    this.navId = undefined;
-    this.isTabbing = false;
-    this.open = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  // this also works on initial load because event is fired then
-  handleNavigationStateChanged(ev) {
-    this.open = ev.target.open;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
+    constructor() {
+        this.showNavMessage = intl.formatMessage({
+            id: "navigation.showNavigation",
+            defaultMessage: "Show navigation",
+            description: "For user interface element opening a navigation menu",
+        });
+        this.navId = undefined;
+        this.isTabbing = false;
+        this.open = false;
     }
-    if (!this.navId) {
-      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    toggleTabbingOn() {
+        this.isTabbing = true;
     }
-  }
-  handleClick() {
-    hideTooltip();
-    this.wmNavigationHamburgerClicked.emit();
-  }
-  render() {
-    return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
-  }
-  static get is() { return "wm-navigation-hamburger"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-navigation-hamburger.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-navigation-hamburger.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "navId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "nav-id",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {},
-      "open": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmNavigationHamburgerClicked",
-        "name": "wmNavigationHamburgerClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    // this also works on initial load because event is fired then
+    handleNavigationStateChanged(ev) {
+        this.open = ev.target.open;
+    }
+    componentWillLoad() {
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
+        }
+        if (!this.navId) {
+            console.error("wm-navigation-hamburger: nav-id is a required prop");
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmNavigationStateChanged",
-        "method": "handleNavigationStateChanged",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    handleClick() {
+        hideTooltip();
+        this.wmNavigationHamburgerClicked.emit();
+    }
+    render() {
+        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { class: this.isTabbing ? "user-is-tabbing" : undefined, "aria-expanded": this.open, "aria-controls": this.navId, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { class: "icon" }))));
+    }
+    static get is() { return "wm-navigation-hamburger"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-navigation-hamburger.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-navigation-hamburger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "navId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "nav-id",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {},
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNavigationHamburgerClicked",
+                "name": "wmNavigationHamburgerClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmNavigationStateChanged",
+                "method": "handleNavigationStateChanged",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -1,130 +1,130 @@
 import { h, Host } from "@stencil/core";
 export class NavigationItem {
-  constructor() {
-    this.href = undefined;
-    this.text = undefined;
-    this.active = undefined;
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
+    constructor() {
+        this.href = undefined;
+        this.text = undefined;
+        this.active = undefined;
+        this.isTabbing = false;
     }
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
-  }
-  static get is() { return "wm-navigation-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-navigation-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-navigation-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "text",
-        "reflect": false
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "active",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isTabbing": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmNavigationItemClicked",
-        "name": "wmNavigationItemClicked",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
+    toggleTabbingOn() {
+        this.isTabbing = true;
+    }
+    toggleTabbingOff() {
+        this.isTabbing = false;
+    }
+    componentWillLoad() {
+        if (document.body.classList.contains("wmcl-user-is-tabbing")) {
+            this.toggleTabbingOn();
         }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "wmUserIsTabbing",
-        "method": "toggleTabbingOn",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "wmUserIsNotTabbing",
-        "method": "toggleTabbingOff",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
+    }
+    render() {
+        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
+    }
+    static get is() { return "wm-navigation-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["wm-navigation-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["wm-navigation-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "href",
+                "reflect": false
+            },
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "text",
+                "reflect": false
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "active",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isTabbing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "wmNavigationItemClicked",
+                "name": "wmNavigationItemClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "wmUserIsTabbing",
+                "method": "toggleTabbingOn",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "wmUserIsNotTabbing",
+                "method": "toggleTabbingOff",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

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

@@ -93,14 +93,12 @@
     justify-content: center;
     align-items: center;
   }
-
   :host([aria-expanded=true]) .tray {
     transform: translateX(0);
   }
   :host([aria-expanded=true]) .tray ul {
     visibility: visible;
   }
-
   .overlay {
     width: 100vw;
     height: 100vh;