@watermarkinsights/ripple 3.8.0-2 → 3.8.0-3

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

@@ -1,85 +0,0 @@
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   6. Button Hover
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
-/********************************************************************************************/
-/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
-/********************************************************************************************/
-/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
-/* TODO: replace with vars above whenever possible */
-/* Buttons */
-/* VIA */
-.link {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  color: inherit;
-  text-decoration: none;
-  min-height: 4.5rem;
-  text-align: center;
-  padding: 1.25rem 0.5rem;
-  font-weight: 500;
-  outline: none;
-  position: relative;
-}
-.link:hover {
-  background-color: #f2f2f2;
-}
-.link .icon {
-  font-size: 1.375rem;
-  color: #6b6b6b;
-}
-.link .text {
-  font-size: 0.875rem;
-}
-.link.user-is-tabbing:focus {
-  box-shadow: inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;
-}
-
-.link.active {
-  background-color: #e9e7ec;
-}
-.link.active:before {
-  content: "";
-  background-color: #575195;
-  position: absolute;
-  height: 100%;
-  width: 5px;
-  left: 0;
-}
-.link.active .text {
-  color: #575195;
-}
-.link.active .icon {
-  color: #575195;
-}

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

@@ -1,101 +0,0 @@
-import { h, Component, Prop, Host, State, Listen } from "@stencil/core";
-export class NavigationItem {
-  constructor() {
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  render() {
-    return (h(Host, { role: "listitem" },
-      h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href },
-        h("div", { class: "icon" },
-          h("slot", null)),
-        h("div", { class: "text" }, this.text))));
-  }
-  static get is() { return "wm-navigation-item"; }
-  static get encapsulation() { return "shadow"; }
-  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 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

