@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/ripple/p-054e206a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmSnackbarCss","Snackbar","this","parsedNotifications","isTabbing","timers","newNotification","newWindowMessage","intl","formatMessage","id","defaultMessage","updateSnacks","newValue","parsedData","JSON","parse","length","prevNotificationsLength","i","toString","message","link","newWindow","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","checkForTabbing","ev","key","toggleTabbingOn","handleMouse","toggleTabbingOff","latestNotification","shadowRoot","querySelector","focus","stopTimer","snackbarEl","classList","add","remove","triggeringButton","document","activeElement","focusOnDismiss","snackDismissed","notification","endSnack","wmSnackbarSnackFinished","emit","userFinishedSnack","snackLinkClicked","wmSnackbarActionTriggered","userTriggeredAction","forEach","notif","index","clearTimeout","filter","timer","ind","renderSnackbars","map","h","class","tabindex","onFocus","onClick","onKeyDown","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass","ref"],"sources":["./src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","./src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\nwm-snackbar {\n  * {\n    box-sizing: border-box;\n    margin: unset; //Edge\n  }\n\n  .wm-snackbars {\n    position: fixed;\n    bottom: rem-calc(0);\n    left: rem-calc(20);\n    right: rem-calc(20);\n    padding: rem-calc(4 10 30);\n    z-index: 2001;\n    max-width: rem-calc(568);\n    max-height: rem-calc(280);\n    -webkit-overflow-scrolling: touch;\n    overflow: auto;\n\n    &.empty {\n      @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n\n    .wm-snack-wrapper {\n      width: 100%;\n      height: 100%;\n\n      &:not(:last-child) {\n        margin-bottom: rem-calc(20);\n      }\n\n      .wm-snackbar {\n        @include shadow8;\n        @include displayFlex;\n        @include alignItems(center);\n        @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n        font-size: rem-calc(14);\n        color: #fff;\n        padding: rem-calc(15 30);\n        background: #4a4a4a;\n        opacity: 0;\n        left: 0;\n        position: relative;\n        font-family: inherit;\n\n        .link {\n          letter-spacing: 0;\n          text-transform: none;\n          font-size: rem-calc(14);\n          border: none;\n          background: transparent;\n          padding-left: 0;\n          padding-right: 0;\n          height: auto;\n          border-radius: 0;\n          line-height: 1;\n          color: $snackbar-link-color;\n          margin: rem-calc(0 50 0 10);\n          text-decoration: none;\n          font-weight: 600;\n          cursor: pointer;\n\n          &.new-window::after {\n            @include mdi-icon;\n            display: inline;\n            content: \"\\f137\";\n            margin-left: rem-calc(4);\n          }\n\n          &:hover {\n            text-decoration: underline;\n          }\n\n          &:focus {\n            outline: none;\n            border: none;\n          }\n\n          &::-moz-focus-inner {\n            border: 0;\n            outline: none;\n          }\n        }\n\n        &:not(:last-child) {\n          margin-bottom: rem-calc(20);\n        }\n\n        &.active:not(button) {\n          opacity: 1;\n        }\n\n        .wm-snackbarmsg {\n          @include displayFlex;\n          @include justifyContent(space-between);\n          @include alignItems(center);\n          // font-size: rem-calc(14);\n          width: 100%;\n          position: relative;\n          padding: 0;\n\n          .msgtext {\n            width: 100%;\n          }\n\n          .closesnack {\n            @include box-shadow(none);\n            @include border-radius(50%);\n            background-color: #3b3b3b;\n            color: #ffffff;\n            cursor: pointer;\n            border: none;\n            font-size: rem-calc(16);\n            padding: 0;\n            height: auto;\n            line-height: 1;\n            min-width: rem-calc(44);\n            min-height: rem-calc(44);\n            text-align: center;\n            letter-spacing: normal;\n\n            @media screen and (min-width: rem-calc(768)) {\n              min-width: rem-calc(30);\n              min-height: rem-calc(30);\n            }\n\n            &:before {\n              @include mdi-icon;\n              content: \"\\f156\";\n            }\n\n            &:hover {\n              background-color: #fff;\n              color: $snackbar-color;\n            }\n\n            &:focus {\n              outline: none;\n            }\n\n            &::-moz-focus-inner {\n              border: 0;\n              outline: none;\n            }\n\n            &:active {\n              @include scale($xVal: 0.9, $yVal: 0.9);\n            }\n\n            > .tooltip {\n              position: absolute;\n              opacity: 0;\n              width: 1px;\n              height: 1px;\n              overflow: hidden;\n              clip: rect(0, 0, 0, 0);\n              font-size: rem-calc(14);\n              text-transform: none;\n              font-weight: normal;\n              background: black;\n              color: #fff;\n              padding: 0;\n              line-height: normal;\n              z-index: 30;\n            }\n\n            &:hover > .tooltip,\n            &.user-is-tabbing:focus > .tooltip {\n              clip: auto;\n              width: auto;\n              height: auto;\n              opacity: 1;\n              transition: opacity 500ms 500ms;\n              padding: rem-calc(6);\n              top: rem-calc(44);\n              left: rem-calc(44);\n              white-space: nowrap;\n              transform: translateX(-50%);\n              @media screen and (min-width: rem-calc(768)) {\n                top: rem-calc(33);\n                left: auto;\n              }\n            }\n          }\n        }\n\n        .sr-only {\n          @include srOnly;\n          top: 0;\n          left: 0;\n        }\n      }\n    }\n  }\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\n  @extend %focus-on-dark;\n\n  > .tooltip {\n    clip: auto;\n    width: auto;\n    height: auto;\n    opacity: 1;\n    transition: opacity 500ms 500ms;\n    padding: rem-calc(6);\n    top: rem-calc(44);\n    left: rem-calc(44);\n    white-space: nowrap;\n    transform: translateX(-50%);\n    @media screen and (min-width: rem-calc(768)) {\n      top: rem-calc(33);\n      left: auto;\n    }\n  }\n}\n\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\n  outline: none;\n  background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\n  background-size: rem-calc(6px 3px);\n  background-position: 0 1em;\n  border-radius: 0;\n  line-height: normal;\n}\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, intl } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\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  private snackbarEl!: HTMLDivElement;\n  private newWindowMessage = intl.formatMessage({\n    id: \"global.newWindowLink\",\n    defaultMessage: \"Opens in a new window.\",\n  });\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(\"keydown\", { target: \"document\" })\n  checkForTabbing(ev: KeyboardEvent) {\n    if (ev.key === \"Tab\") {\n      this.toggleTabbingOn();\n    }\n  }\n\n  //Workaround for screenreader's triggering click event on \"enter\".\n  @Listen(\"mouseover\", { target: \"document\" })\n  handleMouse() {\n    this.toggleTabbingOff();\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  toggleTabbingOn() {\n    this.isTabbing = true;\n    this.snackbarEl && this.snackbarEl.classList.add(\"user-is-tabbing\");\n  }\n\n  toggleTabbingOff() {\n    this.isTabbing = false;\n    this.snackbarEl && this.snackbarEl.classList.remove(\"user-is-tabbing\");\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 ? \" \" + this.newWindowMessage : \"\"\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            >\n              <span class=\"tooltip\" aria-hidden=\"true\">\n                Close\n              </span>\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 ref={(el) => (this.snackbarEl = el as HTMLDivElement)} class={`wm-snackbars ${wrappingClass}`}>\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"],"mappings":"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"}

package/dist/ripple/p-08b7ec08.system.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getIconCodeFromName","icon","iconCodes","close","pencil","cancel","check","delete","magnify","export","defaultMode","getWmMode","exports","ref","getAttribute","document","documentElement"],"sources":["src/global/interfaces.ts"],"sourcesContent":["export type Notification = {\n  message: string;\n  id: string;\n  link: string;\n  newWindow: boolean;\n};\n\n// Create label for icon-only buttons\nexport type label = string | undefined;\n\nexport type CssClassMap = { [className: string]: boolean };\n\ninterface IconLabels {\n  [index: string]: string;\n}\n\nexport type Product = {\n  description?: string;\n  samlLinkUrl?: string;\n  iconUrl: string;\n  id: string;\n  linkUrl: string;\n  name: string;\n};\n\n// products retrieved from endpoint:\nexport type NavigatorPayload = {\n  connection_name?: string;\n  current_product_id: string;\n  email: string;\n  logout_url: string;\n  products: Product[];\n};\n\nexport type validButtonTypes =\n  | \"primary\"\n  | \"secondary\"\n  | \"textonly\"\n  | \"icononly\"\n  | \"navigational\"\n  | \"selector\"\n  | \"selector-primary\"\n  | \"pairpositive\"\n  | \"pairnegative\";\n\n//List of icon codes with more indicative descriptors to create labels for icon-only buttons\nexport const iconLabels: IconLabels = {\n  f156: \"Close\",\n  f3eb: \"Edit\",\n  f739: \"Cancel\",\n  f12c: \"Save\",\n  f1c0: \"Delete\",\n  f349: \"Search\",\n  f207: \"Export info\",\n  f1d9: \"Open dropdown\",\n  f04d: \"Go back\",\n  f054: \"Go forward\",\n  f141: \"Left\",\n  f142: \"Right\",\n  f35e: \"Menu left\",\n  f35d: \"Toggle menu down\",\n  f30d: \"Backspace\",\n  f645: \"Sort hierarchically\",\n  f4bb: \"Sort alphabetically\",\n};\n\n// For backwards compatibility, the icon prop accepts the icon name minus mdi- prefix, e.g. \"icon\"\n// this function converts the name to the corresponding code or returns what it was passed\ninterface IconCodes {\n  [index: string]: string;\n}\nexport function getIconCodeFromName(icon: string): string {\n  return iconCodes[icon] || icon;\n}\n\nconst iconCodes: IconCodes = {\n  close: \"f156\",\n  pencil: \"f3eb\",\n  cancel: \"f739\",\n  check: \"f12c\",\n  delete: \"f1c0\",\n  magnify: \"f349\",\n  export: \"f207\",\n  \"dots-vertical\": \"f1d9\",\n  \"arrow-left\": \"f04d\",\n  \"arrow-right\": \"f054\",\n  \"chevron-left\": \"f141\",\n  \"chevron-right\": \"f142\",\n  \"menu-left\": \"f35e\",\n  \"menu-down\": \"f35d\",\n  \"keyboard-backspace\": \"f30d\",\n  \"file-tree\": \"f645\",\n  \"sort-alphabetical\": \"f4bb\",\n  \"checkbox-marked-circle\": \"f133\",\n  \"account-settings\": \"f630\",\n  \"backup-restore\": \"f06f\",\n};\n\nexport const defaultMode = \"planning\";\n\nexport const getWmMode = (ref?: any) => {\n  return ref.getAttribute(\"mode\") || document.documentElement.getAttribute(\"mode\") || defaultMode;\n};\n\nexport type TooltipPlacement =\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"top-right\"\n  | \"top-left\";\n\nexport type SliceElement = (SVGElement | HTMLElement);\n\nexport type SliceDetails = {\n  amount: number;\n  perc: number;\n  legend: string | null;\n  color: string;\n  offset: number;\n  id: string;\n  title: string | null;\n  text: string | null;\n  buttonText: string | null;\n  sliceRef: Element;\n  inSmallCluster: boolean;\n  coords?: {x: number, y: number};\n};\n\nexport type ChartDetails = {\n  size: number;\n  colors: Array<string>;\n  thickness?: number;\n  padding: number;\n  category: \"doughnut\" | \"stackedBar\" | \"simpleBar\";\n};\n\nexport type ChartType =\n  // progress monitor types\n  | \"doughnut\"\n  | \"bar\"\n  // chart types\n  | \"doughnut1\"\n  | \"doughnut2\"\n  | \"doughnut2plus\"\n  | \"doughnut3\"\n  | \"bar2\"\n  | \"bar3\"\n  | \"bar4\"\n  | \"bar5\"\n  | \"bar6\"\n  | \"bar7\"\n  // deprecated\n  | \"doughnut0\"\n  | \"bar1\";\n\nexport type LegendItem = { key: string; color: string };\n\nexport type UploadedFile = {\n  name: string;\n  id: string;\n  type: string;\n  lastUpdated: string; // in display format\n  progress?: number;\n  fileActions?: string;\n  size?: string; // in display format\n};\n"],"mappings":"yFAuEgBA,EAAoBC,GAClC,OAAOC,EAAUD,IAASA,CAC5B,CAEA,IAAMC,EAAuB,CAC3BC,MAAO,OACPC,OAAQ,OACRC,OAAQ,OACRC,MAAO,OACPC,OAAQ,OACRC,QAAS,OACTC,OAAQ,OACR,gBAAiB,OACjB,aAAc,OACd,cAAe,OACf,eAAgB,OAChB,gBAAiB,OACjB,YAAa,OACb,YAAa,OACb,qBAAsB,OACtB,YAAa,OACb,oBAAqB,OACrB,yBAA0B,OAC1B,mBAAoB,OACpB,iBAAkB,QAGb,IAAMC,EAAc,W,IAEdC,EAASC,EAAA,KAAG,SAACC,GACxB,OAAOA,EAAIC,aAAa,SAAWC,SAASC,gBAAgBF,aAAa,SAAWJ,CACtF,G"}

package/dist/ripple/p-0a23f0fa.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmModalCss","Modal","this","bodyFocusListener","redirectFocusFromBody","tempOpen","open","isOpen","tempModalType","modalType","isTypeDialog","focusOnOpenEl","customElementToFocus","elementToFocus","el","querySelector","uid","console","warn","closeButtonEl","toggleModal","showModal","hideModal","handleClick","ev","target","overlayEl","focus","closeModalOnEscape","key","stopPropagation","wmModalCloseTriggered","emit","wmCloseTriggered","setAriaDescribedbyOnModal","setElToFocusOnClose","document","body","style","overflow","tabIndex","removeEventListener","addEventListener","window","requestAnimationFrame","focusOnCloseEl","componentWillLoad","id","error","generateId","componentDidLoad","async","wmModalPrimaryTriggered","wmPrimaryTriggered","wmModalSecondaryTriggered","wmSecondaryTriggered","modalBody","getElementById","setAttribute","elToFocus","activeElement","tagName","parentElement","checkForActiveElInShadow","render","h","Host","class","role","tabindex","onFocus","focusLastElement","ref","focusFirstElement"],"sources":["./src/components/wm-modal/wm-modal.scss?tag=wm-modal","./src/components/wm-modal/wm-modal.tsx"],"sourcesContent":["wm-modal {\n  * {\n    box-sizing: border-box;\n  }\n  @include displayFlex();\n  @include justifyContent(center);\n  @include alignItems(center);\n\n  flex-direction: column;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 2001;\n  width: 80vw;\n  max-width: 750px;\n  max-height: 80vh;\n  @include box-shadow(\n    0px 11px 15px 0px rgba(0, 0, 0, 0.2),\n    0px 9px 46px 8px rgba(0, 0, 0, 0.12),\n    0px 24px 38px 3px rgba(0, 0, 0, 0.14)\n  );\n\n  > * {\n    width: 80vw;\n    max-width: 750px;\n    background: $light-background;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  wm-modal-header,\n  wm-modal-footer {\n    padding: rem-calc(20 30);\n  }\n\n  wm-modal-header {\n    z-index: 2003;\n  }\n\n  wm-modal-footer {\n    z-index: 2003;\n  }\n\n  > :not(wm-modal-header):not(wm-modal-footer) {\n    max-height: calc(80vh - 166px);\n    z-index: 2002;\n  }\n\n  &.wm-modal {\n    wm-modal-header {\n      border-bottom: 1px solid rgb(244, 243, 246);\n    }\n\n    wm-modal-footer {\n      border-top: 1px solid rgb(244, 243, 246);\n    }\n\n    @media only screen and (max-width: 768px) {\n      height: 100%;\n      max-height: none;\n      max-width: none;\n      width: 100vw;\n\n      > * {\n        max-width: none;\n        width: 100vw;\n      }\n\n      > *:not(wm-modal-header):not(wm-modal-footer) {\n        max-height: none;\n        height: calc(100vh - 166px);\n      }\n    }\n  }\n\n  &.wm-dialog {\n    > :not(wm-modal-header):not(wm-modal-footer) {\n      padding: rem-calc(0 30 20 30);\n      font-size: rem-calc(14px);\n      border: none;\n    }\n  }\n\n  .overlay {\n    width: 100vw;\n    height: 100vh;\n    max-width: none;\n    max-height: none;\n    position: fixed !important;\n    top: -1;\n    bottom: 1;\n    left: -1;\n    right: 1;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n    z-index: 2000;\n  }\n\n  &.hide {\n    visibility: hidden;\n  }\n\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n","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"],"mappings":"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"}

package/dist/ripple/p-0b31c210.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTabItemCss","TabItem","this","tabClicked","ev","preventDefault","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","parentTabList","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","menuLayout","offsetWidth","tabItems","Array","from","querySelectorAll","selectedTabItem","filter","t","getLinkEl","tab","shadowRoot","querySelector","panels","allPanels","document","tabIds","map","p","getPanel","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","generateId","tabPanelLoaded"],"sources":["./src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","./src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","./src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","./src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n  * {\n    box-sizing: border-box;\n  }\n  font-family: inherit;\n  display: inline-block;\n\n  .tab-item {\n    list-style-type: none;\n    height: 100%;\n    display: inline-block;\n\n    .tab {\n      @include border-radius(0);\n      color: $button-default-text;\n      text-decoration: none;\n      letter-spacing: 0.7px;\n      font-size: rem-calc(14);\n      font-weight: 500;\n      opacity: 1;\n      position: relative;\n      text-transform: uppercase;\n      display: inline-block;\n      height: calc(40 / 12 * 1em);\n      line-height: calc(40 / 12 * 1em);\n      padding-right: rem-calc(24);\n      padding-left: rem-calc(24);\n\n      &[aria-selected=\"true\"] {\n        font-weight: 700;\n        opacity: 1;\n        background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n        background-size: calc(100% - 50px) 3px;\n\n        &.dark {\n          color: $button-primary-text;\n        }\n      }\n\n      &,\n      &:hover,\n      &:active {\n        outline: none;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.dark:not([aria-selected=\"true\"]) {\n        opacity: 0.8;\n        color: $button-primary-text;\n      }\n\n      &.user-is-tabbing:focus:not(:active) {\n        outline: none;\n        @include focus-style;\n        &.dark {\n          @include focus-on-dark;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n","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",":host,\nwm-tab-list {\n  * {\n    box-sizing: border-box;\n  }\n\n  position: relative;\n  white-space: nowrap;\n  height: fit-content;\n  display: block;\n\n  .tabcontainer {\n    margin: 0;\n    margin-left: -24px;\n    width: 100%;\n    height: rem-calc(65);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n\n    &.dark {\n      background: rgb(53, 59, 72);\n      margin: 0;\n    }\n  }\n\n  wm-select {\n    padding: rem-calc(6) 0;\n  }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n","wm-tab-panel {\n  visibility: inherit;\n\n  &.tab-hidden {\n    display: none;\n  }\n\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.user-is-tabbing:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-0cd88c74.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTimepickerCss","Timepicker","this","twelveHrValid","twentyFourHrValid","uid","timeFormat","times","openUp","buttonAriaLabel","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKey","ev","key","preventDefault","isExpanded","open","moveDown","selectedOption","moveUp","handleOptionClick","textContent","stopPropagation","close","focusOption","optionsList","setDropdownPosition","length","updateErrorState","displayedErrorMessage","errorMessage","componentWillLoad","label","console","error","el","generateId","generateTimes","componentDidLoad","optionsEl","classList","add","Array","from","querySelectorAll","value","processInput","isValidTime","input","test","startTime","i","h","Math","floor","hour","toString","padStart","m","min","findNearestTimeInterval","time","formattedTime","formatToStorage","minutes","parseInt","slice","roundedMinutes","round","roundedHour","replace","handleListSelection","option","filter","o","formatToDisplay","setValue","previousValue","inputEl","wmTimepickerNewValidValue","emit","wmTimepickerOnChange","isValid","newErrorMessage","determineErrorMessage","message","requiredError","requiredFieldMessage","invalidError","requiredField","splitTime","exec","hours","amPm","undefined","toUpperCase","includes","itemToSelect","shouldOpenUp","remove","window","requestAnimationFrame","returnFocus","setTimeout","buttonEl","focus","item","forEach","tabIndex","position","prevItem","previousElementSibling","scrollTop","getBoundingClientRect","top","nextItem","nextElementSibling","bottom","offsetHeight","findIndex","x","clientHeight","prevEl","nextEl","handleInput","handleInputBlur","shouldPreventValidation","preventValidation","isRelatedTarget","tpWrapper","renderOptions","map","index","role","onClick","render","Host","invalid","onBlur","class","labelPosition","ref","t","htmlFor","onInput","disabled","placeholder","autocomplete","onFocus","onMouseDown","tabindex"],"sources":["./src/components/wm-timepicker/wm-timepicker.scss?tag=wm-timepicker&encapsulation=shadow","./src/components/wm-timepicker/wm-timepicker.tsx"],"sourcesContent":[":host,\nwm-timepicker {\n  font-family: inherit;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  @include label;\n\n  .wrapper {\n    .inner-wrapper {\n      @include displayFlex();\n      align-items: center;\n      height: rem-calc(40);\n      border: 1px solid $input-border-color;\n      @include border-radius(3px);\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\n      justify-content: space-between;\n      position: relative;\n\n      input {\n        -moz-border-top-left-radius: 3px;\n        -webkit-border-top-left-radius: 3px;\n        border-top-left-radius: 3px;\n        -moz-border-bottom-left-radius: 3px;\n        -webkit-border-bottom-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        border: none;\n        font-size: rem-calc(14);\n        padding: rem-calc(10 15 8);\n        min-width: 0;\n        height: 100%;\n        flex: 1;\n        margin: 0;\n        font-family: inherit;\n\n        &:disabled {\n          background-color: $input-disabled-bg;\n          color: $input-disabled-color;\n        }\n\n        &:focus {\n          outline: none;\n        }\n      }\n\n      button {\n        all: unset;\n        cursor: pointer;\n        padding: rem-calc(0px 6px);\n        height: rem-calc(38);\n        background-color: $button-default-background;\n        border: none;\n        -moz-border-top-right-radius: 3px;\n        -webkit-border-top-right-radius: 3px;\n        border-top-right-radius: 3px;\n        -moz-border-bottom-right-radius: 3px;\n        -webkit-border-bottom-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n\n        // reset styles inherited from Planning in browsers without shadow DOM\n        -moz-border-top-left-radius: 0;\n        -webkit-border-top-left-radius: 0;\n        border-top-left-radius: 0;\n        -moz-border-bottom-left-radius: 0;\n        -webkit-border-bottom-left-radius: 0;\n        border-bottom-left-radius: 0;\n        @include box-shadow(none);\n\n        .clock::after {\n          @include mdi-icon;\n          content: \"\\f150\";\n          color: $button-default-text;\n          font-size: rem-calc(24);\n          padding: 0;\n          line-height: rem-calc(40);\n        }\n\n        &:hover {\n          background: mix(black, $button-default-background, 10%);\n          @include box-shadow(none);\n        }\n\n        &:disabled {\n          background-color: rgba(74, 74, 74, 0.05);\n          pointer-events: none;\n          @include box-shadow(none);\n          .clock::after {\n            color: #7b7b7b;\n          }\n        }\n\n        [dir=\"RTL\"] & {\n          right: auto;\n          left: 0;\n        }\n\n        &:focus {\n          outline: none;\n        }\n\n        &.user-is-tabbing:focus {\n          @include focus-style;\n        }\n\n        &::-moz-focus-inner {\n          border: 0;\n        }\n      }\n\n      .options {\n        margin: 0;\n        padding: 0;\n        -webkit-overflow-scrolling: touch;\n        overflow: auto;\n        // value can be passed in to the component and overwrite the following\n        max-height: rem-calc(305);\n        @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n        @include transition(transform 0.25s ease);\n        @include scale($xVal: 1, $yVal: 0);\n        @include transformOrigin(center top);\n        @include border-radius(3px);\n        position: absolute;\n        top: 2.5rem;\n        right: 0;\n        background: #fff;\n        z-index: 100;\n        width: 100%;\n        font-size: rem-calc(14);\n\n        &.upwards {\n          top: unset;\n          bottom: 2.5rem;\n          @include transformOrigin(center bottom);\n        }\n\n        &.hidden {\n          visibility: hidden;\n        }\n\n        [role=\"option\"] {\n          display: block;\n          cursor: pointer;\n          position: relative;\n          padding: rem-calc(20);\n          background: #fff;\n          font-family: inherit;\n          list-style: none;\n          color: $body-text-color;\n\n          &:hover {\n            background: $background;\n            outline: none;\n          }\n\n          &:focus {\n            outline: none;\n            background: $background;\n          }\n\n          &:not(:last-child) {\n            border-bottom: 2px solid rgba(#2e1b46, 0.05);\n          }\n        }\n      }\n\n      .options.open {\n        @include scale($xVal: 1, $yVal: 1);\n      }\n    }\n\n    &.invalid {\n      .inner-wrapper {\n        @include invalid;\n      }\n\n      .error {\n        color: $firetruck;\n        margin-top: 4px;\n        margin-bottom: 4px;\n        display: block;\n        top: 100%;\n        left: 0;\n        font-style: italic;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      .inner-wrapper {\n        @include field-focus;\n      }\n    }\n  }\n}\n","import { h, Component, Host, Element, Prop, Watch, State, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl, generateId, shouldOpenUp, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-timepicker\",\n  styleUrl: \"wm-timepicker.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Timepicker {\n  @Element() el!: HTMLWmTimepickerElement;\n  private inputEl!: HTMLInputElement;\n  private optionsEl!: HTMLUListElement;\n  private tpWrapper!: HTMLDivElement;\n  private buttonEl!: HTMLButtonElement;\n  private optionsList!: HTMLLIElement[];\n\n  @Prop() disabled: boolean = false;\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @Prop() errorMessage?: string | null;\n  @Prop() label: string = \"\";\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop() requiredField: boolean = false;\n  @Prop() requiredFieldMessage?: string;\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n  @State() selectedOption!: HTMLLIElement;\n  @State() isExpanded: boolean = false;\n  @State() isTabbing: boolean = false;\n  @Event() wmTimepickerNewValidValue!: EventEmitter<{ value: string }>;\n  @Event() wmTimepickerOnChange!: EventEmitter<{\n    // deprecated in favor of wmTimepickerNewValidValue and standard input event\n    value: string;\n    isValid: boolean;\n  }>;\n  private twelveHrValid = /^(0?[0-9]|1[0-2])\\s*:?\\s*([0-5][0-9])?\\s?(a|p|am|pm)?$/i;\n  private twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\\s*:?\\s*([0-5][0-9])?$/;\n  private uid: string = \"\";\n  private timeFormat: string = \"hh:mm\";\n  private times: string[] = [];\n  private openUp: boolean = false;\n  private buttonAriaLabel: string = intl.formatMessage({\n    id: \"time.selectTime\",\n    defaultMessage: \"Select time\",\n    description: \"Button text for screen readers.\",\n  });\n  @State() displayedErrorMessage?: string | null;\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  @Listen(\"keydown\")\n  handleKey(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"next\");\n        } else {\n          this.moveDown(this.selectedOption);\n        }\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        if (this.isExpanded === false) {\n          this.open(\"previous\");\n        } else {\n          this.moveUp(this.selectedOption);\n        }\n        break;\n      case \"Enter\":\n      case \" \":\n        if (this.isExpanded) {\n          ev.preventDefault();\n          this.handleOptionClick(this.selectedOption.textContent!);\n        }\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isExpanded) {\n          this.close(false);\n        }\n        break;\n      case \"Home\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[0]);\n          this.setDropdownPosition(\"first\");\n        }\n        break;\n      case \"End\":\n        ev.preventDefault();\n        if (this.isExpanded) {\n          this.focusOption(this.optionsList[this.optionsList.length - 1]);\n          this.setDropdownPosition(\"last\");\n        }\n        break;\n    }\n  }\n\n  @Watch(\"errorMessage\")\n  updateErrorState() {\n    this.displayedErrorMessage = this.errorMessage;\n  }\n\n  componentWillLoad() {\n    if (this.label === \"\") {\n      console.error(\n        \"You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.\"\n      );\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n    this.updateErrorState();\n    this.timeFormat = intl.formatMessage({\n      id: \"time.timeFormat\",\n      defaultMessage: \"hh:mm\",\n    });\n\n    this.times = this.generateTimes();\n  }\n\n  componentDidLoad() {\n    this.optionsEl.classList.add(\"hidden\");\n    this.optionsList = Array.from(this.optionsEl.querySelectorAll(\"li\"));\n\n    if (this.value) {\n      this.processInput();\n    }\n  }\n\n  isValidTime(input: string) {\n    return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);\n  }\n\n  generateTimes() {\n    let times = [];\n    let startTime = 0;\n\n    for (let i = 0; startTime < 24 * 60; i++) {\n      const h = Math.floor(startTime / 60);\n      const hour = h.toString().padStart(2, \"0\");\n      const m = (startTime % 60).toString();\n      const min = m.padStart(2, \"0\");\n      times[i] = `${hour}:${min}`;\n      startTime = startTime + 15;\n    }\n\n    return times;\n  }\n\n  findNearestTimeInterval(time: string) {\n    let formattedTime = this.formatToStorage(time);\n    const minutes = parseInt(formattedTime.slice(3, 5));\n\n    // first find the closest 15 min increment\n    if (minutes % 15 !== 0) {\n      const hour = parseInt(formattedTime.slice(0, 2));\n      let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, \"0\");\n      if (roundedMinutes === \"60\") {\n        roundedMinutes = \"00\";\n        let roundedHour = hour + 1;\n        if (roundedHour === 24) {\n          roundedHour = 0;\n        }\n        formattedTime = formattedTime.replace(\n          `${hour.toString().padStart(2, \"0\")}:`,\n          `${roundedHour.toString().padStart(2, \"0\")}:`\n        );\n      }\n      if (parseInt(roundedMinutes) < 8) {\n        roundedMinutes = \"00\";\n      }\n      time = formattedTime.replace(`:${minutes.toString().padStart(2, \"0\")}`, `:${roundedMinutes}`);\n    }\n\n    return time;\n  }\n\n  handleListSelection(time: string) {\n    time = this.findNearestTimeInterval(time);\n\n    const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];\n    option && this.focusOption(option);\n  }\n\n  setValue(time: string) {\n    const previousValue = this.value;\n    this.inputEl.value = this.formatToDisplay(time);\n    this.value = this.formatToStorage(time);\n    // update the selection in the list\n    // so it opens on the closest item\n    this.handleListSelection(time);\n\n    if (previousValue !== this.value) {\n      this.wmTimepickerNewValidValue.emit({ value: this.value });\n    }\n    // deprecated in favor of wmTimepickerNewValidValue and input\n    this.wmTimepickerOnChange.emit({\n      value: this.value,\n      isValid: !!this.displayedErrorMessage,\n    });\n  }\n\n  processInput() {\n    if (this.isValidTime(this.value)) {\n      this.setValue(this.value);\n    }\n    const newErrorMessage = this.determineErrorMessage();\n    this.displayedErrorMessage = newErrorMessage;\n  }\n\n  determineErrorMessage(): string | undefined | null {\n    let message: string | undefined | null = this.errorMessage;\n    const requiredError =\n      this.requiredFieldMessage ||\n      intl.formatMessage({\n        id: \"time.requiredError\",\n        defaultMessage: \"A time is required.\",\n      });\n    const invalidError = intl.formatMessage({\n      id: \"time.invalidTime\",\n      defaultMessage: \"Please enter a valid time.\",\n    });\n    const isValid = this.isValidTime(this.value);\n\n    if (isValid && !this.errorMessage) {\n      message = null;\n    } else if (!isValid && !this.errorMessage) {\n      if (this.requiredField && !this.value) {\n        message = requiredError;\n      } else if (this.value) {\n        message = invalidError;\n      } else {\n        message = null;\n      }\n    }\n\n    return message;\n  }\n\n  splitTime(time: string): [number, string, string?] {\n    const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);\n    let hours = parseInt(splitTime![1]);\n    let minutes = splitTime![2] || \"00\";\n    let amPm = splitTime ? splitTime[3] : undefined;\n\n    // handles edge case uncaught by regex '0pm'\n    if (hours === 0 && amPm?.toUpperCase().includes(\"P\")) {\n      // if user types '0pm' we change it to midnight\n      amPm = \"AM\";\n    }\n    return [hours, minutes, amPm];\n  }\n\n  formatToDisplay(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    // at the moment the component only displays in 12hr AM/PM\n    if (hours === 12 && !amPm) {\n      amPm = \"PM\";\n    }\n    if (hours === 0 || hours === 24) {\n      hours = 12;\n    }\n    if (hours > 12) {\n      hours -= 12;\n      amPm = \"PM\";\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\")) {\n      amPm = \"PM\";\n    } else {\n      amPm = \"AM\";\n    }\n\n    return `${hours.toString().padStart(2, \"0\")}:${minutes} ${amPm}`;\n  }\n\n  formatToStorage(time: string) {\n    let [hours, minutes, amPm] = this.splitTime(time);\n    if (hours === 24) {\n      hours = 0;\n    }\n    if (hours === 12 && amPm && amPm.toUpperCase().includes(\"A\")) {\n      hours -= 12;\n    }\n    if (amPm && amPm.toUpperCase().includes(\"P\") && hours !== 12) {\n      hours += 12;\n    }\n    return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\n  }\n\n  open(itemToSelect?: \"next\" | \"previous\") {\n    this.openUp = shouldOpenUp(this.el, this.optionsEl);\n    this.isExpanded = true;\n    this.optionsEl.classList.remove(\"hidden\");\n\n    if (this.errorMessage || !this.value) {\n      this.handleListSelection(\"09:00\");\n    }\n    this.setDropdownPosition(\"center\", this.selectedOption);\n    this.focusOption(this.selectedOption);\n\n    window.requestAnimationFrame(() => {\n      if (itemToSelect === \"next\") {\n        this.moveDown(this.selectedOption);\n      } else if (itemToSelect === \"previous\") {\n        this.moveUp(this.selectedOption);\n      }\n    });\n  }\n\n  close(returnFocus: boolean = true) {\n    this.isExpanded = false;\n\n    window.setTimeout(() => {\n      this.optionsEl.classList.add(\"hidden\");\n      // Returns focus to button after popup closes (no need if user is tabbing)\n      // Delay is necessary for screenreader to get new expanded state before focus\n      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n      // also UX wise, it makes sense for the button to only be focused after the animation is complete\n      if (returnFocus) {\n        this.buttonEl.focus();\n      }\n    }, 150);\n  }\n\n  focusOption(item: HTMLLIElement): void {\n    this.optionsList.forEach((option) => {\n      option.tabIndex = -1;\n    });\n\n    item.tabIndex = 0;\n    this.selectedOption = item;\n    item.focus();\n  }\n\n  setDropdownPosition(position: string, item?: HTMLLIElement) {\n    switch (position) {\n      case \"top\":\n        const prevItem = item?.previousElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;\n        break;\n      case \"bottom\":\n        const nextItem = item?.nextElementSibling as HTMLLIElement;\n        this.optionsEl.scrollTop =\n          nextItem.getBoundingClientRect().bottom -\n          this.optionsEl.getBoundingClientRect().top +\n          this.optionsEl.scrollTop -\n          this.optionsEl.offsetHeight;\n        break;\n      case \"center\":\n        this.optionsEl.scrollTop =\n          (this.optionsList.findIndex((x) => x.textContent === item?.textContent) - 2) * item!.offsetHeight;\n        break;\n      case \"first\":\n        this.optionsEl.scrollTop = 0;\n        break;\n      case \"last\":\n        this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;\n        break;\n    }\n  }\n\n  moveUp(el: HTMLLIElement) {\n    const prevEl = el.previousElementSibling as HTMLLIElement;\n    if (prevEl) {\n      // scroll option to top of dropdown if partially obscured / out of view\n      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {\n        this.setDropdownPosition(\"top\", el);\n      }\n      this.focusOption(prevEl);\n    } else {\n      this.focusOption(this.optionsList[this.optionsList.length - 1]);\n      this.setDropdownPosition(\"last\");\n    }\n  }\n\n  moveDown(el: HTMLLIElement) {\n    const nextEl = el.nextElementSibling as HTMLLIElement;\n    if (nextEl) {\n      // scroll option to bottom of dropdown if partially obscured / out of view\n      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {\n        this.setDropdownPosition(\"bottom\", el);\n      }\n      this.focusOption(nextEl);\n    } else {\n      this.focusOption(this.optionsList[0]);\n      this.setDropdownPosition(\"first\");\n    }\n  }\n\n  handleOptionClick(time: string) {\n    this.close();\n    this.setValue(time);\n    this.processInput();\n  }\n\n  handleInput() {\n    this.value = this.inputEl.value;\n    if (this.isValidTime(this.value)) {\n      this.handleListSelection(this.findNearestTimeInterval(this.value));\n      this.setDropdownPosition(\"center\", this.selectedOption);\n    }\n  }\n\n  handleInputBlur(ev: FocusEvent) {\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\n    if (!shouldPreventValidation) {\n      this.processInput();\n    }\n    this.tpWrapper.classList.remove(\"focus\");\n  }\n\n  renderOptions() {\n    return this.times.map((time, index) => (\n      <li id={`option${index + 1}`} role=\"option\" onClick={() => this.handleOptionClick(time)}>\n        {this.formatToDisplay(time)}\n      </li>\n    ));\n  }\n\n  render() {\n    return (\n      <Host id={this.uid} invalid={!!this.displayedErrorMessage ? \"true\" : null} onBlur={() => this.close(false)}>\n        <div\n          class={`wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? \"invalid\" : \"\"}`}\n          ref={(t) => (this.tpWrapper = t as HTMLDivElement)}\n        >\n          <div class=\"label-wrapper\">\n            {this.labelPosition !== \"none\" && (\n              <label id={`label-${this.uid}`} class=\"label\" htmlFor={`time-input-${this.uid}`}>\n                {this.label}\n                {this.requiredField && (\n                  <span class=\"required\" aria-hidden=\"true\">\n                    *\n                  </span>\n                )}\n              </label>\n            )}\n          </div>\n          <div>\n            <div class=\"inner-wrapper\">\n              <input\n                id={`time-input-${this.uid}`}\n                aria-label={this.label}\n                aria-describedby={`error-${this.uid}`}\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                onBlur={(ev) => this.handleInputBlur(ev)}\n                onInput={() => this.handleInput()}\n                disabled={this.disabled}\n                aria-required={this.requiredField ? \"true\" : null}\n                placeholder={this.timeFormat}\n                autocomplete=\"off\"\n                onFocus={() => this.tpWrapper.classList.add(\"focus\")}\n              />\n              <button\n                id={`btn-${this.uid}`}\n                class={this.isTabbing ? \"user-is-tabbing\" : \"\"}\n                ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n                disabled={this.disabled}\n                aria-controls={`list-${this.uid}`}\n                aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n                aria-label={this.buttonAriaLabel}\n                aria-describedby={`time-input-${this.uid}`}\n                onClick={() => (this.isExpanded ? this.close() : this.open())}\n                // This addresses an issue in Safari, where clicking buttons does not focus them\n                // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event\n                onMouseDown={(ev) => {\n                  ev.preventDefault();\n                  this.buttonEl.focus();\n                }}\n              >\n                <span class=\"clock\" />\n              </button>\n              <ul\n                class={`options ${this.isExpanded ? \"open\" : \"\"}  ${this.openUp ? \"upwards\" : \"\"}`}\n                id={`list-${this.uid}`}\n                role=\"listbox\"\n                aria-labelledby={`label-${this.uid}`}\n                aria-describedby={this.isExpanded ? \"collapsed\" : null} //For screenreader, to announce state when expanded\n                tabindex={-1}\n                ref={(el) => (this.optionsEl = el as HTMLUListElement)}\n              >\n                {this.renderOptions()}\n              </ul>\n            </div>\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\n              {this.displayedErrorMessage}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-18e58141.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmToggletipCss","Toggletip","exports","this","tooltipMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","class_1","prototype","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","tempTooltip","includes","tooltipPosition","concat","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","_this","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\n  content: \"\";\n  position: absolute;\n  border: solid transparent;\n  height: 0;\n  width: 0;\n  pointer-events: none;\n}\n@mixin toggletipTriangleTop() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-bottom-color: $charcoal;\n  border-bottom-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleBottom() {\n  @include toggletipTriangleBase();\n  top: 100%;\n  border-top-color: $charcoal;\n  border-top-width: rem-calc(4);\n  border-left-width: rem-calc(6);\n  border-right-width: rem-calc(6);\n  margin-left: rem-calc(-6);\n  left: 50%;\n}\n@mixin toggletipTriangleLeft() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-right-color: $charcoal;\n  border-right-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-left-width: 0px;\n  top: calc(50% - 6px);\n  left: rem-calc(-3);\n}\n@mixin toggletipTriangleRight() {\n  @include toggletipTriangleBase();\n  bottom: 100%;\n  border-left-color: $charcoal;\n  border-left-width: rem-calc(4);\n  border-top-width: rem-calc(6);\n  border-bottom-width: rem-calc(6);\n  border-right-width: 0px;\n  top: calc(50% - 6px);\n  right: rem-calc(-3);\n}\n@mixin toggletipTriangleTopLeft() {\n  @include toggletipTriangleTop();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleTopRight() {\n  @include toggletipTriangleTop();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n@mixin toggletipTriangleBottomLeft() {\n  @include toggletipTriangleBottom();\n  margin-left: unset;\n  left: rem-calc(14);\n}\n@mixin toggletipTriangleBottomRight() {\n  @include toggletipTriangleBottom();\n  left: unset;\n  margin-left: unset;\n  right: rem-calc(14);\n}\n\n:host,\nwm-toggletip {\n  display: inline-block;\n  position: relative;\n  height: 40px;\n  width: 40px;\n\n  .button {\n    display: flex;\n    background: none;\n    border: none;\n    padding: 0;\n    width: inherit;\n    height: inherit;\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    cursor: pointer;\n    &:before {\n      @include mdi-icon;\n      content: \"\\f2fc\";\n      font-size: 16px;\n      color: $charcoal;\n      background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\n    }\n    &:focus {\n      outline: none;\n      &.user-is-tabbing {\n        @include focus-style;\n      }\n    }\n  }\n\n  .tooltip {\n    position: absolute;\n    opacity: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    pointer-events: none;\n\n    font-family: inherit;\n    font-size: rem-calc(14);\n    text-transform: none;\n    font-weight: normal;\n    background: black;\n    color: #fff;\n    padding: rem-calc(6);\n    line-height: normal;\n    z-index: 30;\n    white-space: nowrap;\n\n    &.hover {\n      clip: auto;\n      width: auto;\n      height: auto;\n      opacity: 1;\n      transition: opacity 500ms 500ms;\n      padding: rem-calc(6);\n      white-space: nowrap;\n    }\n  }\n\n  .toggletip {\n    position: absolute;\n    max-width: rem-calc(220);\n    width: max-content;\n    padding: rem-calc(8) rem-calc(12);\n    border-radius: rem-calc(3);\n    background: $charcoal;\n    color: white;\n    font-size: 14px;\n    z-index: 30;\n\n    &.top {\n      &:before {\n        @include toggletipTriangleBottom();\n      }\n    }\n\n    &.bottom {\n      &:before {\n        @include toggletipTriangleTop();\n      }\n    }\n\n    &.right {\n      &:before {\n        @include toggletipTriangleLeft();\n      }\n    }\n\n    &.left {\n      &:before {\n        @include toggletipTriangleRight();\n      }\n    }\n\n    &.bottom-right {\n      &:before {\n        @include toggletipTriangleTopLeft();\n      }\n    }\n\n    &.bottom-left {\n      &:before {\n        @include toggletipTriangleTopRight();\n      }\n    }\n\n    &.top-right {\n      &:before {\n        @include toggletipTriangleBottomLeft();\n      }\n    }\n\n    &.top-left {\n      &:before {\n        @include toggletipTriangleBottomRight();\n      }\n    }\n\n    &.hidden {\n      transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\n      visibility: hidden;\n    }\n  }\n\n  .toggletip,\n  .tooltip {\n    &.top {\n      transform: translate(-50%, 0%);\n      bottom: 40px;\n      left: 20px;\n    }\n\n    &.bottom {\n      transform: translate(-50%, 0%);\n      top: 40px;\n      left: 20px;\n    }\n\n    &.right {\n      transform: translate(100%, calc(-50% - 20px));\n      right: 0px;\n    }\n\n    &.left {\n      transform: translate(-100%, calc(-50% - 20px));\n      left: 0px;\n    }\n\n    &.bottom-right {\n      top: 40px;\n      left: 0px;\n    }\n\n    &.bottom-left {\n      top: 40px;\n      right: 0px;\n    }\n\n    &.top-right {\n      bottom: 40px;\n      left: 0px;\n    }\n\n    &.top-left {\n      bottom: 40px;\n      right: 0px;\n    }\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\n\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\nimport { TooltipPlacement } from \"../../global/interfaces\";\n@Component({\n  tag: \"wm-toggletip\",\n  styleUrl: \"wm-toggletip.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Toggletip {\n  @Element() el!: HTMLWmToggletipElement;\n\n  @Prop() label?: string;\n  @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\n  @Prop() tooltipText?: string; // DEPRECATED\n  get tempTooltip() {\n    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\n    return this.tooltip || this.tooltipText;\n  }\n  @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @State() isOpen: boolean = false;\n  @State() isTabbing: boolean = false;\n\n  private toggletipEl!: HTMLDivElement;\n  private tooltipEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private tooltipMessage = intl.formatMessage({\n    id: \"toggletip.moreInformation\",\n    defaultMessage: \"More information\",\n  });\n\n  componentWillLoad() {\n    const validTooltipPlacement = [\n      \"top\",\n      \"right\",\n      \"bottom\",\n      \"left\",\n      \"top-right\",\n      \"top-left\",\n      \"bottom-right\",\n      \"bottom-left\",\n    ];\n\n    if (!this.label) {\n      console.error(\"wm-toggletip must have a label property\");\n    }\n    if (!this.tempTooltip) {\n      console.error(\"wm-toggletip must have a tooltip property\");\n    }\n    if (!validTooltipPlacement.includes(this.tooltipPosition)) {\n      console.error(\n        `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\n      );\n    }\n    if (this.tooltipText) {\n      console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        if (this.isOpen) {\n          ev.stopPropagation(); // prevent closing modal if within one\n          this.close();\n        }\n        break;\n      case \"Tab\":\n        if (this.isOpen) {\n          this.close();\n        }\n    }\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  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    if (this.isOpen) {\n      if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\n        // Re-announce if clicking any part of the component while open\n        this.announceToggletip();\n      } else {\n        this.close();\n      }\n    }\n  }\n\n  open() {\n    this.isOpen = true;\n    this.announceToggletip();\n  }\n\n  close() {\n    this.isOpen = false;\n    this.hideTooltip();\n  }\n\n  handleBlur() {\n    this.hideTooltip();\n    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\n    this.liveRegionEl.innerHTML = \"\";\n  }\n\n  showTooltip() {\n    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\n    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\n    this.setToggletipPosition();\n    this.tooltipEl.classList.add(\"hover\");\n  }\n\n  hideTooltip() {\n    this.tooltipEl.classList.remove(\"hover\");\n  }\n\n  announceToggletip() {\n    this.liveRegionEl.innerHTML = \"\";\n    setTimeout(() => {\n      this.liveRegionEl.innerHTML = this.tempTooltip!;\n    }, 10);\n  }\n\n  setToggletipPosition() {\n    // Vertical\n    if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\n    }\n\n    // Horizontal\n    if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\n    } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\n      this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          type=\"button\"\n          aria-label={this.label}\n          onClick={() => {\n            this.setToggletipPosition();\n            this.open();\n          }}\n          // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltip()}\n          onBlur={() => this.handleBlur()}\n        ></button>\n        <div\n          ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\n          class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\n          aria-hidden=\"true\"\n        >\n          {this.tooltipMessage}\n        </div>\n        <div\n          ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\n          class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\n        >\n          {this.tempTooltip}\n        </div>\n        <div\n          ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          role=\"status\"\n          // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-1a2d8112.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmModalCss","Modal","exports","this","bodyFocusListener","_this","redirectFocusFromBody","Object","defineProperty","class_1","prototype","open","isOpen","modalType","isTypeDialog","customElementToFocus","elementToFocus","el","querySelector","concat","uid","console","warn","closeButtonEl","toggleModal","tempOpen","showModal","hideModal","handleClick","ev","target","overlayEl","focusOnOpenEl","focus","closeModalOnEscape","key","stopPropagation","wmModalCloseTriggered","emit","wmCloseTriggered","setAriaDescribedbyOnModal","setElToFocusOnClose","document","body","style","overflow","tabIndex","removeEventListener","addEventListener","window","requestAnimationFrame","focusOnCloseEl","componentWillLoad","id","error","generateId","componentDidLoad","emitCloseEvent","emitPrimaryEvent","wmModalPrimaryTriggered","wmPrimaryTriggered","emitSecondaryEvent","wmModalSecondaryTriggered","wmSecondaryTriggered","modalBody","getElementById","setAttribute","elToFocus","activeElement","tagName","parentElement","checkForActiveElInShadow","render","h","Host","class","tempModalType","role","tabindex","onFocus","focusLastElement","ref","focusFirstElement"],"sources":["src/components/wm-modal/wm-modal.scss?tag=wm-modal","src/components/wm-modal/wm-modal.tsx"],"sourcesContent":["wm-modal {\n  * {\n    box-sizing: border-box;\n  }\n  @include displayFlex();\n  @include justifyContent(center);\n  @include alignItems(center);\n\n  flex-direction: column;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 2001;\n  width: 80vw;\n  max-width: 750px;\n  max-height: 80vh;\n  @include box-shadow(\n    0px 11px 15px 0px rgba(0, 0, 0, 0.2),\n    0px 9px 46px 8px rgba(0, 0, 0, 0.12),\n    0px 24px 38px 3px rgba(0, 0, 0, 0.14)\n  );\n\n  > * {\n    width: 80vw;\n    max-width: 750px;\n    background: $light-background;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  wm-modal-header,\n  wm-modal-footer {\n    padding: rem-calc(20 30);\n  }\n\n  wm-modal-header {\n    z-index: 2003;\n  }\n\n  wm-modal-footer {\n    z-index: 2003;\n  }\n\n  > :not(wm-modal-header):not(wm-modal-footer) {\n    max-height: calc(80vh - 166px);\n    z-index: 2002;\n  }\n\n  &.wm-modal {\n    wm-modal-header {\n      border-bottom: 1px solid rgb(244, 243, 246);\n    }\n\n    wm-modal-footer {\n      border-top: 1px solid rgb(244, 243, 246);\n    }\n\n    @media only screen and (max-width: 768px) {\n      height: 100%;\n      max-height: none;\n      max-width: none;\n      width: 100vw;\n\n      > * {\n        max-width: none;\n        width: 100vw;\n      }\n\n      > *:not(wm-modal-header):not(wm-modal-footer) {\n        max-height: none;\n        height: calc(100vh - 166px);\n      }\n    }\n  }\n\n  &.wm-dialog {\n    > :not(wm-modal-header):not(wm-modal-footer) {\n      padding: rem-calc(0 30 20 30);\n      font-size: rem-calc(14px);\n      border: none;\n    }\n  }\n\n  .overlay {\n    width: 100vw;\n    height: 100vh;\n    max-width: none;\n    max-height: none;\n    position: fixed !important;\n    top: -1;\n    bottom: 1;\n    left: -1;\n    right: 1;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n    z-index: 2000;\n  }\n\n  &.hide {\n    visibility: hidden;\n  }\n\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n","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"],"mappings":"sqDAAA,IAAMA,EAAa,u/E,ICQNC,EAAKC,EAAA,sB,mfAiBRC,KAAAC,kBAAgC,WAAM,OAAAC,EAAKC,uBAAL,E,UAfU,M,YACE,M,oBAKkB,G,eACZ,K,kBACR,K,mBANxDC,OAAAC,eAAIC,EAAAC,UAAA,WAAQ,C,IAAZ,WAEE,OAAOP,KAAKQ,MAAQR,KAAKS,M,uCAK3BL,OAAAC,eAAIC,EAAAC,UAAA,gBAAa,C,IAAjB,WACE,OAAOP,KAAKU,UAAYV,KAAKU,UAAYV,KAAKW,aAAe,SAAW,O,uCAiB1EP,OAAAC,eAAIC,EAAAC,UAAA,gBAAa,C,IAAjB,WACE,IAAIK,EAA2C,KAE/C,GAAIZ,KAAKa,iBAAmB,WAAab,KAAKa,iBAAmB,YAAa,CAC5ED,EAAuBZ,KAAKc,GAAGC,cAA2B,OAAAC,OAAOhB,KAAKa,eAAc,KAAAG,OAAIhB,KAAKiB,K,MACxF,GAAIjB,KAAKa,eAAgB,CAC9BD,EAAuBZ,KAAKc,GAAGC,cAA2B,IAAMf,KAAKa,iBACpED,GACCM,QAAQC,KACN,4M,CAIN,IAAMC,EAAgBpB,KAAKc,GAAGC,cAA2B,mBAAAC,OAAmBhB,KAAKiB,MACjF,OAAOL,EAAuBA,EAAuBQ,C,uCAMvDd,EAAAC,UAAAc,YAAA,WACErB,KAAKsB,SAAWtB,KAAKuB,YAAcvB,KAAKwB,W,EAW1ClB,EAAAC,UAAAkB,YAAA,SAAYC,GACV1B,KAAKsB,UAAYI,EAAGC,SAAW3B,KAAK4B,WAAa5B,KAAK6B,cAAcC,O,EAItExB,EAAAC,UAAAwB,mBAAA,SAAmBL,GACjB,GAAIA,EAAGM,MAAQ,SAAU,CAEvBN,EAAGO,kBACHjC,KAAKkC,sBAAsBC,OAC3BnC,KAAKoC,iBAAiBD,OACtBnC,KAAKQ,KAAO,K,GAIhBF,EAAAC,UAAAgB,UAAA,eAAArB,EAAAF,KACEA,KAAKqC,4BACLrC,KAAKsC,sBACLC,SAASC,KAAKC,MAAMC,SAAW,SAG/BH,SAASC,KAAKG,SAAW,EACzBJ,SAASC,KAAKI,oBAAoB,QAAS5C,KAAKC,kBAAmB,MACnEsC,SAASC,KAAKK,iBAAiB,QAAS7C,KAAKC,kBAAmB,MAEhE6C,OAAOC,uBAAsB,WAE3BD,OAAOC,uBAAsB,WAAM,OAAA7C,EAAK2B,cAAcC,OAAnB,G,KAKvCxB,EAAAC,UAAAiB,UAAA,eAAAtB,EAAAF,KACEuC,SAASC,KAAKC,MAAMC,SAAW,UAC/BH,SAASC,KAAKG,UAAY,EAC1BJ,SAASC,KAAKI,oBAAoB,QAAS5C,KAAKC,kBAAmB,MACnE6C,OAAOC,uBAAsB,WAAM,OAAA7C,EAAK8C,eAAelB,OAApB,G,EAGrCxB,EAAAC,UAAA0C,kBAAA,eAAA/C,EAAAF,KACE,GAAIA,KAAKS,OAAQ,CACfS,QAAQC,KAAK,+E,CAEf,GAAInB,KAAKW,aAAc,CACrBO,QAAQC,KAAK,4F,CAEf,GAAInB,KAAKa,iBAAmB,WAAab,KAAKa,iBAAmB,YAAa,CAC5E,IAAKb,KAAKc,GAAGoC,GAAI,CACfhC,QAAQiC,MACN,4Q,EAKNnD,KAAKc,GAAGgB,MAAQ,WACd5B,EAAK2B,cAAcC,O,EAGrB9B,KAAKiB,IAAMjB,KAAKc,GAAGoC,GAAKlD,KAAKc,GAAGoC,GAAKE,G,EAGvC9C,EAAAC,UAAA8C,iBAAA,WACE,GAAIrD,KAAKsB,SAAU,CACjBtB,KAAKuB,W,GAKHjB,EAAAC,UAAA+C,eAAN,W,qFACEtD,KAAKkC,sBAAsBC,OAC3BnC,KAAKoC,iBAAiBD,O,iBAIlB7B,EAAAC,UAAAgD,iBAAN,W,qFACEvD,KAAKwD,wBAAwBrB,OAC7BnC,KAAKyD,mBAAmBtB,O,iBAIpB7B,EAAAC,UAAAmD,mBAAN,W,qFACE1D,KAAK2D,0BAA0BxB,OAC/BnC,KAAK4D,qBAAqBzB,O,iBAG5B7B,EAAAC,UAAA8B,0BAAA,WACE,IAAMwB,EAAYtB,SAASuB,eAAe,WAAA9C,OAAWhB,KAAKiB,MAE1D,IAAK4C,EAAW,CACd3C,QAAQC,KACN,8J,KAEG,CACLnB,KAAKc,GAAGiD,aAAa,mBAAoB,yBAAA/C,OAAyBhB,KAAKiB,IAAG,aAAAD,OAAYhB,KAAKiB,K,GAI/FX,EAAAC,UAAA+B,oBAAA,WACE,IAAM0B,EAAYzB,SAAS0B,cAC3B,GAAID,EAAUE,UAAY,cAAe,CACvClE,KAAKgD,eAAiBgB,EAAUG,a,KAC3B,CACLnE,KAAKgD,eAAiBoB,EAAyBJ,E,GAInD1D,EAAAC,UAAAJ,sBAAA,WACE,GAAKoC,SAAS0B,cAA8BC,UAAY,OAAQ,CAC9DlE,KAAK6B,cAAcC,O,GAIvBxB,EAAAC,UAAA8D,OAAA,eAAAnE,EAAAF,KACE,OACEsE,EAACC,EAAI,CACHC,MAAO,GAAAxD,OAAGhB,KAAKsB,SAAW,GAAK,SAAON,OAAG,MAAQhB,KAAKyE,eACtDC,KAAK,SAAQ,mBACK,yBAAA1D,OAAyBhB,KAAKiB,KAAK,aAC1C,OACX0D,SAAU3E,KAAKsB,SAAW,EAAI,KAC9BsD,QAAS,WACP1E,EAAK2E,iBAAiB1C,M,GAGxBmC,EAAA,OAAKE,MAAM,UAAUM,IAAK,SAAChE,GAAE,OAAMZ,EAAK0B,UAAYd,CAAvB,IAC7BwD,EAAA,OACEE,MAAM,UACN7B,SAAU,EACViC,QAAS,WACP1E,EAAK6E,kBAAkB5C,M,wQA9LjB,I"}

package/dist/ripple/p-23e54ad4.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colors","salmon","cyan","forest","sleet","midnight","lavender","periwinkle","gray","allChartsDetails","doughnut","size","thickness","padding","category","doughnut0","doughnut1","doughnut2","doughnut2plus","doughnut3","bar","bar1","bar2","bar3","bar4","bar5","bar6","bar7","showValue","valueFormat","textHiddenMessage","intl","formatMessage","id","defaultMessage","description","seeDetailsMessage","abbrNumber","num","Math","round","amountToPercent","val","total","asInt","amountToDegree","toFixed","number","parseFloat","floor","polarToCartesian","half","radius","startAngle","endAngle","x","cos","PI","y","sin","undefined","x2","y2","x1","y1","getArc","largeArcFlag","chartSize","z","scale","inMin","inMax","outMin","outMax","scaled","minSpacing","width","getMaxTicks","getInterval","largest","maxticks","minimum","magnitude","log10","residual","interval","handleSliceKeyDown","ev","this","popoverEl","open","key","popoverBtn","querySelector","click","handleSliceClick","s","isTabbing","coords","clientX","clientY","openPopover","call","handleSliceFocus","getPosition","target","handleChartKeydown","preventDefault","focusPrevious","focusNext","exitChart","userIsNavigating","title","text","popoverTitle","popoverText","buttonText","sliceRef","window","setTimeout","debouncedClosePopover","debounce","async","document","addEventListener","scrollableParent","findParentWithScrollbar","el","activeEl","checkForActiveElInShadow","activeElement","index","sliceEls","indexOf","length","focusSlice","componentWrapperEl","tabIndex","focusable","map","p","focus","getDetails","chartType","slicesDetails","acc","children","Array","from","reduce","slice","parseInt","getAttribute","forEach","c","i","amount","perc","colorIndex","notStartedColor","color","sliceDetails","legend","offset","uid","inSmallCluster","push","sortSlicesDetails","sortedSlicesDetails","sort","a","b","idx","prev","next","prevPerc","nextPerc","isInSmallCluster","isSmall","prevIsSmall","nextIsSmall","lessThanOnePerc","getPathData","activeAngle","largeArcFlagOuter","largeArcFlagInner","chartDetails","innerRadius","outerRadius","isHybridDoughnut","outerSeparatorOffset","innerSeparatorOffset","outerCoords","innerCoords","moveTo","arc1","line","arc2","renderInstructionsText","chartInstructions","h","renderFilter","stdDeviation","result","operator","in2","in","renderDoughnut","outerSize","class","height","renderPath","transform","renderDoughnutText","fill","d","onClick","onFocus","onKeyDown","role","arcMiddle","renderStackedBar","isHybridBar","drawAxis","tempValueFormat","renderBarText","renderStackedBarSegment","renderCompletionMessage","isLastSlice","style","backgroundColor","renderSimpleBar","numTicks","getBoundingClientRect","lastTickVal","extraTicks","setProperty","labelWidth","showBarLegend","rows","renderSimpleBarLegend","renderSimpleBarItem","ticks","tickVal","showGrid","show","hidden","chartMaxVal","currentChartType","amt","displayValue","renderLegend","showLegend","hasCluster","isBar","cur","mode","renderLegendItem","renderHiddenValuesMessage","legendItem","completionMessage"],"sources":["./src/components/charts/chartFunctions.tsx"],"sourcesContent":["import { h } from \"@stencil/core\";\nimport { checkForActiveElInShadow, debounce, findParentWithScrollbar, getPosition, intl } from \"../../global/functions\";\nimport { LegendItem, ChartType, ChartDetails, SliceDetails, SliceElement } from \"../../global/interfaces\";\n\nconst colors = {\n  salmon: \"#ff5f4e\",\n  cyan: \"#19a1a9\",\n  forest: \"#088000\",\n  sleet: \"#7f97ad\",\n  midnight: \"#2e1b46\",\n  lavender: \"#8b86ca\",\n  periwinkle: \"#575195\",\n  gray: \"#6b6b6b\",\n};\n\nexport const allChartsDetails: { [Key in ChartType]: ChartDetails } = {\n  // for progress monitor\n  doughnut: {\n    size: 155,\n    colors: [colors.forest, colors.gray],\n    thickness: 0.73,\n    padding: 25,\n    category: \"doughnut\",\n  },\n  // deprecated hybrid chart type, should use Progress Indicator's \"doughnut\" instead\n  doughnut0: {\n    size: 155,\n    colors: [colors.forest, colors.gray],\n    thickness: 0.73,\n    padding: 25,\n    category: \"doughnut\",\n  },\n  doughnut1: {\n    size: 130,\n    colors: [colors.lavender, colors.midnight, colors.gray],\n    thickness: 0.5,\n    padding: 90,\n    category: \"doughnut\",\n  },\n  doughnut2: {\n    size: 130,\n    colors: [colors.cyan, colors.salmon, colors.gray],\n    thickness: 0.5,\n    padding: 90,\n    category: \"doughnut\",\n  },\n  // an internal type only for use when doughnut 2 is populated with 4 slices\n  // in this case, the first slice is colored purple\n  doughnut2plus: {\n    size: 130,\n    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],\n    thickness: 0.5,\n    padding: 90,\n    category: \"doughnut\",\n  },\n  doughnut3: {\n    size: 130,\n    colors: [colors.lavender, colors.midnight, \"#0089e4\", colors.forest, \"#ea8500\", \"#d54f41\", \"#146ca9\"],\n    thickness: 0.5,\n    padding: 90,\n    category: \"doughnut\",\n  },\n  // for progress monitor\n  bar: {\n    size: 350,\n    colors: [colors.forest, colors.gray],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  // deprecated hybrid chart type, should use Progress Indicator's \"bar\" instead\n  bar1: {\n    size: 350,\n    colors: [colors.forest, colors.gray],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  bar2: {\n    size: 400,\n    colors: [colors.gray, colors.periwinkle, colors.cyan, colors.salmon],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  bar3: {\n    size: 300,\n    colors: [\"#0d696e\", colors.cyan, \"#8e4129\", colors.salmon],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  bar4: {\n    size: 400,\n    colors: [colors.salmon, colors.cyan, colors.periwinkle],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  bar5: {\n    size: 400,\n    colors: [\n      colors.gray, // this is only used if prop notStartedColor is set\n      colors.lavender,\n      colors.midnight,\n      \"#0089e4\",\n      colors.forest,\n      \"#ea8500\",\n      \"#d54f41\",\n      \"#146ca9\",\n    ],\n    padding: 0,\n    category: \"stackedBar\",\n  },\n  bar6: {\n    size: 400,\n    colors: [colors.lavender],\n    padding: 0,\n    category: \"simpleBar\",\n  },\n  bar7: {\n    size: 400,\n    colors: [colors.periwinkle, colors.cyan, colors.salmon, colors.gray],\n    padding: 0,\n    category: \"simpleBar\",\n  },\n};\n\nfunction showValue(valueFormat: string): string {\n  return valueFormat === \"percentage\" || valueFormat === \"amount\" ? \"show-values\" : \"\";\n}\n\nexport const textHiddenMessage = intl.formatMessage({\n  id: \"chart.hiddenValues\",\n  defaultMessage: \"Values are not shown when too close to each other.\",\n  description: \"Text displayed when a chart has some values hidden\",\n});\n\nexport const seeDetailsMessage = intl.formatMessage({\n  id: \"chart.clickToSeeDetails\",\n  defaultMessage: \"Click or use arrow keys to see details.\",\n  description: \"Text displayed, guiding user to interact to see more details.\",\n});\n\nfunction abbrNumber(num: number) {\n  return num > 999 ? Math.round(num / 100) / 10 + \"K\" : num;\n}\n\nexport function amountToPercent(val: number, total: number, asInt: boolean) {\n  return asInt ? Math.round((val * 100) / total) : Math.round((val * 10000) / total) / 100; // with 2 decimals\n}\n\nexport function amountToDegree(val: number, total: number) {\n  // In a circle of {total}, determine degrees of slice {val}\n  return (val * 360) / total;\n}\n\nexport function toFixed(number: number) {\n  return parseFloat((Math.floor(number * 100) / 100).toFixed(2));\n}\n\nexport function polarToCartesian(half: number, radius: number, startAngle: number, endAngle?: number) {\n  var x = toFixed(half + half * radius * Math.cos((Math.PI * startAngle) / 180));\n  var y = toFixed(half + half * radius * Math.sin((Math.PI * startAngle) / 180));\n  if (endAngle !== undefined) {\n    // if a 2nd angle value was passed, return 2 pairs of coords\n    var x2 = toFixed(half + half * radius * Math.cos((Math.PI * endAngle) / 180));\n    var y2 = toFixed(half + half * radius * Math.sin((Math.PI * endAngle) / 180));\n    return { x1: x, y1: y, x2, y2 };\n  }\n  return { x, y };\n}\n\nfunction getArc(radius: number, largeArcFlag: string, x: number, y: number, chartSize: number) {\n  var z = toFixed((chartSize / 2) * radius);\n  return `A ${z}, ${z} 0 ${largeArcFlag} ${toFixed(x)}, ${toFixed(y)}`;\n}\n\nfunction scale(val: number, inMin: number, inMax: number, outMin: number, outMax: number) {\n  let scaled = ((val - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;\n  // clip the values so that whatever is passed in the output is never smaller than outMin or greater than outMax\n  return scaled < outMin ? outMin : scaled > outMax ? outMax : scaled;\n}\n\nfunction minSpacing(width: number) {\n  // minimum spacing between 2 ticks, in px\n  return scale(width, 300, 900, 70, 150);\n}\n\nfunction getMaxTicks(width: number) {\n  return Math.round(width / minSpacing(width));\n}\n\nfunction getInterval(largest: number, maxticks: number) {\n  const minimum = largest / maxticks;\n  const magnitude = 10 ** Math.floor(Math.log10(minimum));\n  const residual = minimum / magnitude;\n  let interval;\n  if (residual > 5) {\n    interval = 10 * magnitude;\n  } else if (residual > 3) {\n    interval = 5 * magnitude;\n  } else if (residual > 2) {\n    interval = 3 * magnitude;\n  } else if (residual > 1.5) {\n    interval = 2 * magnitude;\n  } else if (residual > 1) {\n    interval = 1.5 * magnitude;\n  } else {\n    interval = magnitude;\n  }\n  return interval;\n}\n\nfunction handleSliceKeyDown(this: any, ev: KeyboardEvent) {\n  if (this.popoverEl && this.popoverEl.open && ev.key === \"Enter\") {\n    const popoverBtn = this.popoverEl.querySelector(\"button\");\n    popoverBtn && popoverBtn.click();\n  }\n}\n\nexport function handleSliceClick(this: any, ev: MouseEvent, s: SliceDetails) {\n  if (this.popoverEl && !this.isTabbing) {\n    s.coords = { x: ev.clientX, y: ev.clientY };\n    openPopover.call(this, s);\n  }\n}\n\nfunction handleSliceFocus(this: any, ev: FocusEvent, s: SliceDetails) {\n  if (this.popoverEl && this.isTabbing) {\n    s.coords = getPosition(ev.target as HTMLElement);\n    openPopover.call(this, s);\n  }\n}\n\nexport function handleChartKeydown(this: any, ev: KeyboardEvent) {\n  switch (ev.key) {\n    // arrow up / left\n    case \"ArrowUp\":\n    case \"ArrowLeft\":\n      ev.preventDefault();\n      this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key\n      focusPrevious.call(this);\n      break;\n    // arrow right / down\n    case \"ArrowRight\":\n    case \"ArrowDown\":\n      ev.preventDefault();\n      this.isTabbing = true; // shd already be true. just in case user clicked on chart then pressed an arrow key\n      focusNext.call(this);\n      break;\n    // tab\n    case \"Tab\":\n      exitChart.call(this);\n      break;\n    case \"Escape\":\n      this.popoverEl!.open = false;\n      this.userIsNavigating = false;\n      break;\n  }\n}\n\nexport function openPopover(this: any, s: SliceDetails) {\n  if (!!this.popoverEl && !!s.title && !!s.text) {\n    this.popoverEl.popoverTitle = s.title;\n    this.popoverEl.popoverText = s.text;\n    this.popoverEl.buttonText = s.buttonText;\n    this.popoverEl.coords = s.coords;\n    this.popoverEl.sliceRef = s.sliceRef;\n    window.setTimeout(() => {\n      if (this.popoverEl) {\n        this.popoverEl.open = true;\n      }\n    }, 30);\n\n    const debouncedClosePopover = debounce(async () => {\n      this.popoverEl!.open = false;\n    }, 10);\n\n    // set up event listeners for scrolling\n    // to close popover on page scroll\n    document.addEventListener(\"scroll\", () => {\n      debouncedClosePopover();\n    });\n\n    // ... and on parent scroll\n    const scrollableParent = findParentWithScrollbar(this.el as HTMLElement);\n    if (!!scrollableParent) {\n      scrollableParent.addEventListener(\"scroll\", () => {\n        debouncedClosePopover();\n      });\n    }\n  }\n}\n\nfunction focusNext(this: any) {\n  const activeEl = checkForActiveElInShadow(document.activeElement as HTMLElement);\n  const index =\n    // if the active el is not in the array the first element gets focused\n    (this.sliceEls!.indexOf(activeEl as HTMLElement) + 1) % this.sliceEls!.length;\n  focusSlice.call(this, index);\n}\n\nfunction focusPrevious(this: any) {\n  if (this.sliceEls) {\n    const activeEl = checkForActiveElInShadow(document.activeElement as HTMLElement);\n    let index = this.sliceEls.indexOf(activeEl as SliceElement);\n\n    if (index === -1) {\n      // not in the array : focus the first slice\n      index = 0;\n    } else if (index === 0) {\n      // first slice : focus the last slice\n      index = this.sliceEls.length - 1;\n    } else {\n      // anything else: focus previous\n      index -= 1;\n    }\n    focusSlice.call(this, index);\n  }\n}\n\nfunction focusSlice(this: any, index: number) {\n  if (this.sliceEls && this.el) {\n    this.userIsNavigating = true;\n    if (this.popoverEl) {\n      this.popoverEl.open = false;\n    }\n    // set tabindex of the wrapper to -1 while slices are being focused, to allow for shft-tabbing out of the component directly\n    this.componentWrapperEl.tabIndex = -1;\n    // @ts-ignore\n    this.el.focusable = false; // for Edge\n    this.sliceEls.map((p: SliceElement) => {\n      p.tabIndex = -1;\n      // @ts-ignore\n      p.focusable = false; // for Edge\n    });\n    this.sliceEls[index].tabIndex = 0;\n    // @ts-ignore\n    this.sliceEls[index].focusable = true; // for Edge\n    this.sliceEls[index].focus();\n    window.setTimeout(() => {\n      if (this.popoverEl) {\n        this.popoverEl.open = true;\n      }\n    }, 10);\n  }\n}\n\nexport function exitChart(this: any) {\n  this.sliceEls &&\n    this.sliceEls.map((p: SliceElement) => {\n      p.tabIndex = -1;\n      // @ts-ignore\n      p.focusable = false; // for Edge\n    });\n  this.userIsNavigating = false;\n  // delay so that we can tab out of component before chart becomes focusable again\n  // and in case user was still pressing an arrow key when they pressed tab\n  window.setTimeout(() => {\n    this.componentWrapperEl.tabIndex = 0;\n    // @ts-ignore\n    this.el.focusable = true; // for Edge\n    if (this.popoverEl) {\n      this.popoverEl.open = false;\n    }\n  }, 100);\n}\n\nexport async function getDetails(this: any, chartType: ChartType) {\n  this.slicesDetails = [];\n  let acc = 0;\n  const children = Array.from(this.el.children) as Array<HTMLWmChartSliceElement>;\n\n  this.total = children.reduce(\n    (total: number, slice: SliceElement) => (total += parseInt(slice.getAttribute(\"amount\") || \"0\")),\n    0\n  );\n\n  children.forEach((c: Element, i: number) => {\n    const amount = parseInt(c.getAttribute(\"amount\") || \"0\");\n    const perc = amountToPercent(amount, this.total, true);\n\n    let colorIndex = i;\n\n    // for bar5, first color should be skipped unless notStartedColor is set to true\n    if (chartType === \"bar5\") {\n      colorIndex = this.notStartedColor ? i : i + 1;\n    }\n\n    // bars in bar6 are all the same color\n    if (chartType === \"bar6\") {\n      colorIndex = 0;\n    }\n\n    const color = allChartsDetails[chartType].colors[colorIndex];\n\n    const sliceDetails: SliceDetails = {\n      amount: amount,\n      perc: perc,\n      legend: c.getAttribute(\"legend\"),\n      color: color || colors.gray,\n      offset: acc,\n      id: `${this.uid}-${i + 1}`,\n      title: c.getAttribute(\"popover-title\"),\n      text: c.getAttribute(\"popover-text\"),\n      buttonText: c.getAttribute(\"popover-button-text\"),\n      sliceRef: c,\n      inSmallCluster: false,\n    };\n    acc += amount;\n    this.slicesDetails.push(sliceDetails);\n  });\n}\n\nfunction sortSlicesDetails(slicesDetails: SliceDetails[], total: number): SliceDetails[] {\n  // sort slices by decreasing amount\n  let sortedSlicesDetails = [...slicesDetails].sort((a: SliceDetails, b: SliceDetails) =>\n    a.amount === b.amount ? 0 : a.amount > b.amount ? -1 : 1\n  );\n\n  let acc = 0;\n\n  sortedSlicesDetails.forEach((s: SliceDetails, idx: number) => {\n    const prev = sortedSlicesDetails[idx === 0 ? sortedSlicesDetails.length - 1 : idx - 1];\n    const next = sortedSlicesDetails[idx === sortedSlicesDetails.length - 1 ? 0 : idx + 1];\n    const prevPerc = amountToPercent(prev.amount, total, true);\n    const nextPerc = amountToPercent(next.amount, total, true);\n\n    s.offset = acc;\n    acc += s.amount;\n    s.inSmallCluster = isInSmallCluster(prevPerc, s.perc, s.amount, nextPerc);\n  });\n  return sortedSlicesDetails;\n}\n\nfunction isInSmallCluster(prevPerc: number, perc: number, amount: number, nextPerc: number): boolean {\n  // determine whether the slice is in a cluster of small values\n  // to avoid percentage text overlap for small values\n  const isSmall = perc < 4;\n  const prevIsSmall = prevPerc < 5;\n  const nextIsSmall = nextPerc < 5;\n  let inSmallCluster = isSmall && (prevIsSmall || nextIsSmall);\n\n  // because <1% slice percentage text has an additional character\n  // the inSmallCluster threshold needs to be widened for that slice only\n  const lessThanOnePerc = perc === 0 && amount > 0;\n  if (lessThanOnePerc && (nextPerc < 8 || prevPerc < 8)) {\n    inSmallCluster = true;\n  }\n\n  return inSmallCluster;\n}\n\nfunction getPathData(this: any, amount: number, offset: number, chartType: ChartType) {\n  const startAngle = amountToDegree(offset, this.total) - 90; // start at noon, not at 3 o'clock\n  const activeAngle = (amount / this.total) * 360;\n  let endAngle = startAngle + activeAngle;\n  const largeArcFlagOuter = activeAngle > 180 ? \"1 1\" : \"0 1\";\n  const largeArcFlagInner = activeAngle > 180 ? \"1 0\" : \"0 0\";\n  const half = this.chartDetails.size / 2;\n  const innerRadius = this.chartDetails.thickness!;\n  const outerRadius = 1;\n\n  const isHybridDoughnut = chartType === \"doughnut0\" || chartType === \"doughnut\";\n  const outerSeparatorOffset = 1.5;\n  const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;\n\n  if (activeAngle === 360) {\n    // fix to avoid bad svg shape when the path goes all around (100%)\n    endAngle -= 0.01;\n  }\n\n  const outerCoords = polarToCartesian(\n    half,\n    outerRadius,\n    startAngle + outerSeparatorOffset, // Addition for slice separator\n    endAngle\n  );\n  const innerCoords = polarToCartesian(\n    half,\n    innerRadius,\n    startAngle + innerSeparatorOffset, // Addition for slice separator\n    endAngle\n  );\n\n  const moveTo = `M ${outerCoords.x1}, ${outerCoords.y1} `;\n  const arc1 = getArc(outerRadius, largeArcFlagOuter, outerCoords.x2!, outerCoords.y2!, this.chartDetails.size);\n  const line = ` L ${innerCoords.x2}, ${innerCoords.y2} `;\n  const arc2 = getArc(innerRadius, largeArcFlagInner, innerCoords.x1!, innerCoords.y1!, this.chartDetails.size);\n\n  return moveTo + arc1 + line + arc2 + \" z\";\n}\n\nexport function renderInstructionsText() {\n  const chartInstructions = intl.formatMessage({\n    id: \"chart.instructions\",\n    defaultMessage: \"Use arrow keys to browse elements, press Tab to exit.\",\n    description: \"For screen readers only, instructions on how to interact with the chart component\",\n  });\n\n  return <div id=\"chart-instructions\">{chartInstructions}</div>;\n}\n\nfunction renderFilter() {\n  return (\n    <defs>\n      <filter id=\"wmHoverDropShadow\">\n        <feGaussianBlur stdDeviation=\"3\"></feGaussianBlur>\n        <feOffset result=\"offsetblur\"></feOffset>\n        <feFlood flood-color=\"#333\"></feFlood>\n        <feComposite operator=\"in\" in2=\"offsetblur\"></feComposite>\n        <feMerge>\n          <feMergeNode></feMergeNode>\n          <feMergeNode in=\"SourceGraphic\"></feMergeNode>\n        </feMerge>\n      </filter>\n    </defs>\n  );\n}\n\nexport function renderDoughnut(this: any, chartType: ChartType) {\n  const outerSize = this.chartDetails.size + this.chartDetails.padding;\n  const isHybridDoughnut = chartType === \"doughnut0\" || chartType === \"doughnut\";\n  // no sorting in progress indicators\n  let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);\n\n  return (\n    <div class=\"chart-wrapper doughnut-wrapper\">\n      <svg width={outerSize + \"px\"} height={outerSize + \"px\"} id={`graphic-${this.uid}`} class=\"doughnut-svg\">\n        {renderFilter()}\n        {slicesDetails.map((s: SliceDetails) => renderPath.call(this, s, chartType))}\n        {isHybridDoughnut ? (\n          <text\n            class=\"value\"\n            x=\"50%\"\n            y=\"50%\"\n            font-size=\"1.5rem\"\n            font-weight=\"500\"\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n          >\n            {amountToPercent(slicesDetails[0].amount, this.total, true) + \"%\"}\n          </text>\n        ) : (\n          <g\n            transform={`translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`}\n            text-anchor=\"middle\"\n            dominant-baseline=\"middle\"\n          >\n            {slicesDetails.map((s: SliceDetails) =>\n              s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : \"\"\n            )}\n          </g>\n        )}\n      </svg>\n    </div>\n  );\n}\n\nfunction renderPath(this: any, s: SliceDetails, chartType: ChartType) {\n  return (\n    <g transform={`translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`}>\n      <path\n        id={s.id}\n        class=\"segment doughnut-segment\"\n        fill={s.amount ? s.color : \"transparent\"}\n        d={getPathData.call(this, s.amount, s.offset, chartType)}\n        onClick={(ev) => handleSliceClick.call(this, ev, s)}\n        onFocus={(ev) => handleSliceFocus.call(this, ev, s)}\n        onKeyDown={(ev) => handleSliceKeyDown.call(this, ev)}\n        role=\"img\"\n        aria-label={s.legend}\n      ></path>\n    </g>\n  );\n}\n\nfunction renderDoughnutText(this: any, s: SliceDetails) {\n  const arcMiddle = amountToDegree(s.offset + s.amount / 2, this.total);\n  let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);\n  return (\n    <text class=\"value\" x={x + \"px\"} y={y + \"px\"}>\n      {`${s.perc > 0 ? s.perc : \"<1\"}%`}\n    </text>\n  );\n}\n\nexport function renderStackedBar(this: any, chartType: ChartType) {\n  const isHybridBar = chartType === \"bar1\" || chartType === \"bar\";\n  return (\n    <div class=\"chart-wrapper bar-wrapper\">\n      {isHybridBar ? (\n        <div class=\"single-perc\">{amountToPercent(this.slicesDetails[0].amount, this.total, true) + \"%\"}</div>\n      ) : (\n        \"\"\n      )}\n      {this.chartType === \"bar3\" && this.drawAxis()}\n      <div class={`inner-stacked-bar-wrapper ${showValue(this.tempValueFormat)}`}>\n        {!isHybridBar ? (\n          <div class=\"values\">\n            {this.slicesDetails.map((s: SliceDetails, idx: number) => this.renderBarText(s, idx))}\n          </div>\n        ) : (\n          \"\"\n        )}\n        <div class=\"stacked-bar-segments-wrapper\">\n          {this.slicesDetails.map((s: SliceDetails, idx: number) => renderStackedBarSegment.call(this, s, idx))}\n        </div>\n        {isHybridBar ? renderCompletionMessage.call(this) : \"\"}\n      </div>\n    </div>\n  );\n}\n\nfunction renderStackedBarSegment(this: any, s: SliceDetails, idx: number) {\n  const isLastSlice = idx !== this.slicesDetails.length - 1;\n  const width = `calc(${amountToPercent(s.amount, this.total, false)}%${isLastSlice ? \" - 2px\" : \"\"})`;\n\n  return (\n    <div\n      class={`segment stacked-bar-segment ${amountToPercent(s.amount, this.total, false) === 0 ? \"zero\" : \"\"}`}\n      style={{\n        backgroundColor: s.color,\n        width: width,\n      }}\n      onClick={(ev) => handleSliceClick.call(this, ev, s)}\n      onFocus={(ev) => handleSliceFocus.call(this, ev, s)}\n      onKeyDown={(ev) => handleSliceKeyDown.call(this, ev)}\n    >\n      <span class=\"sr-only\">{s.legend}</span>\n    </div>\n  );\n}\n\nexport function renderSimpleBar(this: any, chartType: ChartType) {\n  // find largest number and get interval, numTicks, chartMaxVal for all.\n  const largest = this.slicesDetails\n    .map((s: SliceDetails) => s.amount)\n    .reduce((a: number, b: number) => {\n      return a > b ? a : b;\n    });\n  let numTicks = getMaxTicks(this.el.getBoundingClientRect().width);\n  let interval = getInterval(largest, numTicks);\n  // after the algorithm finds an interval, remove extra ticks so that the greater number is always between the last tick and the one before that\n  const lastTickVal = numTicks * interval;\n  const extraTicks = Math.floor((lastTickVal - largest) / interval);\n  numTicks -= extraTicks;\n\n  this.el.style.setProperty(\"--backgroundSize\", 100 / numTicks + \"%\");\n  this.el.style.setProperty(\"--labelWidth\", this.labelWidth);\n\n  if (chartType === \"bar7\" && !this.showBarLegend) {\n    this.el.style.setProperty(\"--labelWidth\", \"0px\");\n  }\n\n  // we have to prep the data here rather than iterate directly in the return statement\n  // because CSS grid needs a flat structure, and return functions must\n  // have a single parent element\n  const rows: HTMLElement[] = [];\n  this.slicesDetails.forEach((s: SliceDetails) => {\n    s.legend && rows.push(renderSimpleBarLegend(s.legend, this.showBarLegend, chartType));\n    rows.push(renderSimpleBarItem.call(this, s, interval, numTicks, largest));\n  });\n\n  const ticks = [];\n  for (let i = 1; i <= numTicks; i++) {\n    const tickVal: number | string = abbrNumber(i * interval);\n    ticks.push(\n      <div class=\"tick\">\n        <span>{tickVal}</span>\n      </div>\n    );\n  }\n\n  const showGrid = chartType === \"bar6\" && this.showGrid && this.el.getBoundingClientRect().width > 300;\n\n  return (\n    <div class=\"chart-wrapper simple-bar-wrapper\">\n      <div class={`chart ${showValue(this.tempValueFormat)}`}>\n        {showGrid && <div class=\"gridlines\"></div>}\n        <div class=\"rows\">{rows}</div>\n      </div>\n      {showGrid && (\n        <div class=\"x-axis\" aria-hidden=\"true\">\n          <div class=\"zero\">\n            <span>0</span>\n          </div>\n          {ticks}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction renderSimpleBarLegend(legend: string, show: boolean, chartType: ChartType): HTMLLabelElement {\n  // not sure how to collapse the left column to 0 width with CSS grid. text should still be available to SR.\n  const hidden = chartType === \"bar7\" && !show ? \" hidden\" : \"\";\n  return <label class={`label${hidden}`}>{legend}</label>;\n}\n\nfunction renderSimpleBarItem(\n  this: any,\n  s: SliceDetails,\n  interval: number,\n  ticks: number,\n  largest: number\n): HTMLDivElement {\n  const chartMaxVal = this.currentChartType === \"bar6\" ? interval * ticks : largest;\n  const width = amountToPercent(s.amount, chartMaxVal, false);\n  const amt = abbrNumber(s.amount);\n  let displayValue = this.tempValueFormat === \"amount\" ? amt : \"\";\n  if (this.currentChartType === \"bar6\" && this.tempValueFormat === \"percentage\") {\n    displayValue = s.amount + \"%\";\n  } else if (this.currentChartType === \"bar7\" && this.tempValueFormat === \"percentage\") {\n    displayValue = amountToPercent(s.amount, this.total, true) + \"%\";\n  }\n\n  return (\n    <div\n      class={\"bar segment\"}\n      style={{\n        backgroundColor: s.color,\n        width: width + \"%\",\n      }}\n      onClick={(ev) => handleSliceClick.call(this, ev, s)}\n      onFocus={(ev) => handleSliceFocus.call(this, ev, s)}\n      onKeyDown={(ev) => handleSliceKeyDown.call(this, ev)}\n    >\n      <div class=\"value\">{displayValue}</div>\n    </div>\n  );\n}\n\nexport function renderLegend(this: any, chartType: ChartType) {\n  // legend is hidden for bar1 and bar6 types regardless of showLegend value\n  if (this.showLegend) {\n    const hasCluster =\n      !this.chartDetails.isBar &&\n      this.slicesDetails.reduce(\n        (hasCluster: boolean, cur: SliceDetails) => (hasCluster = cur.inSmallCluster ? true : hasCluster),\n        false\n      );\n    return (\n      <div class=\"legend-wrapper\">\n        <div class={`legend ${chartType} ${this.mode === \"bar\" ? \"--top\" : \"--bottom\"}`} aria-hidden=\"true\">\n          {this.total > 0\n            ? this.slicesDetails.map((s: SliceDetails) => {\n                // when both legend and amount are omitted, the legend is not shown for that particular option (it's been deactivated by the user)\n                if (!!s.amount || !!s.legend) {\n                  return renderLegendItem({ key: s.legend!, color: s.color });\n                }\n              })\n            : \"\"}\n        </div>\n        {hasCluster && renderHiddenValuesMessage()}\n      </div>\n    );\n  }\n}\n\nexport function renderLegendItem(legendItem: LegendItem) {\n  return (\n    <div class=\"legend-item\">\n      <div class=\"legend-color\" style={{ backgroundColor: legendItem.color }}></div>\n      <div class=\"legend-text\">{legendItem.key}</div>\n    </div>\n  );\n}\n\nexport function renderCompletionMessage(this: any) {\n  if (this.completionMessage) {\n    return <div class=\"completion-message\">{this.completionMessage}</div>;\n  }\n}\n\nexport function renderHiddenValuesMessage() {\n  return (\n    <div class=\"hidden-values-warning\">\n      {textHiddenMessage}\n      <br />\n      {seeDetailsMessage}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/ripple/p-29cd07d5.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTabItemCss","TabItem","exports","this","tabClicked","ev","preventDefault","_this","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","Object","defineProperty","class_1","prototype","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","parentTabList","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","concat","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","class_2","offsetWidth","Array","from","querySelectorAll","tabItems","filter","t","getLinkEl","tab","shadowRoot","querySelector","allPanels","document","tabIds","map","p","getPanel","panels","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","selectedTabItem","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","menuLayout","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","class_3","generateId","tabPanelLoaded"],"sources":["src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n  * {\n    box-sizing: border-box;\n  }\n  font-family: inherit;\n  display: inline-block;\n\n  .tab-item {\n    list-style-type: none;\n    height: 100%;\n    display: inline-block;\n\n    .tab {\n      @include border-radius(0);\n      color: $button-default-text;\n      text-decoration: none;\n      letter-spacing: 0.7px;\n      font-size: rem-calc(14);\n      font-weight: 500;\n      opacity: 1;\n      position: relative;\n      text-transform: uppercase;\n      display: inline-block;\n      height: calc(40 / 12 * 1em);\n      line-height: calc(40 / 12 * 1em);\n      padding-right: rem-calc(24);\n      padding-left: rem-calc(24);\n\n      &[aria-selected=\"true\"] {\n        font-weight: 700;\n        opacity: 1;\n        background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n        background-size: calc(100% - 50px) 3px;\n\n        &.dark {\n          color: $button-primary-text;\n        }\n      }\n\n      &,\n      &:hover,\n      &:active {\n        outline: none;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.dark:not([aria-selected=\"true\"]) {\n        opacity: 0.8;\n        color: $button-primary-text;\n      }\n\n      &.user-is-tabbing:focus:not(:active) {\n        outline: none;\n        @include focus-style;\n        &.dark {\n          @include focus-on-dark;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n","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",":host,\nwm-tab-list {\n  * {\n    box-sizing: border-box;\n  }\n\n  position: relative;\n  white-space: nowrap;\n  height: fit-content;\n  display: block;\n\n  .tabcontainer {\n    margin: 0;\n    margin-left: -24px;\n    width: 100%;\n    height: rem-calc(65);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n\n    &.dark {\n      background: rgb(53, 59, 72);\n      margin: 0;\n    }\n  }\n\n  wm-select {\n    padding: rem-calc(6) 0;\n  }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n","wm-tab-panel {\n  visibility: inherit;\n\n  &.tab-hidden {\n    display: none;\n  }\n\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.user-is-tabbing:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-2a9fa9b5.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmFileCss","File","this","isWithinLegacyUploader","debouncedResize","debounce","isCondensed","el","clientWidth","forceUpdate","fileData","data","file","JSON","parse","progress","match","parseInt","toString","isUploading","hasOwnProperty","singleCharacterWidth","shadowRoot","querySelector","previewButtonTooltip","intl","formatMessage","id","defaultMessage","description","downloadButtonTooltip","deleteButtonTooltip","previewActionMessage","downloadActionMessage","deleteActionMessage","actionMenuLabel","clearButtonText","generateClearButtonLabel","filename","fileName","componentWillLoad","shadowRootHost","getRootNode","host","nodeName","type","uploaderType","resizeObserver","ResizeObserver","observe","componentDidRender","truncateFileName","previewFile","wmIntFilePreviewed","emit","downloadFile","wmIntFileDownloaded","deleteFile","wmIntFileDeleted","leftGroup","leftBoundary","getBoundingClientRect","left","rightGroup","rightBoundary","right","filenameEl","availableSpace","dataset","canFitText","length","extension","slice","lastIndexOf","numFittingCharacters","Math","floor","postEllipsesLength","preEllipsesLength","max","preEllipsesText","postEllipsesText","indexOf","trim","textContent","handleFilenameMouseEnter","ev","target","includes","showTooltip","renderFileName","h","class","onMouseEnter","onMouseLeave","hideTooltip","renderFileInfo","item","showInfo","displayedInfo","lastUpdated","size","renderActionMenu","defaultFileActions","availableActions","fileActions","previewItem","icon","onClick","downloadItem","deleteItem","tooltip","name","renderFileActionButtons","previewButton","downloadButton","deleteButton","renderFileInProgress","style","background","renderFileControls","hasSingleFileAction","split","showActionMenu","renderFile","showCheckmark","errorMessage","wmFileClearErrorClicked","render","Host","role"],"sources":["./src/components/wm-file/wm-file.scss?tag=wm-file&encapsulation=shadow","./src/components/wm-file/wm-file.tsx"],"sourcesContent":[":host,\nwm-file {\n  display: block;\n  width: 100%;\n}\n.file-wrapper {\n  font-size: rem-calc(14);\n  position: relative;\n  list-style: none;\n\n  .file {\n    min-width: 300px;\n    @include border-radius(3px);\n    height: rem-calc(56);\n    padding: 0 rem-calc(20);\n    position: relative; // for progress bar\n    background: $background;\n    border: 1px solid rgb(107, 107, 107);\n\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    .filename {\n      white-space: nowrap;\n    }\n\n    .left-group {\n      overflow: hidden;\n    }\n\n    .right-group {\n      display: flex;\n      align-items: center;\n      padding-left: rem-calc(80);\n      gap: rem-calc(16);\n\n      &.condensed {\n        padding-left: rem-calc(40);\n      }\n\n      .file-controls {\n        display: flex;\n        gap: rem-calc(16);\n      }\n      .file-info {\n        white-space: nowrap;\n      }\n    }\n\n    &.--error {\n      border: 1px solid $error-color;\n      background-color: #f5ebea;\n      height: rem-calc(60);\n    }\n  }\n\n  &.checked {\n    .file:after {\n      @include mdi-icon;\n      content: \"\\f133\";\n      position: absolute;\n      right: calc(-16px + -28px);\n      color: $uploader-checkmark-background;\n      font-size: 28px;\n      line-height: 1;\n    }\n  }\n}\n\n.name-wrapper {\n  overflow: hidden;\n}\n\n.progress {\n  position: absolute;\n  left: 0;\n  top: 0;\n  right: 0;\n  height: 8px;\n}\n\n.error-message {\n  color: $error-color;\n  padding-top: rem-calc(4);\n  font-style: italic;\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n.ch-measure {\n  // used to get the measurement of a single character, for truncation calculations\n  width: 1ch !important;\n  visibility: hidden;\n}\n","import { h, Component, Element, Event, EventEmitter, Prop, State, Host, forceUpdate } from \"@stencil/core\";\nimport { debounce, hideTooltip, intl, showTooltip } from \"../../global/functions\";\nimport { UploadedFile } from \"../../global/interfaces\";\n\n@Component({\n  tag: \"wm-file\",\n  styleUrl: \"wm-file.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class File {\n  @Element() el!: HTMLWmFileElement;\n  @Prop() file?: string;\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\n  @Prop() errorMessage?: string;\n  @State() isCondensed: boolean = false;\n  @Event() wmIntFilePreviewed!: EventEmitter<string>;\n  @Event() wmIntFileDownloaded!: EventEmitter<string>;\n  @Event() wmIntFileDeleted!: EventEmitter<string>;\n  @Event() wmFileClearErrorClicked!: EventEmitter; // undocumented event, for communication with wm-uploader\n  // the file component is used within wm-uploader, which still includes legacy types 1 and 2\n  // some new features are not included in these legacy types, and must use the below in conditions\n  private isWithinLegacyUploader: boolean = false;\n\n  get fileData(): UploadedFile {\n    let data = this.file ? JSON.parse(this.file) : null;\n\n    // sometimes JSON numbers can be received as strings, make sure progress is always a number\n    if (data && data.progress && typeof data.progress === \"string\" && data.progress.match(/^[0-9]+$/)) {\n      data.progress = parseInt(data.progress.toString());\n    }\n    return data;\n  }\n\n  get isUploading(): boolean {\n    return this.fileData && this.fileData.hasOwnProperty(\"progress\") && this.fileData.progress! < 100;\n  }\n\n  get singleCharacterWidth() {\n    return this.el.shadowRoot!.querySelector(\".ch-measure\")!.clientWidth;\n  }\n\n  get previewButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.previewButtonTooltip\",\n      defaultMessage: \"Preview\",\n      description: \"Tooltip of a button that triggers a file to be previewed\",\n    });\n  }\n\n  get downloadButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.downloadButtonTooltip\",\n      defaultMessage: \"Download\",\n      description: \"Tooltip of a button that triggers a file to be downloaded\",\n    });\n  }\n\n  get deleteButtonTooltip() {\n    return intl.formatMessage({\n      id: \"file.deleteButtonTooltip\",\n      defaultMessage: \"Delete\",\n      description: \"Tooltip of a button that triggers a file to be deleted\",\n    });\n  }\n\n  get previewActionMessage() {\n    return intl.formatMessage({\n      id: \"file.previewAction\",\n      defaultMessage: \"Preview File\",\n      description: \"Label of a button that triggers a file to be previewed\",\n    });\n  }\n\n  get downloadActionMessage() {\n    return intl.formatMessage({\n      id: \"file.downloadAction\",\n      defaultMessage: \"Download File\",\n      description: \"Label of a button that triggers a file to be downloaded\",\n    });\n  }\n\n  get deleteActionMessage() {\n    return intl.formatMessage({\n      id: \"file.deleteAction\",\n      defaultMessage: \"Delete File\",\n      description: \"Label of a button that triggers a file to be delete\",\n    });\n  }\n\n  get actionMenuLabel() {\n    return intl.formatMessage({\n      id: \"file.actionMenuLabel\",\n      defaultMessage: \"Actions\",\n      description: \"Label of a button that opens a menu of file actions\",\n    });\n  }\n\n  get clearButtonText() {\n    return intl.formatMessage({\n      id: \"file.clearErrorText\",\n      defaultMessage: \"Clear\",\n      description: \"Text for a button used to clear an error\",\n    });\n  }\n\n  generateClearButtonLabel(filename: string) {\n    return intl.formatMessage(\n      {\n        id: \"file.clearErrorLabel\",\n        defaultMessage: \"Clear {fileName} error\",\n        description: \"Label for a button used to clear an error, including filename\",\n      },\n      { fileName: filename }\n    );\n  }\n\n  componentWillLoad() {\n    const shadowRootHost = (this.el.getRootNode() as ShadowRoot).host;\n\n    if (shadowRootHost && shadowRootHost.nodeName === \"WM-UPLOADER\") {\n      if ((shadowRootHost as HTMLWmUploaderElement).type || (shadowRootHost as HTMLWmUploaderElement).uploaderType) {\n        this.isWithinLegacyUploader = true;\n      }\n    }\n\n    // rerender on resize in case layout needs to change\n    const resizeObserver = new ResizeObserver(() => this.debouncedResize());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidRender() {\n    this.truncateFileName(this.el.shadowRoot!.querySelector(\".file\")!);\n  }\n\n  debouncedResize = debounce(() => {\n    this.isCondensed = this.el.clientWidth < 500;\n    // rerender to show filename truncation changes\n    forceUpdate(this.el);\n  }, 50);\n\n  previewFile(file: UploadedFile) {\n    this.wmIntFilePreviewed.emit(file.id);\n  }\n\n  downloadFile(file: UploadedFile) {\n    this.wmIntFileDownloaded.emit(file.id);\n  }\n\n  deleteFile(file: UploadedFile) {\n    this.wmIntFileDeleted.emit(file.id);\n  }\n\n  truncateFileName(file: Element) {\n    const leftGroup = file.querySelector(\".left-group\");\n    const leftBoundary = leftGroup!.getBoundingClientRect().left;\n    const rightGroup = file.querySelector(\".right-group\");\n    const rightBoundary = rightGroup\n      ? rightGroup.getBoundingClientRect().left\n      : file.getBoundingClientRect().right - 20;\n    const filenameEl = file.querySelector(\".filename\") as HTMLElement;\n    const availableSpace = rightBoundary - leftBoundary;\n\n    let filename = filenameEl.dataset.filename!;\n    const canFitText = availableSpace > filename.length * this.singleCharacterWidth;\n\n    if (!canFitText) {\n      const extension = filename.slice(filename.lastIndexOf(\".\"));\n      const numFittingCharacters = Math.floor(availableSpace / this.singleCharacterWidth);\n\n      // three ellipses, three constant characters, extension\n      const postEllipsesLength = 3 + 3 + extension.length;\n      let preEllipsesLength = Math.max(2, numFittingCharacters - postEllipsesLength);\n      const preEllipsesText = filename.slice(0, preEllipsesLength);\n      const postEllipsesText = filename.slice(filename.indexOf(extension) - 3, filename.length);\n      filename = `${preEllipsesText.trim()}...${postEllipsesText.trim()}`;\n    }\n\n    filenameEl.textContent = filename;\n  }\n\n  handleFilenameMouseEnter(ev: MouseEvent, filename: string) {\n    // only show tooltip if file name is being truncated (has ellipses)\n    if ((ev.target as HTMLElement).textContent!.includes(\"...\")) {\n      showTooltip(\"bottom\", ev.target as HTMLElement, filename);\n    }\n  }\n\n  renderFileName(filename: string, isUploading: boolean) {\n    return (\n      <div class=\"left-group\">\n        <div class=\"name-wrapper\">\n          <span class=\"sr-only\">{filename}</span>\n          <span\n            aria-hidden=\"true\"\n            class=\"filename\"\n            data-filename={filename}\n            onMouseEnter={(ev) => this.handleFilenameMouseEnter(ev, filename)}\n            onMouseLeave={() => hideTooltip()}\n          ></span>\n          {isUploading && <span class=\"sr-only\">uploading</span>}\n          <div class=\"ch-measure\"></div>\n        </div>\n      </div>\n    );\n  }\n\n  renderFileInfo(item: UploadedFile, showInfo: string) {\n    let displayedInfo = \"\";\n    if (showInfo === \"time\" && item.lastUpdated) {\n      displayedInfo = item.lastUpdated;\n    } else if (showInfo === \"size\" && item.size) {\n      displayedInfo = item.size;\n    }\n\n    return <div class=\"file-info\">{displayedInfo}</div>;\n  }\n\n  renderActionMenu(item: UploadedFile) {\n    const defaultFileActions = \"download delete\";\n    const availableActions = item.fileActions || defaultFileActions;\n    const previewItem = (\n      <wm-menuitem icon=\"f208\" onClick={() => this.previewFile(item)}>\n        {this.previewActionMessage}\n      </wm-menuitem>\n    );\n    const downloadItem = (\n      <wm-menuitem icon=\"f1da\" onClick={() => this.downloadFile(item)}>\n        {this.downloadActionMessage}\n      </wm-menuitem>\n    );\n    const deleteItem = (\n      <wm-menuitem icon=\"f1c0\" onClick={() => this.deleteFile(item)}>\n        {this.deleteActionMessage}\n      </wm-menuitem>\n    );\n    return (\n      <wm-action-menu\n        action-menu-type=\"icon\"\n        tooltip={this.actionMenuLabel}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`${item.name} ${this.actionMenuLabel}`}\n      >\n        {availableActions.includes(\"preview\") && previewItem}\n        {availableActions.includes(\"download\") && downloadItem}\n        {availableActions.includes(\"delete\") && deleteItem}\n      </wm-action-menu>\n    );\n  }\n\n  renderFileActionButtons(item: UploadedFile) {\n    const defaultFileActions = \"download delete\";\n    const availableActions = item.fileActions || defaultFileActions;\n\n    const previewButton = (\n      <wm-button\n        class=\"preview-button\"\n        button-type=\"icononly\"\n        tooltip={this.previewButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`preview ${item.name}`}\n        icon=\"f208\"\n        onClick={() => this.previewFile(item)}\n      ></wm-button>\n    );\n    const downloadButton = (\n      <wm-button\n        class=\"download-button\"\n        button-type=\"icononly\"\n        tooltip={this.downloadButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`download ${item.name}`}\n        icon=\"f1da\"\n        onClick={() => this.downloadFile(item)}\n      ></wm-button>\n    );\n    const deleteButton = (\n      <wm-button\n        class=\"delete-button\"\n        button-type=\"icononly\"\n        tooltip={this.deleteButtonTooltip}\n        tooltip-position=\"bottom\"\n        label-for-identical-buttons={`delete ${item.name}`}\n        icon=\"f1c0\"\n        onClick={() => this.deleteFile(item)}\n      ></wm-button>\n    );\n\n    return (\n      <div class=\"file-controls\">\n        {availableActions.includes(\"preview\") && previewButton}\n        {availableActions.includes(\"download\") && downloadButton}\n        {availableActions.includes(\"delete\") && deleteButton}\n      </div>\n    );\n  }\n\n  renderFileInProgress(item: UploadedFile) {\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\n    return (\n      <div class=\"file-wrapper\">\n        <div class=\"file --progress\">\n          <div\n            class=\"progress\"\n            style={{\n              background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,\n            }}\n          ></div>\n          {this.renderFileName(filename, this.isUploading)}\n        </div>\n      </div>\n    );\n  }\n\n  renderFileControls(item: UploadedFile) {\n    const hasSingleFileAction = item.fileActions && item.fileActions.split(\" \").length === 1;\n    const showActionMenu = this.isCondensed && !hasSingleFileAction;\n\n    return showActionMenu ? this.renderActionMenu(item) : this.renderFileActionButtons(item);\n  }\n\n  renderFile(item: UploadedFile) {\n    const filename = item.type ? `${item.name}.${item.type}` : item.name;\n    const showCheckmark = !this.isWithinLegacyUploader && item.progress === 100;\n\n    return (\n      <div class={`file-wrapper ${showCheckmark ? \"checked\" : \"\"}`}>\n        <div class={`file ${this.errorMessage ? \"--error\" : \"\"}`}>\n          {this.renderFileName(filename, this.isUploading)}\n          {!this.errorMessage && (\n            <div class={`right-group ${this.isCondensed ? \"condensed\" : \"\"}`}>\n              {this.showInfo !== \"none\" && this.renderFileInfo(item, this.showInfo)}\n              {item.fileActions !== \"\" && this.renderFileControls(item)}\n            </div>\n          )}\n          {this.errorMessage && (\n            <wm-button\n              permanently-delete\n              button-type=\"textonly\"\n              label-for-identical-buttons={this.generateClearButtonLabel(item.name)}\n              onClick={() => this.wmFileClearErrorClicked.emit({ name: item.name })}\n            >\n              {this.clearButtonText}\n            </wm-button>\n          )}\n        </div>\n        {this.errorMessage && <div class=\"error-message\">{this.errorMessage}</div>}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        {this.isUploading ? this.renderFileInProgress(this.fileData) : this.renderFile(this.fileData)}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}