@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"wm-snackbar.js","sourceRoot":"","sources":["../../../../src/components/wm-snackbar/wm-snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\r\nimport { generateId, hideTooltip, intl, showTooltip } from \"../../global/functions\";\r\nimport { Notification } from \"../../global/interfaces\";\r\nimport { closeVerb } from \"../../global/intl\";\r\n@Component({\r\n  tag: \"wm-snackbar\",\r\n  styleUrl: \"wm-snackbar.scss\",\r\n  shadow: true,\r\n})\r\nexport class Snackbar {\r\n  @Element() el!: HTMLElement;\r\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\r\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\r\n\r\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\r\n  private uid!: string;\r\n  private focusOnDismiss!: HTMLElement;\r\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\r\n  private timers: Array<number> = [];\r\n  private newNotification: boolean = false;\r\n  private newWindowMessage = intl.formatMessage({\r\n    id: \"global.newWindowLink\",\r\n    defaultMessage: \"Opens in a new window.\",\r\n  });\r\n\r\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\r\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\r\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\r\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\r\n\r\n  @Watch(\"notifications\")\r\n  updateSnacks(newValue: string) {\r\n    const parsedData = JSON.parse(newValue);\r\n    const length = parsedData.length;\r\n    const prevNotificationsLength = this.parsedNotifications.length;\r\n    this.parsedNotifications = [];\r\n\r\n    //Parse notifications received as props and store a reference to them\r\n    for (let i = 0; i < length; i++) {\r\n      let newNotification: any = {\r\n        id: parsedData[i].id.toString(),\r\n        message: parsedData[i].message.toString(),\r\n        link: parsedData[i].link.toString(),\r\n        newWindow: !!parsedData[i].newWindow,\r\n      };\r\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\r\n    }\r\n\r\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\r\n    if (prevNotificationsLength < this.parsedNotifications.length) {\r\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\r\n      this.timers = [newTimer, ...this.timers];\r\n      this.storeElToFocusOnDismiss();\r\n      this.newNotification = true;\r\n    } else {\r\n      this.newNotification = false;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n  }\r\n\r\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\r\n  componentDidUpdate() {\r\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\r\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\r\n    this.newNotification = false;\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  focusLinkAndDisableTimer() {\r\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\r\n    const latestNotification = this.parsedNotifications[0];\r\n\r\n    if (latestNotification.link) {\r\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\r\n      link.focus();\r\n      this.stopTimer(latestNotification);\r\n    }\r\n  }\r\n\r\n  storeElToFocusOnDismiss() {\r\n    let triggeringButton = document.activeElement! as HTMLElement;\r\n    while (triggeringButton && triggeringButton.shadowRoot) {\r\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\r\n    }\r\n    this.focusOnDismiss = triggeringButton;\r\n  }\r\n\r\n  snackDismissed(notification: Notification) {\r\n    this.endSnack(notification);\r\n    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.\r\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\r\n  }\r\n\r\n  //Remove snack from notification list once timer runs out\r\n  snackExpired() {\r\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\r\n    this.endSnack(notification);\r\n  }\r\n\r\n  endSnack(notification: Notification) {\r\n    //App listens for userFinishedSnack event and deletes the emitted notification.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarSnackFinished.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userFinishedSnack.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  snackLinkClicked(notification: Notification) {\r\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\r\n    this.stopTimer(notification);\r\n    this.wmSnackbarActionTriggered.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n      newWindow: notification.newWindow,\r\n    });\r\n    // deprecated\r\n    this.userTriggeredAction.emit({\r\n      id: notification.id,\r\n      message: notification.message,\r\n      link: notification.link,\r\n    });\r\n  }\r\n\r\n  //Delete the timer corresponding to the dismissed notification\r\n  stopTimer(notification: Notification) {\r\n    this.parsedNotifications.forEach((notif, index) => {\r\n      if (notif.id === notification.id) {\r\n        clearTimeout(this.timers[index]);\r\n        this.timers = this.timers.filter((timer, ind) => {\r\n          if (ind !== index) {\r\n            return timer;\r\n          }\r\n        });\r\n      }\r\n    });\r\n  }\r\n\r\n  renderSnackbars() {\r\n    return this.parsedNotifications.map((notification) => (\r\n      <div class=\"wm-snack-wrapper\">\r\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n\r\n          <div class=\"wm-snackbarmsg\">\r\n            <div class=\"msgtext\">\r\n              <span>{notification.message}</span>\r\n              {notification.link && (\r\n                <a\r\n                  id={`action-${notification.id}`}\r\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\r\n                  aria-label={`Click to ${notification.link}...${\r\n                    notification.newWindow ? \" \" + this.newWindowMessage : \"\"\r\n                  }`}\r\n                  tabindex={0}\r\n                  onClick={() => {\r\n                    this.snackLinkClicked(notification);\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\r\n                >\r\n                  <span aria-hidden=\"true\">{notification.link}</span>\r\n                </a>\r\n              )}\r\n            </div>\r\n            <button\r\n              id={`close-button-${notification.id}`}\r\n              aria-label=\"Close this notification\"\r\n              class=\"closesnack\"\r\n              tabindex={notification.link ? 0 : -1}\r\n              onClick={() => this.snackDismissed(notification)}\r\n              onMouseEnter={(ev) => showTooltip(\"bottom\", ev.target as HTMLElement, closeVerb)}\r\n              onMouseLeave={() => hideTooltip()}\r\n              onFocus={(ev) => this.isTabbing && showTooltip(\"bottom\", ev.target as HTMLElement, closeVerb)}\r\n              onBlur={() => hideTooltip()}\r\n            ></button>\r\n          </div>\r\n          <div\r\n            class=\"sr-only\"\r\n            tabindex={notification.link ? 0 : -1}\r\n            onFocus={() => notification.link && this.snackDismissed(notification)}\r\n          />\r\n        </div>\r\n      </div>\r\n    ));\r\n  }\r\n\r\n  renderLiveRegion() {\r\n    const latestNotification = this.parsedNotifications[0];\r\n    const link = this.isTabbing ? \"\" : latestNotification.link;\r\n    const srAnnouncement = `${latestNotification.message} ${link}`;\r\n\r\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\r\n\r\n    if (region) {\r\n      region.innerHTML = \"\";\r\n      const wrapper = document.createElement(\"span\");\r\n      wrapper.innerHTML = srAnnouncement;\r\n      region.appendChild(wrapper);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    this.newNotification && this.renderLiveRegion();\r\n    const snackbars = this.renderSnackbars();\r\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\r\n\r\n    return (\r\n      <div class={`wm-snackbars ${wrappingClass} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\r\n        {snackbars}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-snackbar.js","sourceRoot":"","sources":["../../../../src/components/wm-snackbar/wm-snackbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, hideTooltip, showTooltip } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\nimport { globalMessages } from \"../../global/intl\";\n@Component({\n  tag: \"wm-snackbar\",\n  styleUrl: \"wm-snackbar.scss\",\n  shadow: true,\n})\nexport class Snackbar {\n  @Element() el!: HTMLElement;\n  //Prop receives notifications as JSON string, which is later parsed into an array of objects.\n  @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\n\n  private parsedNotifications: Array<Notification> = []; //Holds the parsed array\n  private uid!: string;\n  private focusOnDismiss!: HTMLElement;\n  private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\n  private timers: Array<number> = [];\n  private newNotification: boolean = false;\n\n  @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\n  @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\n  @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\n  @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\n\n  @Watch(\"notifications\")\n  updateSnacks(newValue: string) {\n    const parsedData = JSON.parse(newValue);\n    const length = parsedData.length;\n    const prevNotificationsLength = this.parsedNotifications.length;\n    this.parsedNotifications = [];\n\n    //Parse notifications received as props and store a reference to them\n    for (let i = 0; i < length; i++) {\n      let newNotification: any = {\n        id: parsedData[i].id.toString(),\n        message: parsedData[i].message.toString(),\n        link: parsedData[i].link.toString(),\n        newWindow: !!parsedData[i].newWindow,\n      };\n      this.parsedNotifications = [...this.parsedNotifications, newNotification];\n    }\n\n    //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\n    if (prevNotificationsLength < this.parsedNotifications.length) {\n      const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\n      this.timers = [newTimer, ...this.timers];\n      this.storeElToFocusOnDismiss();\n      this.newNotification = true;\n    } else {\n      this.newNotification = false;\n    }\n  }\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\n  componentDidUpdate() {\n    //If the user is tabbing and there's a new notification, focus the link and disable timer.\n    this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\n    this.newNotification = false;\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  focusLinkAndDisableTimer() {\n    //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\n    const latestNotification = this.parsedNotifications[0];\n\n    if (latestNotification.link) {\n      let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\n      link.focus();\n      this.stopTimer(latestNotification);\n    }\n  }\n\n  storeElToFocusOnDismiss() {\n    let triggeringButton = document.activeElement! as HTMLElement;\n    while (triggeringButton && triggeringButton.shadowRoot) {\n      triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\n    }\n    this.focusOnDismiss = triggeringButton;\n  }\n\n  snackDismissed(notification: Notification) {\n    this.endSnack(notification);\n    //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.\n    notification.link && this.isTabbing && this.focusOnDismiss.focus();\n  }\n\n  //Remove snack from notification list once timer runs out\n  snackExpired() {\n    const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\n    this.endSnack(notification);\n  }\n\n  endSnack(notification: Notification) {\n    //App listens for userFinishedSnack event and deletes the emitted notification.\n    this.stopTimer(notification);\n    this.wmSnackbarSnackFinished.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userFinishedSnack.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  snackLinkClicked(notification: Notification) {\n    //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\n    this.stopTimer(notification);\n    this.wmSnackbarActionTriggered.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n      newWindow: notification.newWindow,\n    });\n    // deprecated\n    this.userTriggeredAction.emit({\n      id: notification.id,\n      message: notification.message,\n      link: notification.link,\n    });\n  }\n\n  //Delete the timer corresponding to the dismissed notification\n  stopTimer(notification: Notification) {\n    this.parsedNotifications.forEach((notif, index) => {\n      if (notif.id === notification.id) {\n        clearTimeout(this.timers[index]);\n        this.timers = this.timers.filter((timer, ind) => {\n          if (ind !== index) {\n            return timer;\n          }\n        });\n      }\n    });\n  }\n\n  renderSnackbars() {\n    return this.parsedNotifications.map((notification) => (\n      <div class=\"wm-snack-wrapper\">\n        <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n\n          <div class=\"wm-snackbarmsg\">\n            <div class=\"msgtext\">\n              <span>{notification.message}</span>\n              {notification.link && (\n                <a\n                  id={`action-${notification.id}`}\n                  class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\n                  aria-label={`Click to ${notification.link}...${\n                    notification.newWindow ? \" \" + globalMessages.newWindow : \"\"\n                  }`}\n                  tabindex={0}\n                  onClick={() => {\n                    this.snackLinkClicked(notification);\n                  }}\n                  onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\n                >\n                  <span aria-hidden=\"true\">{notification.link}</span>\n                </a>\n              )}\n            </div>\n            <button\n              id={`close-button-${notification.id}`}\n              aria-label=\"Close this notification\"\n              class=\"closesnack\"\n              tabindex={notification.link ? 0 : -1}\n              onClick={() => this.snackDismissed(notification)}\n              onMouseEnter={(ev) => showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onMouseLeave={() => hideTooltip()}\n              onFocus={(ev) => this.isTabbing && showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n              onBlur={() => hideTooltip()}\n            ></button>\n          </div>\n          <div\n            class=\"sr-only\"\n            tabindex={notification.link ? 0 : -1}\n            onFocus={() => notification.link && this.snackDismissed(notification)}\n          />\n        </div>\n      </div>\n    ));\n  }\n\n  renderLiveRegion() {\n    const latestNotification = this.parsedNotifications[0];\n    const link = this.isTabbing ? \"\" : latestNotification.link;\n    const srAnnouncement = `${latestNotification.message} ${link}`;\n\n    const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\n\n    if (region) {\n      region.innerHTML = \"\";\n      const wrapper = document.createElement(\"span\");\n      wrapper.innerHTML = srAnnouncement;\n      region.appendChild(wrapper);\n    }\n  }\n\n  render() {\n    this.newNotification && this.renderLiveRegion();\n    const snackbars = this.renderSnackbars();\n    const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\n\n    return (\n      <div class={`wm-snackbars ${wrappingClass} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\n        {snackbars}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -1,212 +1,212 @@
-import { h, Host } from "@stencil/core";
-export class TabItem {
-  constructor() {
-    this.tabClicked = (ev) => {
-      ev.preventDefault();
-      this.wmTabSelected.emit({ tabId: this.tabId });
-      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-    };
-    this.tabPressed = (ev) => {
-      const key = ev.key;
-      if (key === "Enter" || key === " ") {
-        ev.preventDefault();
-        this.wmTabSelected.emit({ tabId: this.tabId });
-        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
-      }
-      else if (key.includes("Arrow")) {
-        ev.preventDefault();
-        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
-      }
-    };
-    this.selected = false;
-    this.show = true;
-    this.tabId = "";
-  }
-  get parentTabList() {
-    return this.el.parentElement;
-  }
-  toggleTabbingOn() {
-    this.linkEl && this.linkEl.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
-  }
-  componentDidLoad() {
-    this.tabItemLoaded.emit();
-  }
-  render() {
-    let classes = this.show ? "" : "hide ";
-    classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
-    let styles = {};
-    const padding = this.parentTabList && this.parentTabList.customPadding;
-    if (padding) {
-      const bkgSize = parseInt(padding, 10) * 2 || 0;
-      const units = padding.split(/([0-9]+)/).pop();
-      styles = {
-        "padding-left": this.parentTabList.customPadding,
-        "padding-right": this.parentTabList.customPadding,
-        "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
-      };
-    }
-    return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
-  }
-  static get is() { return "wm-tab-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-tab-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-tab-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether the tab is currently active"
-        },
-        "attribute": "selected",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "tabId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The id of the tab, linked to a tab panel."
-        },
-        "attribute": "tab-id",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmTabSelected",
-        "name": "wmTabSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tabId: string }",
-          "resolved": "{ tabId: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "tabSelected",
-        "name": "tabSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tabId: string }",
-          "resolved": "{ tabId: string; }",
-          "references": {}
-        }
-      }, {
-        "method": "keydownOnTabItem",
-        "name": "keydownOnTabItem",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{\r\n    tabItem: HTMLWmTabItemElement;\r\n    key: string;\r\n  }",
-          "resolved": "{ tabItem: HTMLWmTabItemElement; key: string; }",
-          "references": {
-            "HTMLWmTabItemElement": {
-              "location": "global"
-            }
-          }
-        }
-      }, {
-        "method": "tabItemLoaded",
-        "name": "tabItemLoaded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tab: HTMLWmTabItemElement }",
-          "resolved": "{ tab: HTMLWmTabItemElement; }",
-          "references": {
-            "HTMLWmTabItemElement": {
-              "location": "global"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "toggleTabbingOn",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "toggleTabbingOff",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=wm-tab-item.js.map
+import { h, Host } from "@stencil/core";
+export class TabItem {
+  constructor() {
+    this.tabClicked = (ev) => {
+      ev.preventDefault();
+      this.wmTabSelected.emit({ tabId: this.tabId });
+      this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+    };
+    this.tabPressed = (ev) => {
+      const key = ev.key;
+      if (key === "Enter" || key === " ") {
+        ev.preventDefault();
+        this.wmTabSelected.emit({ tabId: this.tabId });
+        this.tabSelected.emit({ tabId: this.tabId }); // deprecated
+      }
+      else if (key.includes("Arrow")) {
+        ev.preventDefault();
+        this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });
+      }
+    };
+    this.selected = false;
+    this.show = true;
+    this.tabId = "";
+  }
+  get parentTabList() {
+    return this.el.parentElement;
+  }
+  toggleTabbingOn() {
+    this.linkEl && this.linkEl.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.linkEl && this.linkEl.classList.remove("user-is-tabbing");
+  }
+  componentDidLoad() {
+    this.tabItemLoaded.emit();
+  }
+  render() {
+    let classes = this.show ? "" : "hide ";
+    classes += this.parentTabList && this.parentTabList.customBackground == "dark" ? "dark" : "";
+    let styles = {};
+    const padding = this.parentTabList && this.parentTabList.customPadding;
+    if (padding) {
+      const bkgSize = parseInt(padding, 10) * 2 || 0;
+      const units = padding.split(/([0-9]+)/).pop();
+      styles = {
+        "padding-left": this.parentTabList.customPadding,
+        "padding-right": this.parentTabList.customPadding,
+        "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
+      };
+    }
+    return (h(Host, { role: "presentation" }, h("li", { class: "tab-item", role: "presentation" }, h("a", { class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, h("slot", null)))));
+  }
+  static get is() { return "wm-tab-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tab-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tab-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the tab is currently active"
+        },
+        "attribute": "selected",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "tabId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The id of the tab, linked to a tab panel."
+        },
+        "attribute": "tab-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTabSelected",
+        "name": "wmTabSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "tabSelected",
+        "name": "tabSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "keydownOnTabItem",
+        "name": "keydownOnTabItem",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\n  }",
+          "resolved": "{ tabItem: HTMLWmTabItemElement; key: string; }",
+          "references": {
+            "HTMLWmTabItemElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tabItemLoaded",
+        "name": "tabItemLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tab: HTMLWmTabItemElement }",
+          "resolved": "{ tab: HTMLWmTabItemElement; }",
+          "references": {
+            "HTMLWmTabItemElement": {
+              "location": "global"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "toggleTabbingOn",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "toggleTabbingOff",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=wm-tab-item.js.map

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-tab-item.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-tab-item\",\r\n  styleUrl: \"wm-tab-item.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class TabItem {\r\n  @Element() el!: HTMLWmTabItemElement;\r\n\r\n  private get parentTabList(): HTMLWmTabListElement | null {\r\n    return this.el.parentElement as HTMLWmTabListElement;\r\n  }\r\n\r\n  /**\r\n   * Indicates whether the tab is currently active\r\n   */\r\n  @Prop() selected: boolean = false;\r\n\r\n  @Prop() show: boolean = true;\r\n\r\n  /**\r\n   * The id of the tab, linked to a tab panel.\r\n   */\r\n  @Prop() tabId: string = \"\";\r\n\r\n  /**\r\n   * Reference to focusable link element\r\n   */\r\n  linkEl?: HTMLAnchorElement;\r\n\r\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\r\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\r\n\r\n  @Event() keydownOnTabItem!: EventEmitter<{\r\n    tabItem: HTMLWmTabItemElement;\r\n    key: string;\r\n  }>;\r\n\r\n  @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\r\n\r\n  private tabClicked = (ev: MouseEvent) => {\r\n    ev.preventDefault();\r\n    this.wmTabSelected.emit({ tabId: this.tabId });\r\n    this.tabSelected.emit({ tabId: this.tabId }); // deprecated\r\n  };\r\n\r\n  private tabPressed = (ev: KeyboardEvent) => {\r\n    const key = ev.key;\r\n\r\n    if (key === \"Enter\" || key === \" \") {\r\n      ev.preventDefault();\r\n      this.wmTabSelected.emit({ tabId: this.tabId });\r\n      this.tabSelected.emit({ tabId: this.tabId }); // deprecated\r\n    } else if (key.includes(\"Arrow\")) {\r\n      ev.preventDefault();\r\n      this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\r\n    }\r\n  };\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  toggleTabbingOn() {\r\n    this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  toggleTabbingOff() {\r\n    this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.tabItemLoaded.emit();\r\n  }\r\n\r\n  render() {\r\n    let classes = this.show ? \"\" : \"hide \";\r\n    classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\r\n\r\n    let styles = {};\r\n    const padding = this.parentTabList && this.parentTabList.customPadding;\r\n    if (padding) {\r\n      const bkgSize = parseInt(padding, 10) * 2 || 0;\r\n      const units = padding.split(/([0-9]+)/).pop();\r\n      styles = {\r\n        \"padding-left\": this.parentTabList!.customPadding,\r\n        \"padding-right\": this.parentTabList!.customPadding,\r\n        \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\r\n      };\r\n    }\r\n\r\n    return (\r\n      <Host role=\"presentation\">\r\n        <li class=\"tab-item\" role=\"presentation\">\r\n          <a\r\n            class={`tab ${classes}`}\r\n            style={styles}\r\n            role=\"tab\"\r\n            ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\r\n            onClick={this.tabClicked}\r\n            id={`tab-link-${this.tabId}`}\r\n            onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\r\n            aria-selected={this.selected ? \"true\" : \"false\"}\r\n            tabindex={this.selected ? 0 : -1}\r\n          >\r\n            <slot></slot>\r\n          </a>\r\n        </li>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-tab-item.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,OAAO;;IAkCV,eAAU,GAAG,CAAC,EAAc,EAAE,EAAE;MACtC,EAAE,CAAC,cAAc,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;MAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa;IAC7D,CAAC,CAAC;IAEM,eAAU,GAAG,CAAC,EAAiB,EAAE,EAAE;MACzC,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;MAEnB,IAAI,GAAG,KAAK,OAAO,IAAI,GAAG,KAAK,GAAG,EAAE;QAClC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,aAAa;OAC5D;WAAM,IAAI,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE;QAChC,EAAE,CAAC,cAAc,EAAE,CAAC;QACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC;OAC/D;IACH,CAAC,CAAC;oBAzC0B,KAAK;gBAET,IAAI;iBAKJ,EAAE;;EAd1B,IAAY,aAAa;IACvB,OAAO,IAAI,CAAC,EAAE,CAAC,aAAqC,CAAC;EACvD,CAAC;EAiDD,eAAe;IACb,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;EAC9D,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;EACjE,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;EAC5B,CAAC;EAED,MAAM;IACJ,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;IACvC,OAAO,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,gBAAgB,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAE7F,IAAI,MAAM,GAAG,EAAE,CAAC;IAChB,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC;IACvE,IAAI,OAAO,EAAE;MACX,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;MAC/C,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,CAAC;MAC9C,MAAM,GAAG;QACP,cAAc,EAAE,IAAI,CAAC,aAAc,CAAC,aAAa;QACjD,eAAe,EAAE,IAAI,CAAC,aAAc,CAAC,aAAa;QAClD,iBAAiB,EAAE,eAAe,OAAO,GAAG,KAAK,OAAO;OACzD,CAAC;KACH;IAED,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,cAAc;MACvB,UAAI,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,cAAc;QACtC,SACE,KAAK,EAAE,OAAO,OAAO,EAAE,EACvB,KAAK,EAAE,MAAM,EACb,IAAI,EAAC,KAAK,EACV,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,EAAE,EAAE,YAAY,IAAI,CAAC,KAAK,EAAE,EAC5B,SAAS,EAAE,CAAC,EAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,mBACtC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;UAEhC,eAAa,CACX,CACD,CACA,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tab-item\",\n  styleUrl: \"wm-tab-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabItem {\n  @Element() el!: HTMLWmTabItemElement;\n\n  private get parentTabList(): HTMLWmTabListElement | null {\n    return this.el.parentElement as HTMLWmTabListElement;\n  }\n\n  /**\n   * Indicates whether the tab is currently active\n   */\n  @Prop() selected: boolean = false;\n\n  @Prop() show: boolean = true;\n\n  /**\n   * The id of the tab, linked to a tab panel.\n   */\n  @Prop() tabId: string = \"\";\n\n  /**\n   * Reference to focusable link element\n   */\n  linkEl?: HTMLAnchorElement;\n\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  @Event() keydownOnTabItem!: EventEmitter<{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\n  }>;\n\n  @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\n\n  private tabClicked = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.wmTabSelected.emit({ tabId: this.tabId });\n    this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n  };\n\n  private tabPressed = (ev: KeyboardEvent) => {\n    const key = ev.key;\n\n    if (key === \"Enter\" || key === \" \") {\n      ev.preventDefault();\n      this.wmTabSelected.emit({ tabId: this.tabId });\n      this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n    } else if (key.includes(\"Arrow\")) {\n      ev.preventDefault();\n      this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\n    }\n  };\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\n  }\n\n  componentDidLoad() {\n    this.tabItemLoaded.emit();\n  }\n\n  render() {\n    let classes = this.show ? \"\" : \"hide \";\n    classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\n\n    let styles = {};\n    const padding = this.parentTabList && this.parentTabList.customPadding;\n    if (padding) {\n      const bkgSize = parseInt(padding, 10) * 2 || 0;\n      const units = padding.split(/([0-9]+)/).pop();\n      styles = {\n        \"padding-left\": this.parentTabList!.customPadding,\n        \"padding-right\": this.parentTabList!.customPadding,\n        \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\n      };\n    }\n\n    return (\n      <Host role=\"presentation\">\n        <li class=\"tab-item\" role=\"presentation\">\n          <a\n            class={`tab ${classes}`}\n            style={styles}\n            role=\"tab\"\n            ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\n            onClick={this.tabClicked}\n            id={`tab-link-${this.tabId}`}\n            onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\n            aria-selected={this.selected ? \"true\" : \"false\"}\n            tabindex={this.selected ? 0 : -1}\n          >\n            <slot></slot>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n"]}