@@ -1,117 +0,0 @@
-/* --------------------------------------
-   1. Box-shadow
-   -------------------------------------- */
-/* --------------------------------------
-   2. Border-radius
-   -------------------------------------- */
-/* --------------------------------------
-   3. Transforms
-   -------------------------------------- */
-/* --------------------------------------
-   4. Button Focus
-   -------------------------------------- */
-/* --------------------------------------
-   5. Flex
-   -------------------------------------- */
-/* --------------------------------------
-   6. Button Hover
-   -------------------------------------- */
-/* --------------------------------------
-   7. Screen Reader Only
-   -------------------------------------- */
-/* --------------------------------------
-   8. Label styles
-   this mixin includes all the styles for the label
-   + flex rules on the parent container to switch between top and left position
-   + srOnly when label is hidden
-   Assumes the following markup:
-   div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
-   .wrapper is for the flex rules
-   .label-wrapper is to set the height of the label when positioned left so it's the same height as
-   the input. It can't be done directly on .label because of possible line wrapping.
-   When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
-   (they can't be aligned on the baseline because of possible description text and error message)
-   -------------------------------------- */
-/********************************************************************************************/
-/* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
-/********************************************************************************************/
-/* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
-/* TODO: replace with vars above whenever possible */
-/* Buttons */
-/* VIA */
-.nav {
-  -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
-  -moz-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
-  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.14);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 7.5625rem;
-  background-color: #fff;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  font-size: 0.875rem;
-  height: 100%;
-  z-index: 10;
-}
-
-.navlist {
-  margin: 0;
-  padding: 0;
-}
-
-.toggle-wrapper {
-  display: none;
-}
-
-/* COLLAPSIBLE STYLES */
-@media screen and (max-width: 1023px) {
-  .nav {
-    -ms-transition: transform 0.33s ease;
-    -webkit-transition: transform 0.33s ease;
-    -moz-transition: transform 0.33s ease;
-    transition: transform 0.33s ease;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 100;
-    transform: translateX(-100%);
-  }
-  .nav ul {
-    visibility: hidden;
-  }
-  .nav[aria-expanded=true] {
-    transform: translateX(0);
-  }
-  .nav[aria-expanded=true] ul {
-    visibility: visible;
-  }
-  .nav .toggle-wrapper {
-    display: inline-block;
-    min-height: 5rem;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .overlay {
-    width: 100vw;
-    height: 100vh;
-    max-width: none;
-    max-height: none;
-    position: fixed !important;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transform: translate(0%, 0%);
-    background-color: rgba(25, 25, 25, 0.4);
-    -ms-transition: opacity 0.5s ease-out;
-    -webkit-transition: opacity 0.5s ease-out;
-    -moz-transition: opacity 0.5s ease-out;
-    transition: opacity 0.5s ease-out;
-  }
-}

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

@@ -1,142 +0,0 @@
-import { h, Component, Element, Prop, State, Listen, Host, Watch, Event } from "@stencil/core";
-import { intl } from "../../global/functions";
-export class Navigation {
-  constructor() {
-    this.open = false;
-    this.isTabbing = false;
-    this.openTooltipMessage = intl.formatMessage({
-      id: "global.openVerb",
-      defaultMessage: "Open",
-      description: "For a button, to open a user interface element",
-    });
-    this.closeTooltipMessage = intl.formatMessage({
-      id: "global.closeVerb",
-      defaultMessage: "Close",
-      description: "For a button, to close a user interface element",
-    });
-  }
-  get ariaExpanded() {
-    return window.innerWidth < 1024
-      ? // if component is in collapsible mode, set aria-expanded according to expanded state
-        this.open.toString()
-      : // otherwise, do not render attr at all
-        undefined;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    this.el.focus = function () {
-      this.shadowRoot.querySelector(".toggle").focus();
-      /*
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-       */
-    };
-  }
-  componentDidLoad() {
-    // Should fail silently if not found as devs may decide not to use the hamburger component.
-    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-  }
-  updateHamburgerState() {
-    this.wmNavigationStateChanged.emit({ open: this.open });
-    if (this.open) {
-      // wait for nav to be expanded otherwise tooltip will be misplaced.
-      // also btn can't be focused right away.
-      setTimeout(() => this.toggleEl.focus(), 250);
-    }
-    else {
-      // should fail silently if el doesn't exist
-      this.hamburgerBtn && this.hamburgerBtn.focus();
-    }
-  }
-  renderOverlay() {
-    return (h("div", { class: "overlay", onClick: () => {
-        this.open = false;
-      } }));
-  }
-  render() {
-    return (h(Host, null,
-      this.open ? this.renderOverlay() : "",
-      h("nav", { class: "nav", "aria-expanded": this.ariaExpanded },
-        h("div", { class: "toggle-wrapper" },
-          h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
-              this.open = !this.open;
-            } })),
-        h("ul", { class: "navlist" },
-          h("slot", null)))));
-  }
-  static get is() { return "wm-navigation"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["wm-navigation.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["wm-navigation.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "isTabbing": {}
-  }; }
-  static get events() { return [{
-      "method": "wmNavigationStateChanged",
-      "name": "wmNavigationStateChanged",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "updateHamburgerState"
-    }]; }
-  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/esm/wm-navigation-hamburger.entry.js

@@ -1,52 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-cd8f9ae2.js';
-
-const wmNavigationHamburgerCss = ":host{width:3.75rem;height:3.75rem}button{width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.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}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon: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:\"\\f35c\";font-size:1.5rem;color:#575195}@media screen and (min-width: 1024px){button{display:none}}";
-
-let NavigationHamburger = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isTabbing = false;
-    this.open = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleNavigationStateChanged(ev) {
-    this.open = ev.detail.open;
-  }
-  componentWillLoad() {
-    this.el.focus = function () {
-      // if (!this.disabled) {
-      this.shadowRoot.querySelector("button").focus();
-      /*
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-       */
-      // }
-    };
-    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");
-    }
-  }
-  componentDidLoad() {
-    this.nav = document.getElementById(this.navId);
-    if (!this.nav) {
-      console.error(`wm-navigation-hamburger: wm-navigation with id ${this.navId} was not found`);
-    }
-  }
-  render() {
-    return (h("button", { class: `${this.isTabbing ? "user-is-tabbing" : ""}`, "aria-expanded": this.open, "aria-controls": this.navId, onClick: () => (this.nav.open = !this.nav.open) }, h("span", { class: "icon" })));
-  }
-  get el() { return getElement(this); }
-};
-NavigationHamburger.style = wmNavigationHamburgerCss;
-
-export { NavigationHamburger as wm_navigation_hamburger };

