@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/collection/components/wm-modal/wm-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-modal.js","sourceRoot":"","sources":["../../../../src/components/wm-modal/wm-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Listen, Host, Prop, Watch, Event, EventEmitter, Method } from \"@stencil/core\";\nimport { checkForActiveElInShadow } from \"../../global/functions\";\nimport { generateId } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-modal\",\n  styleUrl: \"wm-modal.scss\",\n})\nexport class Modal {\n  @Element() el!: HTMLWmModalElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true, mutable: true }) isOpen: boolean = false; // DEPRECATED in favor of open\n  get tempOpen() {\n    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out\n    return this.open || this.isOpen;\n  }\n  @Prop({ mutable: true }) elementToFocus: \"primary\" | \"secondary\" | string = \"\"; // primary and secondary point to the corresponding buttons, otherwise focus based on element id\n  @Prop({ reflect: true }) modalType: \"modal\" | \"dialog\" | null = null;\n  @Prop({ reflect: true }) isTypeDialog: boolean | null = null;\n  get tempModalType() {\n    return this.modalType ? this.modalType : this.isTypeDialog ? \"dialog\" : \"modal\";\n  }\n  @Prop({ mutable: true, reflect: true }) uid!: string;\n  private focusOnCloseEl!: HTMLElement;\n  private overlayEl!: HTMLDivElement;\n  private bodyFocusListener: () => void = () => this.redirectFocusFromBody();\n\n  @Event({ bubbles: false }) focusLastElement!: EventEmitter;\n  @Event({ bubbles: false }) focusFirstElement!: EventEmitter;\n  // wmModalCloseTriggered does not bubble, prevent nested modals from closing all at once\n  @Event({ bubbles: false }) wmModalCloseTriggered!: EventEmitter;\n  @Event() wmCloseTriggered!: EventEmitter; // deprecated in favor of wmModalCloseTriggered\n  @Event() wmModalPrimaryTriggered!: EventEmitter;\n  @Event() wmPrimaryTriggered!: EventEmitter; // deprecated in favor of wmModalPrimaryTriggered\n  @Event() wmModalSecondaryTriggered!: EventEmitter;\n  @Event() wmSecondaryTriggered!: EventEmitter; // deprecated in favor of wmModalSecondaryTriggered\n\n  get focusOnOpenEl(): HTMLElement {\n    let customElementToFocus: HTMLElement | null = null;\n\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\n      customElementToFocus = this.el.querySelector<HTMLElement>(`#wm-${this.elementToFocus}-${this.uid}`);\n    } else if (this.elementToFocus) {\n      customElementToFocus = this.el.querySelector<HTMLElement>(\"#\" + this.elementToFocus);\n      !customElementToFocus &&\n        console.warn(\n          \"Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.\"\n        );\n    }\n\n    const closeButtonEl = this.el.querySelector<HTMLElement>(`#wm-modal-close-${this.uid}`)!;\n    return customElementToFocus ? customElementToFocus : closeButtonEl;\n  }\n\n  //App can open modal by toggling the prop\n  @Watch(\"open\")\n  @Watch(\"isOpen\")\n  toggleModal() {\n    this.tempOpen ? this.showModal() : this.hideModal();\n  }\n\n  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:\n  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.\n  // @Listen(\"wmShowModal\", { target: \"window\" })\n  // doesEventMatchId(ev: CustomEvent) {\n  //   ev.detail === this.uid && this.showModal();\n  // }\n\n  @Listen(\"click\")\n  handleClick(ev: MouseEvent & { target: HTMLElement }) {\n    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpenEl.focus();\n  }\n\n  @Listen(\"keydown\")\n  closeModalOnEscape(ev: KeyboardEvent) {\n    if (ev.key === \"Escape\") {\n      // stops propagation prevents nested modal from closing all at once\n      ev.stopPropagation();\n      this.wmModalCloseTriggered.emit();\n      this.wmCloseTriggered.emit(); // deprecated\n      this.open = false;\n    }\n  }\n\n  showModal() {\n    this.setAriaDescribedbyOnModal();\n    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes\n    document.body.style.overflow = \"hidden\"; //Keeps the page below the modal from scrolling\n\n    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios\n    document.body.tabIndex = 0;\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\n    document.body.addEventListener(\"focus\", this.bodyFocusListener, true);\n\n    window.requestAnimationFrame(() => {\n      // nested requestAnimationFrames allow all elements to become visible on page before assigning focus\n      window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal\n    });\n  }\n\n  //Close the modal and focus the triggering element when the modal buttons emit their events\n  hideModal() {\n    document.body.style.overflow = \"visible\";\n    document.body.tabIndex = -1;\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\n    window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus\n  }\n\n  componentWillLoad() {\n    if (this.isOpen) {\n      console.warn(\"wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.\");\n    }\n    if (this.isTypeDialog) {\n      console.warn(\"wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.\");\n    }\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\n      if (!this.el.id) {\n        console.error(\n          \"You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.\"\n        );\n      }\n    }\n\n    this.el.focus = () => {\n      this.focusOnOpenEl.focus();\n    };\n\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  componentDidLoad() {\n    if (this.tempOpen) {\n      this.showModal();\n    }\n  }\n\n  @Method()\n  async emitCloseEvent() {\n    this.wmModalCloseTriggered.emit();\n    this.wmCloseTriggered.emit(); // deprecated\n  }\n\n  @Method()\n  async emitPrimaryEvent() {\n    this.wmModalPrimaryTriggered.emit();\n    this.wmPrimaryTriggered.emit(); // deprecated\n  }\n\n  @Method()\n  async emitSecondaryEvent() {\n    this.wmModalSecondaryTriggered.emit();\n    this.wmSecondaryTriggered.emit(); // deprecated\n  }\n\n  setAriaDescribedbyOnModal() {\n    const modalBody = document.getElementById(`content-${this.uid}`);\n\n    if (!modalBody) {\n      console.warn(\n        \"Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.\"\n      );\n    } else {\n      this.el.setAttribute(\"aria-describedby\", `wm-modal-heading-text-${this.uid} content-${this.uid}`);\n    }\n  }\n\n  setElToFocusOnClose() {\n    const elToFocus = document.activeElement as HTMLElement;\n    if (elToFocus.tagName === \"WM-MENUITEM\") {\n      this.focusOnCloseEl = elToFocus.parentElement!;\n    } else {\n      this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);\n    }\n  }\n\n  redirectFocusFromBody() {\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\") {\n      this.focusOnOpenEl.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`${this.tempOpen ? \"\" : \"hide \"}${\"wm-\" + this.tempModalType}`}\n        role=\"dialog\"\n        aria-describedby={`wm-modal-heading-text-${this.uid}`}\n        aria-modal=\"true\"\n        tabindex={this.tempOpen ? 0 : null}\n        onFocus={() => {\n          this.focusLastElement.emit();\n        }}\n      >\n        <div class=\"overlay\" ref={(el) => (this.overlayEl = el as HTMLDivElement)} />\n        <div\n          class=\"sr-only\"\n          tabIndex={0}\n          onFocus={() => {\n            this.focusFirstElement.emit();\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"wm-modal.js","sourceRoot":"","sources":["../../../../src/components/wm-modal/wm-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Listen, Host, Prop, Watch, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport { checkForActiveElInShadow } from \"../../global/functions\";\r\nimport { generateId } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-modal\",\r\n  styleUrl: \"wm-modal.scss\",\r\n})\r\nexport class Modal {\r\n  @Element() el!: HTMLWmModalElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true, mutable: true }) isOpen: boolean = false; // DEPRECATED in favor of open\r\n  get tempOpen() {\r\n    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out\r\n    return this.open || this.isOpen;\r\n  }\r\n  @Prop({ mutable: true }) elementToFocus: \"primary\" | \"secondary\" | string = \"\"; // primary and secondary point to the corresponding buttons, otherwise focus based on element id\r\n  @Prop({ reflect: true }) modalType: \"modal\" | \"dialog\" | null = null;\r\n  @Prop({ reflect: true }) isTypeDialog: boolean | null = null;\r\n  get tempModalType() {\r\n    return this.modalType ? this.modalType : this.isTypeDialog ? \"dialog\" : \"modal\";\r\n  }\r\n  @Prop({ mutable: true, reflect: true }) uid!: string;\r\n  private focusOnCloseEl!: HTMLElement;\r\n  private overlayEl!: HTMLDivElement;\r\n  private bodyFocusListener: () => void = () => this.redirectFocusFromBody();\r\n\r\n  @Event({ bubbles: false }) focusLastElement!: EventEmitter;\r\n  @Event({ bubbles: false }) focusFirstElement!: EventEmitter;\r\n  // wmModalCloseTriggered does not bubble, prevent nested modals from closing all at once\r\n  @Event({ bubbles: false }) wmModalCloseTriggered!: EventEmitter;\r\n  @Event() wmCloseTriggered!: EventEmitter; // deprecated in favor of wmModalCloseTriggered\r\n  @Event() wmModalPrimaryTriggered!: EventEmitter;\r\n  @Event() wmPrimaryTriggered!: EventEmitter; // deprecated in favor of wmModalPrimaryTriggered\r\n  @Event() wmModalSecondaryTriggered!: EventEmitter;\r\n  @Event() wmSecondaryTriggered!: EventEmitter; // deprecated in favor of wmModalSecondaryTriggered\r\n\r\n  get focusOnOpenEl(): HTMLElement {\r\n    let customElementToFocus: HTMLElement | null = null;\r\n\r\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\r\n      customElementToFocus = this.el.querySelector<HTMLElement>(`#wm-${this.elementToFocus}-${this.uid}`);\r\n    } else if (this.elementToFocus) {\r\n      customElementToFocus = this.el.querySelector<HTMLElement>(\"#\" + this.elementToFocus);\r\n      !customElementToFocus &&\r\n        console.warn(\r\n          \"Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.\"\r\n        );\r\n    }\r\n\r\n    const closeButtonEl = this.el.querySelector<HTMLElement>(`#wm-modal-close-${this.uid}`)!;\r\n    return customElementToFocus ? customElementToFocus : closeButtonEl;\r\n  }\r\n\r\n  //App can open modal by toggling the prop\r\n  @Watch(\"open\")\r\n  @Watch(\"isOpen\")\r\n  toggleModal() {\r\n    this.tempOpen ? this.showModal() : this.hideModal();\r\n  }\r\n\r\n  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:\r\n  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.\r\n  // @Listen(\"wmShowModal\", { target: \"window\" })\r\n  // doesEventMatchId(ev: CustomEvent) {\r\n  //   ev.detail === this.uid && this.showModal();\r\n  // }\r\n\r\n  @Listen(\"click\")\r\n  handleClick(ev: MouseEvent & { target: HTMLElement }) {\r\n    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpenEl.focus();\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  closeModalOnEscape(ev: KeyboardEvent) {\r\n    if (ev.key === \"Escape\") {\r\n      // stops propagation prevents nested modal from closing all at once\r\n      ev.stopPropagation();\r\n      this.wmModalCloseTriggered.emit();\r\n      this.wmCloseTriggered.emit(); // deprecated\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  showModal() {\r\n    this.setAriaDescribedbyOnModal();\r\n    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes\r\n    document.body.style.overflow = \"hidden\"; //Keeps the page below the modal from scrolling\r\n\r\n    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios\r\n    document.body.tabIndex = 0;\r\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\r\n    document.body.addEventListener(\"focus\", this.bodyFocusListener, true);\r\n\r\n    window.requestAnimationFrame(() => {\r\n      // nested requestAnimationFrames allow all elements to become visible on page before assigning focus\r\n      window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal\r\n    });\r\n  }\r\n\r\n  //Close the modal and focus the triggering element when the modal buttons emit their events\r\n  hideModal() {\r\n    document.body.style.overflow = \"visible\";\r\n    document.body.tabIndex = -1;\r\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\r\n    window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.isOpen) {\r\n      console.warn(\"wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.\");\r\n    }\r\n    if (this.isTypeDialog) {\r\n      console.warn(\"wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.\");\r\n    }\r\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\r\n      if (!this.el.id) {\r\n        console.error(\r\n          \"You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.\"\r\n        );\r\n      }\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      this.focusOnOpenEl.focus();\r\n    };\r\n\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.tempOpen) {\r\n      this.showModal();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async emitCloseEvent() {\r\n    this.wmModalCloseTriggered.emit();\r\n    this.wmCloseTriggered.emit(); // deprecated\r\n  }\r\n\r\n  @Method()\r\n  async emitPrimaryEvent() {\r\n    this.wmModalPrimaryTriggered.emit();\r\n    this.wmPrimaryTriggered.emit(); // deprecated\r\n  }\r\n\r\n  @Method()\r\n  async emitSecondaryEvent() {\r\n    this.wmModalSecondaryTriggered.emit();\r\n    this.wmSecondaryTriggered.emit(); // deprecated\r\n  }\r\n\r\n  setAriaDescribedbyOnModal() {\r\n    const modalBody = document.getElementById(`content-${this.uid}`);\r\n\r\n    if (!modalBody) {\r\n      console.warn(\r\n        \"Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.\"\r\n      );\r\n    } else {\r\n      this.el.setAttribute(\"aria-describedby\", `wm-modal-heading-text-${this.uid} content-${this.uid}`);\r\n    }\r\n  }\r\n\r\n  setElToFocusOnClose() {\r\n    const elToFocus = document.activeElement as HTMLElement;\r\n    if (elToFocus.tagName === \"WM-MENUITEM\") {\r\n      this.focusOnCloseEl = elToFocus.parentElement!;\r\n    } else {\r\n      this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);\r\n    }\r\n  }\r\n\r\n  redirectFocusFromBody() {\r\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\") {\r\n      this.focusOnOpenEl.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={`${this.tempOpen ? \"\" : \"hide \"}${\"wm-\" + this.tempModalType}`}\r\n        role=\"dialog\"\r\n        aria-describedby={`wm-modal-heading-text-${this.uid}`}\r\n        aria-modal=\"true\"\r\n        tabindex={this.tempOpen ? 0 : null}\r\n        onFocus={() => {\r\n          this.focusLastElement.emit();\r\n        }}\r\n      >\r\n        <div class=\"overlay\" ref={(el) => (this.overlayEl = el as HTMLDivElement)} />\r\n        <div\r\n          class=\"sr-only\"\r\n          tabIndex={0}\r\n          onFocus={() => {\r\n            this.focusFirstElement.emit();\r\n          }}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,177 +1,177 @@
-import { h, Host } from "@stencil/core";
-import { intl } 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.tooltipVisible = false;
-    this.isTabbing = false;
-    this.open = false;
-  }
-  get tooltipEl() {
-    return document.getElementById("wm-tooltip");
-  }
-  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();
-    }
-    if (!this.navId) {
-      console.error("wm-navigation-hamburger: nav-id is a required prop");
-    }
-  }
-  showTooltip() {
-    const tooltipText = this.showNavMessage;
-    this.tooltipEl.textContent = tooltipText;
-    this.tooltipEl.style.setProperty("--wmTooltipTop", "1.125rem");
-    this.tooltipEl.style.setProperty("--wmTooltipLeft", "2.75rem");
-    this.tooltipEl.style.transitionDelay = "500ms";
-    this.tooltipEl.style.opacity = "1";
-    // tooltip only has a maxWidth if it contains whitespace and can break
-    const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
-    if (hasNoWhitespace) {
-      this.tooltipEl.classList.add("single-word");
-      this.tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
-    }
-    else {
-      this.tooltipEl.classList.remove("single-word");
-      this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
-    }
-    // tooltip is only visible after the transition delay.
-    // This also fixes an issue for keyboard users:
-    // if they tab to a button out of screen bounds, the page scrolls
-    // and hideTooltip() would be triggered before the tooltip would show
-    setTimeout(() => {
-      this.tooltipVisible = true;
-    }, 500);
-  }
-  hideTooltip() {
-    this.tooltipEl.style.transitionDelay = "0s";
-    this.tooltipEl.style.opacity = "0";
-    this.tooltipVisible = false;
-  }
-  showTooltipForKeyboardUsers() {
-    if (this.isTabbing) {
-      this.showTooltip();
-    }
-  }
-  handleClick() {
-    this.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: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.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
-      },
-      "tooltipVisible": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tooltip-visible",
-        "reflect": false,
-        "defaultValue": "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
-      }];
-  }
-}
-//# sourceMappingURL=wm-navigation-hamburger.js.map
+import { h, Host } from "@stencil/core";
+import { intl } 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.tooltipVisible = false;
+    this.isTabbing = false;
+    this.open = false;
+  }
+  get tooltipEl() {
+    return document.getElementById("wm-tooltip");
+  }
+  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();
+    }
+    if (!this.navId) {
+      console.error("wm-navigation-hamburger: nav-id is a required prop");
+    }
+  }
+  showTooltip() {
+    const tooltipText = this.showNavMessage;
+    this.tooltipEl.textContent = tooltipText;
+    this.tooltipEl.style.setProperty("--wmTooltipTop", "1.125rem");
+    this.tooltipEl.style.setProperty("--wmTooltipLeft", "2.75rem");
+    this.tooltipEl.style.transitionDelay = "500ms";
+    this.tooltipEl.style.opacity = "1";
+    // tooltip only has a maxWidth if it contains whitespace and can break
+    const hasNoWhitespace = tooltipText.match(/^[^\s]+$/);
+    if (hasNoWhitespace) {
+      this.tooltipEl.classList.add("single-word");
+      this.tooltipEl.style.setProperty("--wmTooltipMaxWidth", "none");
+    }
+    else {
+      this.tooltipEl.classList.remove("single-word");
+      this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth");
+    }
+    // tooltip is only visible after the transition delay.
+    // This also fixes an issue for keyboard users:
+    // if they tab to a button out of screen bounds, the page scrolls
+    // and hideTooltip() would be triggered before the tooltip would show
+    setTimeout(() => {
+      this.tooltipVisible = true;
+    }, 500);
+  }
+  hideTooltip() {
+    this.tooltipEl.style.transitionDelay = "0s";
+    this.tooltipEl.style.opacity = "0";
+    this.tooltipVisible = false;
+  }
+  showTooltipForKeyboardUsers() {
+    if (this.isTabbing) {
+      this.showTooltip();
+    }
+  }
+  handleClick() {
+    this.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: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltipForKeyboardUsers(), onBlur: () => this.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
+      },
+      "tooltipVisible": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "tooltip-visible",
+        "reflect": false,
+        "defaultValue": "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
+      }];
+  }
+}
+//# sourceMappingURL=wm-navigation-hamburger.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"wm-navigation-hamburger.js","sourceRoot":"","sources":["../../../../src/components/wm-navigation/wm-navigation-hamburger.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation-hamburger\",\n  styleUrl: \"wm-navigation-hamburger.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationHamburger {\n  @Element() el!: HTMLWmNavigationHamburgerElement;\n  nav!: HTMLWmNavigationElement;\n\n  @Prop() navId?: string;\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\n\n  @State() isTabbing?: boolean = false;\n  @State() open: boolean = false;\n\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\n\n  showNavMessage = intl.formatMessage({\n    id: \"navigation.showNavigation\",\n    defaultMessage: \"Show navigation\",\n    description: \"For user interface element opening a navigation menu\",\n  });\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  // this also works on initial load because event is fired then\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\n  handleNavigationStateChanged(ev: CustomEvent) {\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n    if (!this.navId) {\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\n    }\n  }\n\n  showTooltip() {\n    const tooltipText = this.showNavMessage;\n    this.tooltipEl.textContent = tooltipText;\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\n    this.tooltipEl.style.transitionDelay = \"500ms\";\n    this.tooltipEl.style.opacity = \"1\";\n\n    // tooltip only has a maxWidth if it contains whitespace and can break\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\n    if (hasNoWhitespace) {\n      this.tooltipEl.classList.add(\"single-word\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n    } else {\n      this.tooltipEl.classList.remove(\"single-word\");\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n    }\n\n    // tooltip is only visible after the transition delay.\n    // This also fixes an issue for keyboard users:\n    // if they tab to a button out of screen bounds, the page scrolls\n    // and hideTooltip() would be triggered before the tooltip would show\n    setTimeout(() => {\n      this.tooltipVisible = true;\n    }, 500);\n  }\n\n  hideTooltip() {\n    this.tooltipEl.style.transitionDelay = \"0s\";\n    this.tooltipEl.style.opacity = \"0\";\n    this.tooltipVisible = false;\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  handleClick() {\n    this.hideTooltip();\n    this.wmNavigationHamburgerClicked.emit();\n  }\n\n  render() {\n    return (\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\n        <button\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\n          aria-expanded={this.open}\n          aria-controls={this.navId}\n          aria-label={this.showNavMessage}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.handleClick()}\n        >\n          <span class=\"icon\"></span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"wm-navigation-hamburger.js","sourceRoot":"","sources":["../../../../src/components/wm-navigation/wm-navigation-hamburger.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-hamburger\",\r\n  styleUrl: \"wm-navigation-hamburger.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationHamburger {\r\n  @Element() el!: HTMLWmNavigationHamburgerElement;\r\n  nav!: HTMLWmNavigationElement;\r\n\r\n  @Prop() navId?: string;\r\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @State() open: boolean = false;\r\n\r\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\r\n\r\n  showNavMessage = intl.formatMessage({\r\n    id: \"navigation.showNavigation\",\r\n    defaultMessage: \"Show navigation\",\r\n    description: \"For user interface element opening a navigation menu\",\r\n  });\r\n\r\n  get tooltipEl(): HTMLElement {\r\n    return document.getElementById(\"wm-tooltip\")!;\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  // this also works on initial load because event is fired then\r\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\r\n  handleNavigationStateChanged(ev: CustomEvent) {\r\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n    if (!this.navId) {\r\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\r\n    }\r\n  }\r\n\r\n  showTooltip() {\r\n    const tooltipText = this.showNavMessage;\r\n    this.tooltipEl.textContent = tooltipText;\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\r\n    this.tooltipEl.style.transitionDelay = \"500ms\";\r\n    this.tooltipEl.style.opacity = \"1\";\r\n\r\n    // tooltip only has a maxWidth if it contains whitespace and can break\r\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\r\n    if (hasNoWhitespace) {\r\n      this.tooltipEl.classList.add(\"single-word\");\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n    } else {\r\n      this.tooltipEl.classList.remove(\"single-word\");\r\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n    }\r\n\r\n    // tooltip is only visible after the transition delay.\r\n    // This also fixes an issue for keyboard users:\r\n    // if they tab to a button out of screen bounds, the page scrolls\r\n    // and hideTooltip() would be triggered before the tooltip would show\r\n    setTimeout(() => {\r\n      this.tooltipVisible = true;\r\n    }, 500);\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.style.transitionDelay = \"0s\";\r\n    this.tooltipEl.style.opacity = \"0\";\r\n    this.tooltipVisible = false;\r\n  }\r\n\r\n  showTooltipForKeyboardUsers() {\r\n    if (this.isTabbing) {\r\n      this.showTooltip();\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.hideTooltip();\r\n    this.wmNavigationHamburgerClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\r\n        <button\r\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\r\n          aria-expanded={this.open}\r\n          aria-controls={this.navId}\r\n          aria-label={this.showNavMessage}\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltipForKeyboardUsers()}\r\n          onBlur={() => this.hideTooltip()}\r\n          onClick={() => this.handleClick()}\r\n        >\r\n          <span class=\"icon\"></span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}