package/dist/esm/wm-navigation-item.entry.js

@@ -1,27 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-cd8f9ae2.js';
-
-const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:\"\";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}";
-
-let NavigationItem = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.isTabbing = false;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""} ${this.isTabbing ? "user-is-tabbing" : ""}`, href: this.href }, h("div", { class: "icon" }, h("slot", null)), h("div", { class: "text" }, this.text))));
-  }
-};
-NavigationItem.style = wmNavigationItemCss;
-
-export { NavigationItem as wm_navigation_item };

package/dist/esm/wm-navigation.entry.js

@@ -1,83 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-cd8f9ae2.js';
-import { i as intl } from './functions-6cd52dcf.js';
-
-const wmNavigationCss = ".nav{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%;z-index:10}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.nav{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;z-index:100;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.nav ul{visibility:hidden}.nav[aria-expanded=true]{-webkit-transform:translateX(0);transform:translateX(0)}.nav[aria-expanded=true] ul{visibility:visible}.nav .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
-
-let Navigation = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmNavigationStateChanged = createEvent(this, "wmNavigationStateChanged", 7);
-    this.open = false;
-    this.isTabbing = false;
-    this.openTooltipMessage = intl.formatMessage({
-      id: "global.openVerb",
-      defaultMessage: "Open",
-      description: "For a button, to open a user interface element",
-    });
-    this.closeTooltipMessage = intl.formatMessage({
-      id: "global.closeVerb",
-      defaultMessage: "Close",
-      description: "For a button, to close a user interface element",
-    });
-  }
-  get ariaExpanded() {
-    return window.innerWidth < 1024
-      ? // if component is in collapsible mode, set aria-expanded according to expanded state
-        this.open.toString()
-      : // otherwise, do not render attr at all
-        undefined;
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  componentWillLoad() {
-    if (document.body.classList.contains("wmcl-user-is-tabbing")) {
-      this.toggleTabbingOn();
-    }
-    this.el.focus = function () {
-      this.shadowRoot.querySelector(".toggle").focus();
-      /*
-      // prevent tooltip from showing on programmatic focus
-      requestAnimationFrame(() => {
-        this.tooltipVisible = false;
-      });
-       */
-    };
-  }
-  componentDidLoad() {
-    // Should fail silently if not found as devs may decide not to use the hamburger component.
-    this.hamburgerBtn = document.querySelector("wm-navigation-hamburger");
-  }
-  updateHamburgerState() {
-    this.wmNavigationStateChanged.emit({ open: this.open });
-    if (this.open) {
-      // wait for nav to be expanded otherwise tooltip will be misplaced.
-      // also btn can't be focused right away.
-      setTimeout(() => this.toggleEl.focus(), 250);
-    }
-    else {
-      // should fail silently if el doesn't exist
-      this.hamburgerBtn && this.hamburgerBtn.focus();
-    }
-  }
-  renderOverlay() {
-    return (h("div", { class: "overlay", onClick: () => {
-        this.open = false;
-      } }));
-  }
-  render() {
-    return (h(Host, null, this.open ? this.renderOverlay() : "", h("nav", { class: "nav", "aria-expanded": this.ariaExpanded }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: `toggle ${this.isTabbing ? "user-is-tabbing" : ""}`, "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? this.closeTooltipMessage : this.openTooltipMessage, "tooltip-position": "left", tabIndex: this.open ? undefined : -1, onClick: () => {
-        this.open = !this.open;
-      } })), h("ul", { class: "navlist" }, h("slot", null)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["updateHamburgerState"]
-  }; }
-};
-Navigation.style = wmNavigationCss;
-
-export { Navigation as wm_navigation };