@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/ripple/p-2abe8404.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["privChartPopoverCss","ChartPopover","exports","this","chartEl","el","parentElement","getRootNode","host","popoverWidth","popoverClicked","Object","defineProperty","class_1","prototype","nodeName","wmChartPopoverButtonTriggered","wmProgressIndicatorButtonTriggered","handleClickOnDocument","open","handleClick","ev","popoverBtnClicked","btnEl","target","contains","handleButtonClick","sliceRef","click","eventToEmit","emit","renderLiveRegion","liveRegion","innerHTML","wrapper","document","createElement","titleEl","popoverTitle","appendChild","textEl","popoverText","buttonText","buttonEl","intl","formatMessage","id","defaultMessage","positionPopover","style","top","coords","y","window","innerWidth","x","left","render","_this","titleAffordance","h","Host","class","concat","tabindex","focusable","ref","onClick","height","width","fill","d"],"sources":["src/components/charts/priv-chart-popover/priv-chart-popover.scss?tag=priv-chart-popover","src/components/charts/priv-chart-popover/priv-chart-popover.tsx"],"sourcesContent":["priv-chart-popover {\n  position: fixed;\n\n  z-index: 10;\n  border-radius: rem-calc(3);\n  @include box-shadow(0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12));\n  background-color: $light-background;\n  font-size: 0.875rem;\n  text-align: left;\n\n  &.user-is-tabbing {\n    .button-text {\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n      background-size: 6px 3px;\n      background-position: 0 1em;\n      border-radius: 0;\n      line-height: normal;\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n.popover {\n  width: rem-calc(168);\n  padding: rem-calc(10 15);\n  box-sizing: border-box;\n\n  & .title {\n    font-size: 1em;\n    font-weight: 500;\n    margin: 0;\n    padding-top: 0;\n    padding-left: 0;\n    padding-bottom: rem-calc(4);\n\n    &.positive {\n      color: $success;\n    }\n\n    &.negative {\n      color: $error;\n    }\n  }\n\n  & .text {\n    margin: 0;\n    margin-bottom: rem-calc(8);\n  }\n\n  & .popover-button {\n    @include box-shadow(none);\n    position: relative;\n    display: inline-block;\n    margin-left: rem-calc(16);\n    padding-left: 0;\n    padding-right: 0;\n    height: auto;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    text-decoration: none;\n    letter-spacing: 0;\n    text-transform: none;\n    text-align: initial;\n    font-size: rem-calc(14);\n    font-weight: 700;\n    color: $button-default-text;\n    line-height: normal;\n\n    & .btn-icon {\n      position: absolute;\n      top: rem-calc(3);\n      left: rem-calc(-16);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      outline: none;\n    }\n\n    &:hover {\n      text-decoration: none;\n      background: none;\n      color: #454077;\n      span {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","import { h, Component, Prop, Host, Element, Watch, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../../global/functions\";\n\n@Component({\n  tag: \"priv-chart-popover\",\n  styleUrl: \"priv-chart-popover.scss\",\n})\nexport class ChartPopover {\n  @Element() el!: HTMLPrivChartPopoverElement;\n  private chartEl: Element = (this.el.parentElement!.getRootNode() as ShadowRoot).host;\n  private btnEl?: HTMLButtonElement;\n  private liveRegion?: HTMLDivElement;\n\n  @Event()\n  wmChartPopoverButtonTriggered!: EventEmitter<HTMLWmChartSliceElement>;\n  @Event()\n  wmProgressIndicatorButtonTriggered!: EventEmitter<HTMLWmProgressSliceElement>;\n  get eventToEmit() {\n    return this.chartEl.nodeName === \"WM-CHART\"\n      ? this.wmChartPopoverButtonTriggered\n      : this.wmProgressIndicatorButtonTriggered;\n  }\n\n  @Prop() sliceRef?: HTMLWmChartSliceElement;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() buttonText?: string;\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() coords: { x?: number; y?: number } = {};\n  private popoverWidth: number = 168;\n\n  private popoverClicked = false;\n\n  @Listen(\"click\", { capture: false, target: \"document\" })\n  handleClickOnDocument() {\n    // because this listener is set document-wide, whenever something inside it is clicked\n    // the event target returned will always be the host (wm-chart)\n    // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here\n    // capture = false in @Listen ensures order of execution\n    this.open = this.popoverClicked;\n    this.popoverClicked = false;\n  }\n\n  @Listen(\"click\", { capture: false })\n  handleClick(ev: MouseEvent) {\n    let popoverBtnClicked = false;\n    if (this.btnEl) {\n      popoverBtnClicked = ev.target === this.btnEl || this.btnEl.contains(ev.target as HTMLElement);\n    }\n    // if the click is on the popover (except the popover button),\n    // set popoverClicked to true. It will be used by the other listener above\n    this.popoverClicked = !popoverBtnClicked && (ev.target === this.el || this.el.contains(ev.target as HTMLElement));\n  }\n\n  handleButtonClick() {\n    if (this.sliceRef) {\n      this.sliceRef.click();\n      this.eventToEmit.emit(this.sliceRef);\n    }\n    this.open = false;\n  }\n\n  renderLiveRegion() {\n    if (this.liveRegion) {\n      this.liveRegion.innerHTML = \"\";\n\n      const wrapper = document.createElement(\"div\");\n\n      const titleEl = document.createElement(\"span\");\n      titleEl.innerHTML = this.popoverTitle + \" \" || \"\";\n      wrapper.appendChild(titleEl);\n\n      const textEl = document.createElement(\"span\");\n      textEl.innerHTML = this.popoverText + \" \" || \"\";\n      wrapper.appendChild(textEl);\n\n      if (this.buttonText) {\n        const buttonEl = document.createElement(\"span\");\n        buttonEl.innerHTML =\n          this.buttonText +\n          \" \" +\n          intl.formatMessage({\n            id: \"chart.infoButton\",\n            defaultMessage: \"Button. Click for more information.\",\n          });\n        wrapper.appendChild(buttonEl);\n      }\n      this.liveRegion.appendChild(wrapper);\n    }\n  }\n\n  @Watch(\"coords\")\n  positionPopover() {\n    this.el!.style.top = this.coords.y + \"px\";\n    if (window.innerWidth - this.coords.x! >= this.popoverWidth + 10) {\n      this.el!.style.left = this.coords.x + \"px\"; // opens on the right\n    } else {\n      this.el!.style.left = this.coords.x! - this.popoverWidth + \"px\"; // opens on the left\n    }\n  }\n\n  render() {\n    const titleAffordance = this.popoverTitle && (this.popoverTitle[0] === \"-\" ? \"negative\" : this.popoverTitle[0] === \"+\" ? \"positive\" : \"\"); \n    return (\n      <Host>\n        {!!this.open ? (\n          <div aria-hidden=\"true\" class=\"popover\">\n            <h1 class={`title ${titleAffordance}`}>{this.popoverTitle}</h1>\n            <p class=\"text\">{this.popoverText}</p>\n            {this.buttonText ? (\n              // @ts-ignore\n              <button\n                tabindex=\"-1\"\n                // @ts-ignore\n                focusable=\"false\"\n                ref={(el) => (this.btnEl = el as HTMLButtonElement)}\n                class=\"popover-button\"\n                onClick={() => this.handleButtonClick()}\n              >\n                <svg class=\"btn-icon\" height=\"9\" width=\"9\">\n                  <path fill=\"#575195\" d=\"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z\" />\n                </svg>\n                <span class=\"button-text\">{this.buttonText}</span>\n              </button>\n            ) : (\n              \"\"\n            )}\n          </div>\n        ) : (\n          \"\"\n        )}\n        <div\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {this.open && this.renderLiveRegion()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +0,0 @@
-{"version":3,"names":["wmChartCss","Chart","this","uid","generateId","slicesDetails","handleStackedBarResize","debounce","async","hasHiddenBarValue","valueEls","el","shadowRoot","querySelectorAll","length","lastVisibleRightEdge","getBoundingClientRect","right","margin","forEach","valueEl","idx","bounds","left","classList","add","remove","debouncedUpdate","forceUpdate","debouncedSliceUpdate","getDetails","call","currentChartType","tempValueFormat","valueFormat","showValues","hybridType","window","innerWidth","popoverEl","querySelector","sliceEls","Array","from","current","chartType","children","chartDetails","allChartsDetails","ariaLabelText","text","label","subinfo","isDoughnut","category","isStackedBar","isSimpleBar","isBar","chartRoleDescription","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","Error","console","warn","resizeObserver","ResizeObserver","observe","handleSliceUpdate","renderBarText","s","val","perc","amount","h","class","style","width","amountToPercent","total","drawAxis","x1","x2","y1","y2","x","y","renderChart","renderStackedBar","renderSimpleBar","renderDoughnut","render","Host","onBlur","exitChart","ref","componentWrapperEl","userIsNavigating","labelPosition","role","tabindex","htmlFor","renderLegend","renderCompletionMessage","renderHiddenValuesMessage","renderInstructionsText"],"sources":["./src/components/charts/wm-chart/wm-chart.scss?tag=wm-chart&encapsulation=shadow","./src/components/charts/wm-chart/wm-chart.tsx"],"sourcesContent":[":host,\nwm-chart {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { debounce, generateId, intl } from \"../../../global/functions\";\nimport {\n  amountToPercent,\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderSimpleBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderHiddenValuesMessage,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\nimport { ChartType, SliceDetails, SliceElement } from \"../../../global/interfaces\";\n\n@Component({\n  tag: \"wm-chart\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-chart.scss\",\n})\nexport class Chart {\n  @Element() el!: HTMLWmChartElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() chartType: ChartType | \"hybrid\" = \"doughnut1\"; // hybrid is not a real ChartType, it gets converted to something else.\n  @Prop() label?: string;\n  @Prop() labelWidth: string = \"150px\";\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() valueFormat?: \"percentage\" | \"amount\";\n  @Prop() showValues?: \"percentage\" | \"amount\"; // DEPRECATED in favor of value-format\n  @Prop() showGrid?: boolean = true; \n  get tempValueFormat() {\n    // use of this getter should be replaced with dateFormat when showValues is fully phased out\n    return this.valueFormat || this.showValues || \"none\";\n  }\n  @Prop() showLegend: boolean = true;\n  @Prop() showBarLegend: boolean = false;\n  @Prop() notStartedColor: boolean = false;\n  // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented\n  // it only works with bar4 and should be used without a legend\n  @Prop() labelPosition: \"left\" | \"top\" = \"top\";\n  @State() isTabbing: boolean = false;\n  @State() userIsNavigating: boolean = false;\n  @State() hasHiddenBarValue: boolean = false;\n\n  get hybridType(): \"doughnut0\" | \"bar1\" {\n    return window.innerWidth > 1340 ? \"doughnut0\" : \"bar1\";\n  }\n  private uid: string = generateId();\n  private total!: number;\n  private slicesDetails: SliceDetails[] = [];\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n\n  get sliceEls(): SliceElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\"));\n  }\n\n  get currentChartType(): ChartType {\n    let current = this.chartType as ChartType;\n\n    if (this.chartType === \"hybrid\") {\n      current = this.hybridType;\n    } else if (this.chartType === \"doughnut2\" && this.el.children.length > 3) {\n      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices\n      current = \"doughnut2plus\";\n    }\n    return current; \n  }\n\n  get chartDetails() {\n    return allChartsDetails[this.currentChartType];\n  }\n\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get isDoughnut() {\n    return this.chartDetails.category === \"doughnut\";\n  }\n\n  get isStackedBar() {\n    return this.chartDetails.category === \"stackedBar\";\n  }\n\n  get isSimpleBar() {\n    return this.chartDetails.category === \"simpleBar\";\n  }\n\n  get isBar() {\n    return this.isStackedBar || this.isSimpleBar;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\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(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */\n\n  async componentWillLoad() {\n    if (!this.label) {\n      throw new Error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n    if (this.showValues) {\n      console.warn(\"wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.\");\n    }\n    await getDetails.call(this, this.currentChartType);\n\n    // rerender on resize\n    // unnecessary for doughnuts (except hybrid) as layout doesn't change\n    if (this.chartType === \"hybrid\" || !this.isDoughnut) {\n      const resizeObserver = new ResizeObserver(() => {\n        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();\n      });\n      resizeObserver.observe(this.el);\n    }\n  }\n\n  handleStackedBarResize = debounce(async () => {\n    let hasHiddenBarValue = false;\n\n    // if any value text overlaps with another, hide it and display warning\n    const valueEls = this.el.shadowRoot!.querySelectorAll(\".value\");\n\n    if (valueEls.length) {\n      let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;\n      let margin = 4;\n\n      valueEls.forEach((valueEl, idx) => {\n        // checks are to the left of each valueEl, so skip the first one\n        if (idx > 0) {\n          const bounds = valueEl.getBoundingClientRect();\n\n          if (bounds.left - margin < lastVisibleRightEdge) {\n            // left edge of current value is overlapping right edge of last visible value\n            valueEl.classList.add(\"hidden\");\n            hasHiddenBarValue = true;\n          } else {\n            valueEl.classList.remove(\"hidden\");\n            lastVisibleRightEdge = bounds.right;\n          }\n        }\n      });\n    }\n\n    this.hasHiddenBarValue = hasHiddenBarValue;\n  }, 100);\n\n  debouncedUpdate = debounce(async () => {\n    forceUpdate(this.el);\n  }, 10);\n\n  debouncedSliceUpdate = debounce(async () => {\n    await getDetails.call(this, this.currentChartType);\n    forceUpdate(this.el);\n  }, 100);\n\n  @Listen(\"wmChartSliceUpdated\")\n  handleSliceUpdate() {\n    this.debouncedSliceUpdate();\n  }\n\n  /* RENDERING */\n  renderBarText(s: SliceDetails, idx: number) {\n    let val;\n    if (this.tempValueFormat === \"percentage\") {\n      // if segment has an amount, but \"0\" percentage (it's below 0.5% and rounded down), still display it as <1%\n      val = s.perc === 0 && s.amount > 0 ? \"<1%\" : `${s.perc}%`;\n    } else if (this.tempValueFormat === \"amount\") {\n      val = s.amount;\n    }\n\n    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper\n    // in order to not disturb the positioning of the other value texts in the entire row\n    return (\n      <div\n        class=\"value-wrapper\"\n        style={{\n          width: `calc(${amountToPercent(s.amount, this.total, false)}%\n        ${idx !== this.slicesDetails.length - 1 ? \" - 2px\" : \"\"}`,\n        }}\n      >\n        <span class=\"value\">{s.amount > 0 && val}</span>\n      </div>\n    );\n  }\n\n  drawAxis() {\n    if (this.currentChartType === \"bar3\") {\n      return (\n        <svg class=\"axis\">\n          <line x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\" />\n          <line x1=\"0\" x2=\"0\" y1=\"0\" y2=\"-85px\" />\n          <line class=\"tick\" x1=\"0.5\" x2=\"0.5\" y1=\"0\" y2=\"6\" />\n          <text x=\"0.5\" y=\"-6\">\n            0%\n          </text>\n          <line class=\"tick\" x1=\"100%\" x2=\"100%\" y1=\"0\" y2=\"6\" />\n          <text x=\"100%\" y=\"-6\">\n            100%\n          </text>\n        </svg>\n      );\n    }\n  }\n\n  renderChart() {\n    if (this.total > 0) {\n      if (this.isStackedBar) {\n        return renderStackedBar.call(this, this.currentChartType);\n      } else if (this.isSimpleBar) {\n        return renderSimpleBar.call(this, this.currentChartType);\n      } else if (this.isDoughnut) {\n        return renderDoughnut.call(this, this.currentChartType);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.currentChartType} ${\n            this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"\n          } ${this.labelPosition === \"left\" && this.currentChartType === \"bar4\" ? \"left-label\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex={0}\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby=\"chart-instructions\"\n        >\n          <label class=\"label\" id={`label-${this.uid}`} htmlFor={`graphic-${this.uid}`}>\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.isBar && renderLegend.call(this, this.currentChartType)}\n          {this.renderChart()}\n          {this.isDoughnut && renderLegend.call(this, this.currentChartType)}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.currentChartType === \"doughnut0\" ? renderCompletionMessage.call(this) : \"\"}\n          {this.hasHiddenBarValue && renderHiddenValuesMessage()}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-313b6073.system.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getRequest","exports","url","__awaiter","_this","fetch","response","_a","sent","ok","json","Error","statusText","postRequest","payload","method","headers","body","JSON","stringify","deleteRequest","putRequest","file","onProgress","Promise","resolve","reject","req","XMLHttpRequest","upload","addEventListener","ev","this","readyState","status","onerror","open","setRequestHeader","concat","name","send"],"sources":["src/global/services/http-service.tsx"],"sourcesContent":["export const getRequest = async (url: string) => {\n  const response = await fetch(url);\n  if (!!response && !!response.ok) {\n    return await response.json();\n  } else {\n    throw new Error(response.statusText);\n  }\n};\n\nexport const postRequest = async (url: string, payload: Object) => {\n  const response = await fetch(url, {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json; charset=utf-8\" },\n    body: JSON.stringify(payload),\n  });\n  if (!!response && !!response.ok) {\n    return await response.json();\n  } else {\n    throw new Error(response.statusText);\n  }\n};\n\nexport const deleteRequest = async (url: string) => {\n  const response = await fetch(url, { method: \"DELETE\" });\n  if (!!response && !!response.ok) {\n    return await response.json();\n  } else {\n    throw new Error(response.statusText);\n  }\n};\n\nexport const putRequest = (url: string, file: File, onProgress: Function) => {\n  return new Promise((resolve, reject) => {\n    // there's no way to track progress with the fetch API, so using XHR\n    const req = new XMLHttpRequest();\n\n    req.upload.addEventListener(\"progress\", (ev) => onProgress(ev));\n\n    req.addEventListener(\"readystatechange\", function () {\n      if (this.readyState === 4 && this.status === 200) {\n        resolve(this);\n      } else if (this.readyState === 4 && this.status !== 200) {\n        reject();\n      }\n    });\n\n    req.onerror = () => reject();\n    req.open(\"PUT\", url, true);\n    req.setRequestHeader(\"Content-Disposition\", `attachment;filename=\"${file.name}\"`);\n    req.send(file);\n  });\n};\n"],"mappings":"oiDAAaA,EAAUC,EAAA,KAAG,SAAOC,GAAW,OAAAC,UAAAC,OAAA,qB,kEACzB,SAAMC,MAAMH,I,OAAvBI,EAAWC,EAAAC,O,OACXF,KAAcA,EAASG,IAAzB,YACK,SAAMH,EAASI,Q,OAAtB,SAAOH,EAAAC,Q,OAEP,MAAM,IAAIG,MAAML,EAASM,Y,cAIhBC,EAAWZ,EAAA,KAAG,SAAOC,EAAaY,GAAe,OAAAX,UAAAC,OAAA,qB,kEAC3C,SAAMC,MAAMH,EAAK,CAChCa,OAAQ,OACRC,QAAS,CAAE,eAAgB,mCAC3BC,KAAMC,KAAKC,UAAUL,M,OAHjBR,EAAWC,EAAAC,O,OAKXF,KAAcA,EAASG,IAAzB,YACK,SAAMH,EAASI,Q,OAAtB,SAAOH,EAAAC,Q,OAEP,MAAM,IAAIG,MAAML,EAASM,Y,cAIhBQ,EAAanB,EAAA,KAAG,SAAOC,GAAW,OAAAC,UAAAC,OAAA,qB,kEAC5B,SAAMC,MAAMH,EAAK,CAAEa,OAAQ,Y,OAAtCT,EAAWC,EAAAC,O,OACXF,KAAcA,EAASG,IAAzB,YACK,SAAMH,EAASI,Q,OAAtB,SAAOH,EAAAC,Q,OAEP,MAAM,IAAIG,MAAML,EAASM,Y,cAIhBS,EAAUpB,EAAA,KAAG,SAACC,EAAaoB,EAAYC,GAClD,OAAO,IAAIC,SAAQ,SAACC,EAASC,GAE3B,IAAMC,EAAM,IAAIC,eAEhBD,EAAIE,OAAOC,iBAAiB,YAAY,SAACC,GAAO,OAAAR,EAAWQ,EAAX,IAEhDJ,EAAIG,iBAAiB,oBAAoB,WACvC,GAAIE,KAAKC,aAAe,GAAKD,KAAKE,SAAW,IAAK,CAChDT,EAAQO,K,MACH,GAAIA,KAAKC,aAAe,GAAKD,KAAKE,SAAW,IAAK,CACvDR,G,KAIJC,EAAIQ,QAAU,WAAM,OAAAT,GAAA,EACpBC,EAAIS,KAAK,MAAOlC,EAAK,MACrByB,EAAIU,iBAAiB,sBAAuB,wBAAAC,OAAwBhB,EAAKiB,KAAI,MAC7EZ,EAAIa,KAAKlB,E,GAEb,G"}

package/dist/ripple/p-3e9da0fb.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmUploaderCss","Uploader","exports","this","inputId","generateId","Object","defineProperty","class_1","prototype","el","shadowRoot","querySelector","concat","type","uploaderType","defaultMaxSize","maxSizeLimit","maxSize","Math","min","maxFiles","fileList","length","errorMessage","internalErrorMessage","intl","formatMessage","id","defaultMessage","description","x","y","effectiveMaxSize","validTypes","fileTypes","split","join","amount","toggleTabbingOn","isTabbing","toggleTabbingOff","handleUploadProgress","ev","_this","map","i","detail","progress","forceUpdate","numFilesInProgress","srProgress","total_1","setInterval","aggregate","reduce","avg","item","announce","percentage","floor","handleFileErrorCleared","filename","name","errorList","filter","error","uploadButtonEl","focus","handleFileDeleted","clearErrors","wmUploaderDeleteFile","emit","wmFileDelete","wmDeleteFile","handleFilePreviewed","wmUploaderPreviewFile","wmFilePreview","handleFileDownloaded","wmUploaderDownloadFile","wmFileDownload","wmDownloadFile","parseFiles","files","list","JSON","parse","forEach","size","match","convertedSize","convertBytes","toFixed","unit","Error","focusAfterRemoval","newFiles","oldFiles","newFileIds_1","file","oldFileIds","removedFileId","includes","indexOf","fileIdPrecedingRemoved_1","fileElPrecedingRemoved","focusedElementsButtons","querySelectorAll","lastButtonInFile","parseRejectedFiles","rejectedFiles","uploadNotifications","newNum","oldNum","setTimeout","notif","finishedMessage","clearInterval","filesUploadingMessage","num","handleErrorMessageChange","isValidSize","bytes","unitOrder","unitIndex","result","parseInt","isDuplicate","hasDuplicateUploadingFile","filesToUpload","some","fileToUpload","hasDuplicateUploadedFile","f","isEmpty","fileLimitReached","isItemUploading","hasOwnProperty","message","liveRegion","textContent","announcement","handleFiles","Array","from","target","fileLimitExceededMessage","hasValidType","push","wmUploaderFilesSelected","wmFilesSelected","value","componentWillLoad","buttonText","console","warn","tempUploaderType","emptyStateText","componentDidLoad","document","body","classList","contains","uploadButtonOnClick","isDisabled","preventDefault","srMsg","fileLimitReachedMessage","renderUploadSvg","h","class","width","height","viewBox","transform","fill","d","renderIcon","rotate","icon","String","fromCodePoint","renderInfo","info","renderNotif","renderError","displayedErrorMessage","renderUploadButton","classes","accessibleLabel","label","requiredField","multiple","onClick","onChange","htmlFor","renderEmptyState","renderErrorList","srMessage","acc","err","formatTimestamp","timestamp","uploadDate","Date","day","getDate","month","getMonth","year","getFullYear","time","toLocaleTimeString","hour","minute","formattedDate","renderInProgressFileList","stringify","showInfo","renderUploadedFileList","lastUpdated","renderFiles","sortBy","sort","a","b","localeCompare","legacyRenderHeader","renderHeader","renderRequirements","acceptedFileTypesMessage","fileCountMessage","maxSizeMessage","renderFooter","numFiles","renderWithItems","hasNewlyUploadedFiles","renderLabel","render","Host","ref"],"sources":["src/components/wm-uploader/wm-uploader.scss?tag=wm-uploader&encapsulation=shadow","src/components/wm-uploader/wm-uploader.tsx"],"sourcesContent":[":host,\nwm-uploader {\n  display: block;\n  position: relative;\n  max-width: 1140px;\n\n  &[dir=\"RTL\"] {\n    .mdi {\n      margin-left: rem-calc(5);\n      margin-right: 0;\n    }\n  }\n  @extend %wm-button;\n\n  input:focus + .wm-button.user-is-tabbing {\n    -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\n    -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\n    box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\n  }\n}\n\n:host *,\nwm-uploader * {\n  box-sizing: border-box;\n}\n\n.wm-button.disabled {\n  // override the %wm-button rule\n  // we want a pointer event when disabled,\n  // to trigger a SR message\n  pointer-events: initial !important;\n}\n\n@include label;\n#label {\n  margin-bottom: rem-calc(8);\n}\n\n.header {\n  .info-wrapper {\n    align-items: center;\n    .info {\n      font-size: rem-calc(14);\n      margin-left: 1rem;\n    }\n  }\n\n  .accepted-types {\n    font-size: rem-calc(14);\n  }\n\n  .requirements {\n    font-size: rem-calc(14);\n    margin-left: rem-calc(16);\n  }\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding: rem-calc(15 30);\n\n  .notif-wrapper {\n    align-items: flex-end;\n  }\n\n  .filecount-wrapper {\n    display: flex;\n    align-items: center;\n    .filecount {\n      font-size: 0.875rem;\n      margin-right: 1rem;\n    }\n  }\n}\n\n.notif-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: rem-calc(12);\n\n  .requirements {\n    display: flex;\n    flex-direction: column;\n  }\n}\n\n.notif,\n#error {\n  padding-top: rem-calc(4);\n  font-size: 0.875rem;\n  font-style: italic;\n\n  &#error {\n    color: $error-color;\n  }\n}\n\n.info-wrapper {\n  position: relative; // for .info\n  display: flex;\n}\n\n.list-container {\n  overflow-y: unset;\n\n  &.checkmark-spacer {\n    margin-right: rem-calc(44);\n  }\n\n  &:has(.error-list, .inprogress-list, .file-list) {\n    margin-top: rem-calc(40);\n  }\n\n  ul {\n    padding: 0;\n    width: 100%;\n    margin: 0;\n\n    wm-file {\n      margin-bottom: rem-calc(8);\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n/// FOR DEPRECATED TYPES ///////////////////////////////////////\n.empty-block {\n  margin: 5rem auto;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  .upload-file {\n    margin-bottom: rem-calc(30);\n  }\n\n  .empty-message {\n    font-size: 0.875rem;\n    &.large {\n      font-size: 1.5rem;\n    }\n    margin-bottom: rem-calc(7);\n  }\n\n  .info-wrapper {\n    justify-content: center;\n    width: 100%; // for .notif\n\n    .wm-button {\n      // Removing the width inherit here to prevent a 100% width\n      // from the info-wrapper. Future proofing a day when\n      // we might want a long notif to wrap.\n      width: auto;\n    }\n  }\n}\n\n.header {\n  &.type1,\n  &.type2 {\n    margin-bottom: 1rem;\n  }\n  .slot-wrapper {\n    display: flex;\n    justify-content: flex-start;\n    align-items: flex-start;\n  }\n}\n\n.notif-wrapper {\n  &.type1,\n  &.type2 {\n    flex-direction: column;\n    margin-bottom: rem-calc(16);\n  }\n}\n\n.list-container {\n  &.type1,\n  &.type2 {\n    overflow-y: auto;\n    ul {\n      margin: revert;\n    }\n    .file-list li,\n    .inprogress-list li {\n      // margin-bottom also on the last element, otherwise tooltip on dl and delete btns triggers a scrollbar\n      margin-bottom: rem-calc(26);\n    }\n    .error-list li {\n      margin-bottom: rem-calc(20);\n    }\n  }\n\n  &.type1 {\n    padding: rem-calc(0 30);\n    height: rem-calc(260);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Listen, Watch } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { generateId, hasValidType, intl } from \"../../global/functions\";\nimport { UploadedFile } from \"../../global/interfaces\";\ninterface ErrorFile {\n  name: string;\n  message: string;\n}\n\n@Component({\n  tag: \"wm-uploader\",\n  styleUrl: \"wm-uploader.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Uploader {\n  @Element() el!: HTMLWmUploaderElement;\n  private liveRegion!: HTMLDivElement;\n  get uploadButtonEl(): HTMLElement {\n    return this.el.shadowRoot!.querySelector(`#${this.inputId}`) as HTMLElement;\n  }\n\n  @Prop({ mutable: true }) uploaderType?: \"1\" | \"2\"; // only mutable for the deprecation transition\n  @Prop() type?: \"1\" | \"2\"; // DEPRECATED in favor of uploaderType\n  get tempUploaderType() {\n    // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out\n    return this.type || this.uploaderType;\n  }\n  @Prop() label?: string;\n  @Prop() buttonText!: string;\n  @Prop() info?: string;\n  @Prop() emptyStateText!: string;\n  @Prop() icon!: string;\n  @Prop() fileTypes: string = \"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\";\n  @Prop() maxSize?: number | null; // in Mb\n  @Prop() maxFiles?: number;\n  @Prop() sortBy: \"name\" | \"date\" = \"date\"; // name is descending (a -> z), date is ascending (earlier -> later)\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\n  @Prop() errorMessage?: string;\n  @Prop() requiredField?: boolean;\n\n  @Prop() files?: string; // String representation of an array of files (the files retrieved from the server)\n  @State() fileList: UploadedFile[] = []; // the string above transformed into the actual array\n  @Prop({ mutable: true }) filesToUpload: File[] = []; // input.files that passed validation\n\n  @State() isTabbing: boolean = false;\n\n  @Prop() rejectedFiles?: string; // String representation of an array of errors to add to errorList, allows devs to display server-side errors\n  @State() errorList: ErrorFile[] = []; // for errors on a particular file\n  @State() notif?: string | null; // for upload notifications\n  @State() internalErrorMessage?: string;\n  @State() announcement: string = \"\";\n  @State() numFilesInProgress?: number | null; // null when not uploading != 0 (when all files are done uploading) != undefined (original state)\n  @State() isCondensed: boolean = false;\n  private srProgress?: any; // setInterval for SR to announce the aggregate progress percentage when things take a long time. stored here so it can be stopped when upload is finished.\n  private inputId = generateId();\n\n  @Event() wmUploaderFilesSelected!: EventEmitter;\n  @Event() wmFilesSelected!: EventEmitter; // deprecated in favor of wmUploaderFilesSelected\n  @Event() wmUploaderDeleteFile!: EventEmitter;\n  @Event() wmDeleteFile!: EventEmitter; // deprecated in favor of wmUploaderDeleteFile\n  @Event() wmUploaderDownloadFile!: EventEmitter;\n  @Event() wmDownloadFile!: EventEmitter; // deprecated in favor of wmUploaderDownloadFile\n  @Event() wmUploaderPreviewFile!: EventEmitter;\n\n  @Event() wmFileDelete!: EventEmitter<string>;\n  @Event() wmFileDownload!: EventEmitter<string>;\n  @Event() wmFilePreview!: EventEmitter<string>;\n\n  get effectiveMaxSize() {\n    const defaultMaxSize = 100;\n    // maxsize cannot be set to over 100Mb\n    const maxSizeLimit = 100;\n\n    return this.maxSize ? Math.min(this.maxSize, maxSizeLimit) : defaultMaxSize;\n  }\n\n  get fileLimitReached() {\n    return this.maxFiles && this.fileList.length >= this.maxFiles;\n  }\n\n  get displayedErrorMessage(): string {\n    return this.errorMessage || this.internalErrorMessage || \"\";\n  }\n\n  get fileLimitExceededMessage() {\n    return intl.formatMessage({\n      id: \"uploader.fileUploadLimitExceeded\",\n      defaultMessage: \"Upload unsuccessful because file selection would exceed the maximum number of files\",\n      description: \"Message displayed when trying to upload too many files\",\n    });\n  }\n\n  get fileLimitReachedMessage() {\n    return intl.formatMessage({\n      id: \"uploader.fileUploadLimitReached\",\n      defaultMessage: \"The maximum number of files has been reached\",\n      description: \"Message displayed when trying to upload additional files, but the limit has been reached\",\n    });\n  }\n\n  get fileCountMessage() {\n    return intl.formatMessage(\n      {\n        id: \"uploader.fileCount\",\n        defaultMessage: \"{x} of {y} Files\",\n        description: \"A count of the number of files currently uploaded\",\n      },\n      { x: this.fileList.length, y: this.maxFiles }\n    );\n  }\n\n  get maxSizeMessage() {\n    return intl.formatMessage(\n      {\n        id: \"uploader.maxSize\",\n        defaultMessage: \"Maximum file size {maxSize}MB\",\n        description: \"An indicator of the maximum file size the uploader allows\",\n      },\n      {\n        maxSize: this.effectiveMaxSize,\n      }\n    );\n  }\n\n  get acceptedFileTypesMessage() {\n    const validTypes = \".\" + this.fileTypes.split(\" \").join(\", .\");\n    return intl.formatMessage(\n      {\n        id: \"uploader.acceptedFileTypes\",\n        defaultMessage: \"Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}\",\n      },\n      {\n        fileTypes: validTypes,\n        amount: this.fileTypes.split(\" \").length,\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(\"wmUploadProgress\")\n  handleUploadProgress(ev: CustomEvent) {\n    this.fileList.map((i) => {\n      if (i.id === ev.detail.id) {\n        i.progress = ev.detail.progress;\n        forceUpdate(this.el);\n      }\n    });\n\n    if (ev.detail.progress === 100) {\n      // inProgressList is not a perfect reflection of how many files are uploading\n      // because even after progress reached 100% the item should remain in the array\n      // (should only be removed once it appears in fileList)\n      this.numFilesInProgress! -= 1;\n    }\n\n    // aggregate the percentages for SR to announce progress\n    if (!this.srProgress && this.numFilesInProgress) {\n      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong\n      this.srProgress = setInterval(() => {\n        const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);\n        this.announce(\n          intl.formatMessage(\n            {\n              id: \"uploader.uploadProgress\",\n              defaultMessage: \"Upload progress: {percentage}%\",\n            },\n            { percentage: Math.floor(aggregate / total) }\n          )\n        );\n      }, 5000);\n    }\n  }\n\n  @Listen(\"wmFileClearErrorClicked\")\n  handleFileErrorCleared(ev: CustomEvent) {\n    const filename = ev.detail.name;\n    this.errorList = this.errorList.filter((error) => error.name != filename);\n    this.uploadButtonEl.focus();\n  }\n\n  @Listen(\"wmIntFileDeleted\")\n  handleFileDeleted(ev: CustomEvent) {\n    this.clearErrors();\n    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files\n    this.wmUploaderDeleteFile.emit(ev.detail);\n    this.wmFileDelete.emit(ev.detail);\n    this.wmDeleteFile.emit(ev.detail); // deprecated\n  }\n\n  @Listen(\"wmIntFilePreviewed\")\n  handleFilePreviewed(ev: CustomEvent) {\n    this.clearErrors();\n    this.wmUploaderPreviewFile.emit(ev.detail);\n    this.wmFilePreview.emit(ev.detail);\n  }\n\n  @Listen(\"wmIntFileDownloaded\")\n  handleFileDownloaded(ev: CustomEvent) {\n    this.clearErrors();\n    this.wmUploaderDownloadFile.emit(ev.detail);\n    this.wmFileDownload.emit(ev.detail);\n    this.wmDownloadFile.emit(ev.detail); // deprecated\n  }\n\n  @Watch(\"files\")\n  parseFiles() {\n    if (!!this.files) {\n      if (typeof this.files === \"string\") {\n        let list = JSON.parse(this.files);\n        if (typeof list === \"object\") {\n          // if size is in byte format, convert to display format\n          list.forEach((item: any) => {\n            if (item.size && (typeof item.size === \"number\" || item.size.match(/^[0-9]+$/))) {\n              const convertedSize = this.convertBytes(item.size);\n              item.size = `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`;\n            }\n          });\n          this.fileList = list;\n        } else {\n          throw new Error(\"could not parse string passed to files attribute\");\n        }\n      } else {\n        throw new Error(\"Attribute 'files' should be a string\");\n      }\n    }\n  }\n\n  @Watch(\"fileList\")\n  focusAfterRemoval(newFiles: UploadedFile[], oldFiles: UploadedFile[]) {\n    if (this.isTabbing && newFiles.length < oldFiles.length) {\n      const newFileIds = newFiles.map((file: UploadedFile) => file.id);\n      const oldFileIds = oldFiles.map((file: UploadedFile) => file.id);\n      // even in the case that multiple files have been removed at once, work off of the first in that group\n      const removedFileId = oldFileIds.filter((id: string) => !newFileIds.includes(id))[0];\n\n      if (oldFileIds.indexOf(removedFileId) > 0) {\n        const fileIdPrecedingRemoved = oldFileIds[oldFileIds.indexOf(removedFileId) - 1];\n        const fileElPrecedingRemoved = this.el.shadowRoot!.querySelector(\"#file-\" + fileIdPrecedingRemoved);\n        const focusedElementsButtons = fileElPrecedingRemoved?.shadowRoot!.querySelectorAll(\"wm-button\");\n\n        if (focusedElementsButtons && focusedElementsButtons.length > 0) {\n          const lastButtonInFile = focusedElementsButtons[focusedElementsButtons.length - 1];\n          lastButtonInFile.focus();\n        } else {\n          // if preceding file has no file action buttons, rerun function with adjusted params\n          // by removing the fileElPrecedingRemoved from the newFiles list, it is now considered the removedFile and looks to focus it's preceding file\n          // if it continues to cannot find an appropriate preceding file and becomes the first file in the list, it focuses the upload button\n          this.focusAfterRemoval(\n            newFiles.filter((file: UploadedFile) => file.id !== fileIdPrecedingRemoved),\n            oldFiles\n          );\n        }\n      } else {\n        this.uploadButtonEl.focus();\n      }\n    }\n  }\n\n  @Watch(\"rejectedFiles\")\n  parseRejectedFiles() {\n    if (!!this.rejectedFiles) {\n      if (typeof this.files === \"string\") {\n        const list = JSON.parse(this.rejectedFiles);\n        if (typeof list === \"object\") {\n          this.errorList = list;\n        } else {\n          throw new Error(\"could not parse string passed to errors attribute\");\n        }\n      } else {\n        throw new Error(\"Attribute 'rejected-files' should be a string\");\n      }\n    }\n  }\n\n  @Watch(\"numFilesInProgress\")\n  uploadNotifications(newNum: number, oldNum: number) {\n    if (oldNum > 0 && newNum === 0) {\n      setTimeout(() => {\n        this.notif = \"\";\n        this.internalErrorMessage = \"\";\n      }, 20 * 1000);\n      const finishedMessage = intl.formatMessage({\n        id: \"uploader.finishedUploading\",\n        defaultMessage: \"Finished uploading\",\n      });\n      this.notif = finishedMessage;\n      this.announce(finishedMessage);\n      this.numFilesInProgress = null;\n      clearInterval(this.srProgress);\n      forceUpdate(this.el);\n    } else if (newNum > 0 && newNum != oldNum) {\n      const filesUploadingMessage = intl.formatMessage(\n        {\n          id: \"uploader.filesUploading\",\n          defaultMessage: \"{num, plural, one {1 file uploading} other {# files uploading}}\",\n        },\n        { num: newNum }\n      );\n      this.notif = filesUploadingMessage;\n      this.announce(filesUploadingMessage);\n      forceUpdate(this.el);\n    }\n  }\n\n  @Watch(\"errorMessage\")\n  handleErrorMessageChange() {\n    if (this.errorMessage) {\n      this.announce(this.errorMessage);\n    }\n  }\n\n  isValidSize(size: number) {\n    return this.convertBytes(size, \"MB\").size <= this.effectiveMaxSize;\n  }\n\n  convertBytes(bytes: number, unit?: \"KB\" | \"MB\" | \"GB\" | \"TB\") {\n    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes\n    const unitOrder = [\"bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\n    let unitIndex = 0;\n    let result = typeof bytes === \"number\" ? bytes : parseInt(bytes);\n\n    if (unit) {\n      // convert until result matches desired unit\n      while (unitOrder.indexOf(unit) > unitIndex) {\n        result /= 1024;\n        unitIndex++;\n      }\n    } else {\n      // convert until result is appropriate unit (value is under 1000)\n      while (result > 1000) {\n        result /= 1024;\n        unitIndex++;\n      }\n    }\n    return { size: result, unit: unitOrder[unitIndex] };\n  }\n\n  isDuplicate(name: string) {\n    const hasDuplicateUploadingFile = this.filesToUpload.some((fileToUpload: File) => fileToUpload.name === name);\n    const hasDuplicateUploadedFile = this.fileList.some((f) => {\n      const filename: string = f.type ? f.name + \".\" + f.type : f.name;\n      return filename === name;\n    });\n\n    return hasDuplicateUploadingFile || hasDuplicateUploadedFile;\n  }\n\n  isEmpty() {\n    return !this.fileList.length && !this.errorList.length;\n  }\n\n  get isDisabled() {\n    // disable if is the uploader is maxed out or if something is uploading\n    return this.fileLimitReached || this.numFilesInProgress! > 0;\n  }\n\n  isItemUploading(item: UploadedFile) {\n    return item.hasOwnProperty(\"progress\") && item.progress! < 100;\n  }\n\n  announce(message: string) {\n    if (this.liveRegion.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.announcement = message;\n  }\n\n  clearErrors() {\n    this.errorList = [];\n    this.notif = \"\";\n    this.internalErrorMessage = \"\";\n  }\n\n  handleFiles(ev: Event) {\n    this.filesToUpload = [];\n    const validTypes = this.fileTypes.split(\" \").join(\", \");\n    const files = Array.from((ev.target! as HTMLInputElement).files!);\n\n    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {\n      this.internalErrorMessage = this.fileLimitExceededMessage;\n      this.announce(this.fileLimitExceededMessage);\n    } else {\n      files &&\n        files.map((file) => {\n          if (!hasValidType(file, this.fileTypes)) {\n            const error = {\n              name: file.name,\n              message: intl.formatMessage(\n                {\n                  id: \"uploader.invalidFileType\",\n                  defaultMessage: \"The file type is invalid. Accepted types: {validTypes}\",\n                },\n                { validTypes }\n              ),\n            };\n            this.errorList.push(error);\n          } else if (file.size === 0) {\n            const error = {\n              name: file.name,\n              message: intl.formatMessage({\n                id: \"uploader.zeroFileSize\",\n                defaultMessage: \"The file must be more than 0 bytes\",\n                description: \"Error message when user attempts to upload a file of no size\",\n              }),\n            };\n            this.errorList.push(error);\n          } else if (!this.isValidSize(file.size)) {\n            const error = {\n              name: file.name,\n              message: intl.formatMessage(\n                {\n                  id: \"uploader.fileTooLarge\",\n                  defaultMessage: \"The selected file is too large. Maximum file size is {size}Mb\",\n                },\n                { size: this.effectiveMaxSize }\n              ),\n            };\n            this.errorList.push(error);\n          } else if (this.isDuplicate(file.name)) {\n            const error = {\n              name: file.name,\n              message: intl.formatMessage({\n                id: \"uploader.duplicateName\",\n                defaultMessage: \"A file with this name already exists.\",\n              }),\n            };\n            this.errorList.push(error);\n          } else {\n            this.filesToUpload.push(file);\n          }\n        });\n\n      if (this.filesToUpload.length > 0) {\n        this.numFilesInProgress = this.filesToUpload.length;\n        this.wmUploaderFilesSelected.emit(this.filesToUpload);\n        this.wmFilesSelected.emit(this.filesToUpload); // deprecated\n      }\n    }\n    (ev.target! as HTMLInputElement).value = \"\"; // reset to ensure that onChange is triggered when the same file is selected a second time\n  }\n\n  componentWillLoad() {\n    if (!this.buttonText) {\n      throw new Error(\"wm-uploader: button-text is a required prop\");\n    }\n\n    if (this.type) {\n      console.warn(\"wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.\");\n    }\n\n    if (this.tempUploaderType === \"1\" && !this.emptyStateText) {\n      throw new Error(\"wm-uploader: empty-state-text is a required prop\");\n    }\n\n    this.parseFiles();\n    this.clearErrors();\n    this.parseRejectedFiles();\n  }\n\n  componentDidLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n  }\n\n  uploadButtonOnClick(ev: Event) {\n    if (this.isDisabled) {\n      // this is a temporary fix.\n      // we need the disabled button to be programmatically focusable\n      // to allow return focus after closing the browser file panel\n      // since it's focusable the button should respond when activated\n      // it looks disabled, and announces the reason why the action cannot\n      // be taken when activated.\n      ev.preventDefault();\n\n      if (this.numFilesInProgress! > 0) {\n        const srMsg = intl.formatMessage({\n          id: \"uploader.waitToUpload\",\n          defaultMessage: \"Please wait for current upload to complete before uploading new files.\",\n          description: \"Message for screen reader users\",\n        });\n        this.announce(srMsg);\n      } else if (this.fileLimitReached) {\n        this.internalErrorMessage = this.fileLimitReachedMessage;\n        this.announce(this.fileLimitReachedMessage);\n      }\n    } else {\n      this.clearErrors();\n    }\n  }\n\n  renderUploadSvg() {\n    return (\n      <svg class=\"upload-file\" width=\"91\" height=\"84\" viewBox=\"0 0 91 84\">\n        <path\n          transform=\"rotate(-180.000000) translate(-452, -255.5)\"\n          fill=\"#eae8ec\"\n          d=\"M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z\"\n        ></path>\n      </svg>\n    );\n  }\n\n  renderIcon() {\n    // mdi attachment icon (paper clip) is horizontal but we want it vertical\n    const rotate = this.icon && this.icon === \"f066\";\n    return (\n      this.icon && (\n        <span class={`mdi ${rotate ? \"rotate\" : \"\"}`}>{String.fromCodePoint(parseInt(`0x${this.icon}`))}</span>\n      )\n    );\n  }\n\n  renderInfo() {\n    return this.info && this.tempUploaderType === \"2\" ? <span class=\"info\">{this.info}</span> : \"\";\n  }\n\n  renderNotif() {\n    return <div class=\"notif\">{this.notif}</div>;\n  }\n\n  renderError() {\n    return <div id=\"error\">{this.displayedErrorMessage}</div>;\n  }\n\n  renderUploadButton(classes: string) {\n    let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : \"\"}${this.buttonText}`;\n\n    return (\n      <div class=\"info-wrapper\">\n        <input\n          name={this.inputId}\n          id={this.inputId}\n          class=\"sr-only\"\n          aria-label={accessibleLabel}\n          aria-required={this.requiredField ? \"true\" : null}\n          aria-describedby={`${this.displayedErrorMessage ? \"error \" : \"\"}file-count max-size accepted-types`}\n          type=\"file\"\n          multiple\n          onClick={(ev) => this.uploadButtonOnClick(ev)}\n          onChange={(ev) => this.handleFiles(ev)}\n        />\n        <label htmlFor={this.inputId} class={`wm-button ${classes}${this.isTabbing ? \" user-is-tabbing\" : \"\"}`}>\n          {this.renderIcon()}\n          {this.buttonText}\n        </label>\n        {this.renderInfo()}\n      </div>\n    );\n  }\n\n  renderEmptyState() {\n    return (\n      <div class=\"empty-block\">\n        {this.renderUploadSvg()}\n        <div class={`empty-message`}>{this.emptyStateText}</div>\n        {this.renderUploadButton(\"-primary empty-button\")}\n        {this.notif && this.renderNotif()}\n        {this.displayedErrorMessage && this.renderError()}\n      </div>\n    );\n  }\n\n  renderErrorList() {\n    let srMessage = this.errorList.reduce(function (acc, err) {\n      return acc + `${err.name}: ${err.message} `;\n    }, \"\");\n    this.announce(srMessage);\n\n    return (\n      <ul class=\"error-list\">\n        {this.errorList.map((err) => (\n          <wm-file file={`{\"name\": \"${err.name}\"}`} error-message={err.message}></wm-file>\n        ))}\n      </ul>\n    );\n  }\n\n  formatTimestamp(timestamp: string): string {\n    const uploadDate = new Date(Date.parse(timestamp));\n    const day = uploadDate.getDate();\n    const month = uploadDate.getMonth() + 1;\n    const year = uploadDate.getFullYear();\n    const time = uploadDate.toLocaleTimeString(\"en-us\", { hour: \"numeric\", minute: \"2-digit\" });\n    const formattedDate = `${month}/${day}/${year} ${time}`;\n\n    return formattedDate;\n  }\n\n  renderInProgressFileList() {\n    return (\n      <ul class=\"inprogress-list\">\n        {this.fileList\n          .filter((item) => this.isItemUploading(item))\n          .map((item) => (\n            <wm-file file={JSON.stringify(item)} show-info={this.showInfo}></wm-file>\n          ))}\n      </ul>\n    );\n  }\n\n  renderUploadedFileList() {\n    return (\n      <ul class=\"file-list\">\n        {this.fileList\n          .filter((item) => !this.isItemUploading(item))\n          .map((item) => {\n            item.lastUpdated = this.formatTimestamp(item.lastUpdated);\n            return <wm-file id={`file-${item.id}`} file={JSON.stringify(item)} show-info={this.showInfo}></wm-file>;\n          })}\n      </ul>\n    );\n  }\n\n  renderFiles() {\n    // if we switch to accepting display format for the wm-uploader's file lastUpdateds, sorting by date will become impossible\n    this.sortBy === \"name\"\n      ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))\n      : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));\n    return (\n      <div>\n        {this.renderInProgressFileList()}\n        {this.renderUploadedFileList()}\n      </div>\n    );\n  }\n\n  legacyRenderHeader() {\n    return (\n      <div class={`header ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\n        <div class=\"slot-wrapper\">\n          <slot />\n          <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\n            {this.renderUploadButton(`-secondary ${this.isDisabled ? \"disabled\" : \"\"}`)}\n            {this.notif && this.renderNotif()}\n            {this.displayedErrorMessage && this.renderError()}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  renderHeader() {\n    return (\n      <div class={`header ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\n        <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\n          {this.renderUploadButton(`-secondary ${this.isDisabled ? \"disabled\" : \"\"}`)}\n          {this.renderRequirements()}\n        </div>\n        <div id=\"accepted-types\" class=\"accepted-types\">\n          {this.acceptedFileTypesMessage}\n        </div>\n        {this.notif && this.renderNotif()}\n        {this.displayedErrorMessage && this.renderError()}\n      </div>\n    );\n  }\n\n  renderRequirements() {\n    return (\n      <div class=\"requirements\">\n        {this.maxFiles && <span id=\"file-count\">{this.fileCountMessage}</span>}\n        {this.maxSize && <span id=\"max-size\">{this.maxSizeMessage}</span>}\n      </div>\n    );\n  }\n\n  renderFooter() {\n    return (\n      <div class=\"footer\">\n        <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\n          <div class=\"filecount-wrapper\">\n            <div class=\"filecount\">\n              {intl.formatMessage(\n                {\n                  id: \"uploader.filesAdded\",\n                  defaultMessage: \"{numFiles, plural, one {1 file added} other {# files added}}\",\n                },\n                { numFiles: this.fileList.length }\n              )}\n            </div>\n            {this.renderUploadButton(`-primary ${this.isDisabled ? \"disabled\" : \"\"}`)}\n          </div>\n          {this.notif && this.renderNotif()}\n          {this.displayedErrorMessage && this.renderError()}\n        </div>\n      </div>\n    );\n  }\n\n  renderWithItems() {\n    // it's possible progress is passed in as a string, so we need to check for \"100\" as well\n    const hasNewlyUploadedFiles =\n      this.fileList.filter((file) => file.progress === (typeof file.progress === \"number\" ? 100 : \"100\")).length > 0;\n    return (\n      <div>\n        {!this.tempUploaderType && this.renderHeader()}\n        {this.tempUploaderType === \"2\" && this.legacyRenderHeader()}\n        <div\n          class={`list-container type${this.tempUploaderType} ${\n            !this.tempUploaderType && hasNewlyUploadedFiles ? \"checkmark-spacer\" : \"\"\n          }`}\n        >\n          {this.errorList.length > 0 && this.renderErrorList()}\n          {this.fileList.length > 0 && this.renderFiles()}\n        </div>\n        {this.tempUploaderType === \"1\" && this.renderFooter()}\n      </div>\n    );\n  }\n\n  renderLabel() {\n    return (\n      <div class={`wrapper ${this.displayedErrorMessage ? \"invalid\" : \"\"}`}>\n        <div id=\"label\" class={`label`}>\n          {this.label}\n          {this.requiredField && (\n            <span class=\"required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.label && this.renderLabel()}\n        {this.isEmpty() && this.tempUploaderType === \"1\" ? this.renderEmptyState() : this.renderWithItems()}\n        <div\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          aria-live=\"assertive\" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title\n          aria-atomic=\"true\"\n        >\n          {this.announcement}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-4091aa36.system.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["window","navigator","plugins","length","console","log","version","wmComponentKeys","ev","key","event","Event","dispatchEvent","document","querySelector","classList","add","wmComponentMouseDownOnce","remove","addEventListener","tooltipContainer","createElement","id","tooltipEl","setAttribute","style","position","overflow","pointerEvents","lineHeight","fontFamily","fontSize","textTransform","fontWeight","background","color","zIndex","maxWidth","marginRight","padding","transitionProperty","transitionDelay","opacity","top","left","transform","willChange","appendChild","body"],"sources":["src/global/global.ts"],"sourcesContent":["import { setMode } from \"@stencil/core\";\nimport { version } from \"../../package.json\";\n\n// PRINT RIPPLE VERSION IN CONSOLE\n// test envs return 0 for plugin.length\n// do not print version number there as it causes issues\nif (window.navigator.plugins.length > 0) {\n  console.log(\"Ripple component library\", version);\n}\n\n// USER-IS-TABBING CLASSES (FOR FOCUS INDICATORS)\n// Dispatching events to track whether user is navigating with keyboard or mouse\nfunction wmComponentKeys(ev: KeyboardEvent) {\n  if (ev.key == \"Tab\") {\n    var event: Event = new Event(\"wmUserIsTabbing\");\n    window.dispatchEvent(event);\n    document.querySelector(\"body\")!.classList.add(\"wmcl-user-is-tabbing\");\n  }\n  if (ev.key == \"ArrowLeft\" || ev.key == \"ArrowUp\" || ev.key == \"ArrowRight\" || ev.key == \"ArrowDown\") {\n    var event: Event = new Event(\"wmUserIsKeying\");\n    window.dispatchEvent(event);\n    document.querySelector(\"body\")!.classList.add(\"wmcl-user-is-keying\");\n  }\n}\n\nfunction wmComponentMouseDownOnce() {\n  var event = new Event(\"wmUserIsNotTabbing\");\n  window.dispatchEvent(event);\n  document.querySelector(\"body\")!.classList.remove(\"wmcl-user-is-tabbing\");\n  document.querySelector(\"body\")!.classList.remove(\"wmcl-user-is-keying\");\n}\n\nwindow.addEventListener(\"keydown\", wmComponentKeys);\nwindow.addEventListener(\"mousedown\", wmComponentMouseDownOnce);\n\n// MODES (FOR PRODUCT-SPECIFIC STYLING)\n//Checks for mode attribute explicitly set on the document. If \"mode\" is set on component, it will override the global mode. Falls back to default (Planning styles)\nsetMode((elm) => {\n  return elm.getAttribute(\"mode\") || document.documentElement.getAttribute(\"mode\") || \"planning\";\n});\n\n// TOOLTIP\n// Add a tooltip element\n// This allows tooltips to be always at the highest stacking context (always on top)\n// Element is added withing a container to avoid performance impact\nconst tooltipContainer = document.createElement(\"div\");\ntooltipContainer.id = \"wm-tooltip-container\";\nconst tooltipEl = document.createElement(\"div\");\ntooltipEl.id = \"wm-tooltip\";\ntooltipEl.setAttribute(\"aria-hidden\", \"true\");\ntooltipEl.style.position = \"fixed\";\ntooltipEl.style.overflow = \"hidden\";\ntooltipEl.style.pointerEvents = \"none\";\ntooltipEl.style.lineHeight = \"normal\";\ntooltipEl.style.fontFamily = \"inherit\";\ntooltipEl.style.fontSize = \"0.875rem\";\ntooltipEl.style.textTransform = \"none\";\ntooltipEl.style.fontWeight = \"normal\";\ntooltipEl.style.background = \"black\";\ntooltipEl.style.color = \"#fff\";\ntooltipEl.style.zIndex = \"999999\";\ntooltipEl.style.maxWidth = \"var(--wmTooltipMaxWidth, 13.75rem)\";\ntooltipEl.style.marginRight = \"1.5rem\";\ntooltipEl.style.padding = \"0.375rem\";\ntooltipEl.style.transitionProperty = \"opacity\";\ntooltipEl.style.transitionDelay = \"opacity\";\ntooltipEl.style.opacity = \"0\";\ntooltipEl.style.top = \"0\";\ntooltipEl.style.left = \"0\";\ntooltipEl.style.transform = \"translateZ(0)\";\ntooltipEl.style.willChange = \"transform\";\ntooltipEl.style.transform = \"translate(var(--wmTooltipLeft), var(--wmTooltipTop))\";\n\ntooltipContainer.appendChild(tooltipEl);\nconst body = document.querySelector(\"body\");\nbody!.appendChild(tooltipContainer);\n"],"mappings":"qFAMA,GAAIA,OAAOC,UAAUC,QAAQC,OAAS,EAAG,CACvCC,QAAQC,IAAI,2BAA4BC,E,CAK1C,SAASC,EAAgBC,GACvB,GAAIA,EAAGC,KAAO,MAAO,CACnB,IAAIC,EAAe,IAAIC,MAAA,mBACvBX,OAAOY,cAAcF,GACrBG,SAASC,cAAc,QAAAC,UAAAC,IAAA,uB,CAEzB,GAAAR,EAAAC,KAAA,aAAAD,EAAAC,KAAA,WAAAD,EAAAC,KAAA,cAAAD,EAAAC,KAAA,aACE,IAAIC,EAAe,IAAIC,MAAM,kBAC7BX,OAAOY,cAAcF,GACrBG,SAASC,cAAc,QAAAC,UAAAC,IAAA,sB,CAE3B,CAEA,SAAAC,IACE,IAAIP,EAAQ,IAAIC,MAAM,sBACtBX,OAAOY,cAAcF,GACrBG,SAASC,cAAc,QAAAC,UAAAG,OAAA,wBACvBL,SAASC,cAAc,QAASC,UAAUG,OAAO,sBACnD,CAEAlB,OAAAmB,iBAAA,UAAAZ,GACAP,OAAOmB,iBAAiB,YAAaF,GAYrC,IAAMG,EAAmBP,SAASQ,cAAc,OAChDD,EAAiBE,GAAK,uBACtB,IAAMC,EAAYV,SAASQ,cAAc,OACzCE,EAAUD,GAAK,aACfC,EAAUC,aAAa,sBACvBD,EAAUE,MAAMC,SAAW,QAC3BH,EAAUE,MAAME,SAAW,SAC3BJ,EAAUE,MAAMG,cAAgB,OAChCL,EAAUE,MAAMI,WAAa,SAC7BN,EAAUE,MAAMK,WAAa,UAC7BP,EAAUE,MAAMM,SAAW,WAC3BR,EAAUE,MAAMO,cAAgB,OAChCT,EAAUE,MAAMQ,WAAa,SAC7BV,EAAUE,MAAMS,WAAa,QAC7BX,EAAUE,MAAMU,MAAQ,OACxBZ,EAAUE,MAAMW,OAAS,SACzBb,EAAUE,MAAMY,SAAW,qCAC3Bd,EAAUE,MAAMa,YAAc,SAC9Bf,EAAUE,MAAMc,QAAU,WAC1BhB,EAAUE,MAAMe,mBAAqB,UACrCjB,EAAUE,MAAMgB,gBAAkB,UAClClB,EAAUE,MAAMiB,QAAU,IAC1BnB,EAAUE,MAAMkB,IAAM,IACtBpB,EAAUE,MAAMmB,KAAO,IACvBrB,EAAUE,MAAMoB,UAAS,gBACzBtB,EAAUE,MAAMqB,WAAa,YAC7BvB,EAAUE,MAAMoB,UAAY,uDAE5BzB,EAAiB2B,YAAYxB,GAC7B,IAAMyB,EAAOnC,SAASC,cAAc,QACpCkC,EAAMD,YAAY3B,E"}

package/dist/ripple/p-45e7b944.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["privChartPopoverCss","ChartPopover","this","chartEl","el","parentElement","getRootNode","host","popoverWidth","popoverClicked","eventToEmit","nodeName","wmChartPopoverButtonTriggered","wmProgressIndicatorButtonTriggered","handleClickOnDocument","open","handleClick","ev","popoverBtnClicked","btnEl","target","contains","handleButtonClick","sliceRef","click","emit","renderLiveRegion","liveRegion","innerHTML","wrapper","document","createElement","titleEl","popoverTitle","appendChild","textEl","popoverText","buttonText","buttonEl","intl","formatMessage","id","defaultMessage","positionPopover","style","top","coords","y","window","innerWidth","x","left","render","titleAffordance","h","Host","class","tabindex","focusable","ref","onClick","height","width","fill","d"],"sources":["./src/components/charts/priv-chart-popover/priv-chart-popover.scss?tag=priv-chart-popover","./src/components/charts/priv-chart-popover/priv-chart-popover.tsx"],"sourcesContent":["priv-chart-popover {\n  position: fixed;\n\n  z-index: 10;\n  border-radius: rem-calc(3);\n  @include box-shadow(0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12));\n  background-color: $light-background;\n  font-size: 0.875rem;\n  text-align: left;\n\n  &.user-is-tabbing {\n    .button-text {\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n      background-size: 6px 3px;\n      background-position: 0 1em;\n      border-radius: 0;\n      line-height: normal;\n    }\n  }\n}\n\n.sr-only {\n  @include srOnly;\n}\n\n.popover {\n  width: rem-calc(168);\n  padding: rem-calc(10 15);\n  box-sizing: border-box;\n\n  & .title {\n    font-size: 1em;\n    font-weight: 500;\n    margin: 0;\n    padding-top: 0;\n    padding-left: 0;\n    padding-bottom: rem-calc(4);\n\n    &.positive {\n      color: $success;\n    }\n\n    &.negative {\n      color: $error;\n    }\n  }\n\n  & .text {\n    margin: 0;\n    margin-bottom: rem-calc(8);\n  }\n\n  & .popover-button {\n    @include box-shadow(none);\n    position: relative;\n    display: inline-block;\n    margin-left: rem-calc(16);\n    padding-left: 0;\n    padding-right: 0;\n    height: auto;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    text-decoration: none;\n    letter-spacing: 0;\n    text-transform: none;\n    text-align: initial;\n    font-size: rem-calc(14);\n    font-weight: 700;\n    color: $button-default-text;\n    line-height: normal;\n\n    & .btn-icon {\n      position: absolute;\n      top: rem-calc(3);\n      left: rem-calc(-16);\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      outline: none;\n    }\n\n    &:hover {\n      text-decoration: none;\n      background: none;\n      color: #454077;\n      span {\n        text-decoration: underline;\n      }\n    }\n  }\n}\n","import { h, Component, Prop, Host, Element, Watch, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../../global/functions\";\n\n@Component({\n  tag: \"priv-chart-popover\",\n  styleUrl: \"priv-chart-popover.scss\",\n})\nexport class ChartPopover {\n  @Element() el!: HTMLPrivChartPopoverElement;\n  private chartEl: Element = (this.el.parentElement!.getRootNode() as ShadowRoot).host;\n  private btnEl?: HTMLButtonElement;\n  private liveRegion?: HTMLDivElement;\n\n  @Event()\n  wmChartPopoverButtonTriggered!: EventEmitter<HTMLWmChartSliceElement>;\n  @Event()\n  wmProgressIndicatorButtonTriggered!: EventEmitter<HTMLWmProgressSliceElement>;\n  get eventToEmit() {\n    return this.chartEl.nodeName === \"WM-CHART\"\n      ? this.wmChartPopoverButtonTriggered\n      : this.wmProgressIndicatorButtonTriggered;\n  }\n\n  @Prop() sliceRef?: HTMLWmChartSliceElement;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() buttonText?: string;\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() coords: { x?: number; y?: number } = {};\n  private popoverWidth: number = 168;\n\n  private popoverClicked = false;\n\n  @Listen(\"click\", { capture: false, target: \"document\" })\n  handleClickOnDocument() {\n    // because this listener is set document-wide, whenever something inside it is clicked\n    // the event target returned will always be the host (wm-chart)\n    // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here\n    // capture = false in @Listen ensures order of execution\n    this.open = this.popoverClicked;\n    this.popoverClicked = false;\n  }\n\n  @Listen(\"click\", { capture: false })\n  handleClick(ev: MouseEvent) {\n    let popoverBtnClicked = false;\n    if (this.btnEl) {\n      popoverBtnClicked = ev.target === this.btnEl || this.btnEl.contains(ev.target as HTMLElement);\n    }\n    // if the click is on the popover (except the popover button),\n    // set popoverClicked to true. It will be used by the other listener above\n    this.popoverClicked = !popoverBtnClicked && (ev.target === this.el || this.el.contains(ev.target as HTMLElement));\n  }\n\n  handleButtonClick() {\n    if (this.sliceRef) {\n      this.sliceRef.click();\n      this.eventToEmit.emit(this.sliceRef);\n    }\n    this.open = false;\n  }\n\n  renderLiveRegion() {\n    if (this.liveRegion) {\n      this.liveRegion.innerHTML = \"\";\n\n      const wrapper = document.createElement(\"div\");\n\n      const titleEl = document.createElement(\"span\");\n      titleEl.innerHTML = this.popoverTitle + \" \" || \"\";\n      wrapper.appendChild(titleEl);\n\n      const textEl = document.createElement(\"span\");\n      textEl.innerHTML = this.popoverText + \" \" || \"\";\n      wrapper.appendChild(textEl);\n\n      if (this.buttonText) {\n        const buttonEl = document.createElement(\"span\");\n        buttonEl.innerHTML =\n          this.buttonText +\n          \" \" +\n          intl.formatMessage({\n            id: \"chart.infoButton\",\n            defaultMessage: \"Button. Click for more information.\",\n          });\n        wrapper.appendChild(buttonEl);\n      }\n      this.liveRegion.appendChild(wrapper);\n    }\n  }\n\n  @Watch(\"coords\")\n  positionPopover() {\n    this.el!.style.top = this.coords.y + \"px\";\n    if (window.innerWidth - this.coords.x! >= this.popoverWidth + 10) {\n      this.el!.style.left = this.coords.x + \"px\"; // opens on the right\n    } else {\n      this.el!.style.left = this.coords.x! - this.popoverWidth + \"px\"; // opens on the left\n    }\n  }\n\n  render() {\n    const titleAffordance = this.popoverTitle && (this.popoverTitle[0] === \"-\" ? \"negative\" : this.popoverTitle[0] === \"+\" ? \"positive\" : \"\"); \n    return (\n      <Host>\n        {!!this.open ? (\n          <div aria-hidden=\"true\" class=\"popover\">\n            <h1 class={`title ${titleAffordance}`}>{this.popoverTitle}</h1>\n            <p class=\"text\">{this.popoverText}</p>\n            {this.buttonText ? (\n              // @ts-ignore\n              <button\n                tabindex=\"-1\"\n                // @ts-ignore\n                focusable=\"false\"\n                ref={(el) => (this.btnEl = el as HTMLButtonElement)}\n                class=\"popover-button\"\n                onClick={() => this.handleButtonClick()}\n              >\n                <svg class=\"btn-icon\" height=\"9\" width=\"9\">\n                  <path fill=\"#575195\" d=\"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z\" />\n                </svg>\n                <span class=\"button-text\">{this.buttonText}</span>\n              </button>\n            ) : (\n              \"\"\n            )}\n          </div>\n        ) : (\n          \"\"\n        )}\n        <div\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\n          class=\"live-region sr-only\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {this.open && this.renderLiveRegion()}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAsB,kgE,MCOfC,EAAY,M,6LAEfC,KAAAC,QAAoBD,KAAKE,GAAGC,cAAeC,cAA6BC,KAoBxEL,KAAAM,aAAuB,IAEvBN,KAAAO,eAAiB,M,mHAJgB,M,YACI,E,CAXzCC,kBACF,OAAOR,KAAKC,QAAQQ,WAAa,WAC7BT,KAAKU,8BACLV,KAAKW,kC,CAcXC,wBAKEZ,KAAKa,KAAOb,KAAKO,eACjBP,KAAKO,eAAiB,K,CAIxBO,YAAYC,GACV,IAAIC,EAAoB,MACxB,GAAIhB,KAAKiB,MAAO,CACdD,EAAoBD,EAAGG,SAAWlB,KAAKiB,OAASjB,KAAKiB,MAAME,SAASJ,EAAGG,O,CAIzElB,KAAKO,gBAAkBS,IAAsBD,EAAGG,SAAWlB,KAAKE,IAAMF,KAAKE,GAAGiB,SAASJ,EAAGG,Q,CAG5FE,oBACE,GAAIpB,KAAKqB,SAAU,CACjBrB,KAAKqB,SAASC,QACdtB,KAAKQ,YAAYe,KAAKvB,KAAKqB,S,CAE7BrB,KAAKa,KAAO,K,CAGdW,mBACE,GAAIxB,KAAKyB,WAAY,CACnBzB,KAAKyB,WAAWC,UAAY,GAE5B,MAAMC,EAAUC,SAASC,cAAc,OAEvC,MAAMC,EAAUF,SAASC,cAAc,QACvCC,EAAQJ,UAAY1B,KAAK+B,aAAe,KAAO,GAC/CJ,EAAQK,YAAYF,GAEpB,MAAMG,EAASL,SAASC,cAAc,QACtCI,EAAOP,UAAY1B,KAAKkC,YAAc,KAAO,GAC7CP,EAAQK,YAAYC,GAEpB,GAAIjC,KAAKmC,WAAY,CACnB,MAAMC,EAAWR,SAASC,cAAc,QACxCO,EAASV,UACP1B,KAAKmC,WACL,IACAE,EAAKC,cAAc,CACjBC,GAAI,mBACJC,eAAgB,wCAEpBb,EAAQK,YAAYI,E,CAEtBpC,KAAKyB,WAAWO,YAAYL,E,EAKhCc,kBACEzC,KAAKE,GAAIwC,MAAMC,IAAM3C,KAAK4C,OAAOC,EAAI,KACrC,GAAIC,OAAOC,WAAa/C,KAAK4C,OAAOI,GAAMhD,KAAKM,aAAe,GAAI,CAChEN,KAAKE,GAAIwC,MAAMO,KAAOjD,KAAK4C,OAAOI,EAAI,I,KACjC,CACLhD,KAAKE,GAAIwC,MAAMO,KAAOjD,KAAK4C,OAAOI,EAAKhD,KAAKM,aAAe,I,EAI/D4C,SACE,MAAMC,EAAkBnD,KAAK+B,eAAiB/B,KAAK+B,aAAa,KAAO,IAAM,WAAa/B,KAAK+B,aAAa,KAAO,IAAM,WAAa,IACtI,OACEqB,EAACC,EAAI,OACArD,KAAKa,KACNuC,EAAA,qBAAiB,OAAOE,MAAM,WAC5BF,EAAA,MAAIE,MAAO,SAASH,KAAoBnD,KAAK+B,cAC7CqB,EAAA,KAAGE,MAAM,QAAQtD,KAAKkC,aACrBlC,KAAKmC,WAEJiB,EAAA,UACEG,SAAS,KAETC,UAAU,QACVC,IAAMvD,GAAQF,KAAKiB,MAAQf,EAC3BoD,MAAM,iBACNI,QAAS,IAAM1D,KAAKoB,qBAEpBgC,EAAA,OAAKE,MAAM,WAAWK,OAAO,IAAIC,MAAM,KACrCR,EAAA,QAAMS,KAAK,UAAUC,EAAE,uEAEzBV,EAAA,QAAME,MAAM,eAAetD,KAAKmC,aACzB,IAIP,GAIRiB,EAAA,OACEK,IAAMvD,GAAQF,KAAKyB,WAAavB,EAChCoD,MAAM,sBAAqB,YACjB,SAAQ,cACN,QAEXtD,KAAKa,MAAQb,KAAKwB,oB"}

package/dist/ripple/p-4a45a473.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmInputCss","Input","this","uid","previousBlurredValue","numberErrorMessage","intl","formatMessage","id","defaultMessage","charCount","value","length","componentWillLoad","el","generateId","label","console","error","componentDidLoad","inputEl","handleErrorMessage","newValue","displayedErrorMessage","handleKeyDown","ev","isModifierKey","ctrlKey","metaKey","altKey","isCharacter","test","key","hasReachedCharacterLimit","characterLimit","announce","generateCharacterLimitWarning","handleBlur","wmInputValueChanged","emit","shouldPreventValidation","preventValidation","isRelatedTarget","validate","inputWrapperEl","classList","remove","handleInput","target","handleFocus","add","validationRules","validateNumber","bind","validateRequired","errorMessage","reduce","prev","current","reqMsg","requiredFieldMessage","requiredField","type","validity","badInput","message","liveRegionEl","textContent","announcement","charLimit","charactersEnteredMessage","description","x","y","characterLimitReachedMessage","generateCharacterLimitLabel","limit","renderErrorMessage","render","h","Host","class","labelPosition","ref","htmlFor","disabled","onInput","onKeyDown","onBlur","onFocus","placeholder","autocomplete","maxLength","undefined","step","max","min","info"],"sources":["./src/components/wm-input/wm-input.scss?tag=wm-input&encapsulation=shadow","./src/components/wm-input/wm-input.tsx"],"sourcesContent":[":host,\nwm-input {\n  font-family: inherit;\n  width: 100%;\n\n  * {\n    box-sizing: border-box;\n  }\n\n  @include label;\n\n  .wrapper {\n    .inner-wrapper {\n      width: 100%;\n    }\n\n    .inputfield-wrapper {\n      height: rem-calc(40);\n      border: 1px solid $input-border-color;\n      @include border-radius(3px);\n      display: flex;\n    }\n\n    .character-count {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-width: rem-calc(80);\n      background-color: rgba($charcoal, 0.05);\n      font-size: rem-calc(14);\n      font-weight: 500;\n      align-self: stretch;\n    }\n\n    input {\n      @include border-radius(3px);\n      border: none;\n      font-family: inherit;\n      font-size: rem-calc(14);\n      height: 100%;\n      flex: 1;\n      padding: rem-calc(12 16);\n      width: 100%;\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    .info {\n      font-style: italic;\n      line-height: 100%;\n      margin: 4px 0;\n    }\n\n    &.invalid {\n      & .inputfield-wrapper {\n        @include invalid;\n      }\n\n      .error-message {\n        color: $firetruck;\n        margin: 4px 0;\n        display: block;\n        font-style: italic;\n        line-height: 100%;\n      }\n    }\n\n    &:focus,\n    &.focus {\n      .inputfield-wrapper {\n        @include field-focus;\n      }\n    }\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n","import { h, Component, Element, Event, EventEmitter, Host, Prop, State, Watch } from \"@stencil/core\";\nimport { intl, generateId, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-input\",\n  styleUrl: \"wm-input.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Input {\n  @Element() el!: HTMLWmInputElement;\n  private inputEl!: HTMLInputElement;\n  private inputWrapperEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n\n  @Prop() label!: string;\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() info?: string;\n  @Prop() placeholder: string = \"\";\n  @Prop() requiredField: boolean = false;\n  @Prop() requiredFieldMessage?: string;\n  @Prop() errorMessage?: string;\n  @Prop() characterLimit?: number;\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n  @Prop() type: \"number\" | \"text\" = \"text\";\n  @Prop() step?: number = 1;\n  @Prop() min?: number;\n  @Prop() max?: number;\n\n  get charCount(): number {\n    return this.value.length;\n  }\n\n  @State() announcement: string = \"\";\n\n  @Event() wmInputValueChanged!: EventEmitter<{ value: string }>;\n  @State() displayedErrorMessage: string = \"\";\n\n  private uid: string = \"\";\n  private previousBlurredValue: string = \"\";\n  private numberErrorMessage = intl.formatMessage({\n    id: \"input.numberError\",\n    defaultMessage: \"Please enter a valid number.\",\n  });\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n\n    if (!this.label) {\n      console.error(\"wm-input requires the label property\");\n    }\n  }\n\n  componentDidLoad() {\n    if (this.value) {\n      this.inputEl.value = this.value;\n      this.previousBlurredValue = this.inputEl.value;\n    }\n  }\n\n  @Watch(\"errorMessage\")\n  handleErrorMessage(newValue: string) {\n    this.displayedErrorMessage = newValue;\n  }\n\n  handleKeyDown(ev: KeyboardEvent) {\n    // in most browsers, onInput doesn't fire if the input's maxLength is reached\n    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used\n    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;\n    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;\n    const hasReachedCharacterLimit =\n      isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;\n\n    if (hasReachedCharacterLimit) {\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit!));\n    }\n  }\n\n  handleBlur(ev: FocusEvent) {\n    if (this.value !== this.previousBlurredValue) {\n      this.wmInputValueChanged.emit({ value: this.value });\n    }\n    this.previousBlurredValue = this.value;\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.displayedErrorMessage = this.validate();\n    }\n    this.inputWrapperEl.classList.remove(\"focus\");\n  }\n\n  handleInput(ev: Event) {\n    this.value = (ev.target as HTMLInputElement).value;\n    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));\n    }\n  }\n\n  handleFocus() {\n    this.inputWrapperEl.classList.add(\"focus\");\n  }\n\n  validate() {\n    // These rules are in priority order\n    // i.e. an input that is triggering both required and number errors will only show the number one but it's first\n    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];\n\n    if (this.errorMessage) {\n      return this.errorMessage;\n    } else {\n      // sets newError to first rule that returns an error\n      return validationRules.reduce((prev, current) => (prev ? prev : current()), \"\");\n    }\n  }\n\n  validateRequired(): string {\n    const reqMsg =\n      this.requiredFieldMessage ||\n      intl.formatMessage({\n        id: \"global.requiredError\",\n        defaultMessage: \"This field is required.\",\n      });\n    return this.requiredField && this.value === \"\" ? reqMsg : \"\";\n  }\n\n  validateNumber(): string {\n    return this.type === \"number\" && this.inputEl.validity.badInput ? this.numberErrorMessage : \"\";\n  }\n\n  announce(message: string) {\n    if (this.liveRegionEl.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.announcement = message;\n  }\n\n  generateCharacterLimitWarning(charCount: number, charLimit: number): string {\n    const charactersEnteredMessage = intl.formatMessage(\n      {\n        id: \"global.charactersEntered\",\n        defaultMessage: \"{x, number} of {y, number} characters entered.\",\n        description: \"for screen readers\",\n      },\n      { x: charCount, y: charLimit }\n    );\n\n    const characterLimitReachedMessage = intl.formatMessage({\n      id: \"global.characterLimitReached\",\n      defaultMessage: \"No additional characters will be entered.\",\n      description: \"for screen readers\",\n    });\n\n    return `${charactersEnteredMessage}${charCount >= charLimit ? \" \" + characterLimitReachedMessage : \"\"}`;\n  }\n\n  generateCharacterLimitLabel(characterLimit: number): string {\n    return intl.formatMessage(\n      {\n        id: \"global.characterLimit\",\n        defaultMessage: \"{limit, number} characters allowed.\",\n        description: \"for screen readers\",\n      },\n      { limit: characterLimit }\n    );\n  }\n\n  renderErrorMessage() {\n    return this.errorMessage || this.displayedErrorMessage;\n  }\n\n  render() {\n    return (\n      <Host id={this.uid}>\n        <div\n          class={`wrapper label-${this.labelPosition} ${\n            this.errorMessage || this.displayedErrorMessage ? \"invalid\" : \"\"\n          }`}\n          ref={(el) => (this.inputWrapperEl = el as HTMLDivElement)}\n        >\n          <div class=\"label-wrapper\">\n            {this.labelPosition !== \"none\" && (\n              <label htmlFor={`inputfield-${this.uid}`} class=\"label\">\n                {this.label}\n                {this.requiredField && (\n                  <span class=\"required\" aria-hidden=\"true\">\n                    *\n                  </span>\n                )}\n              </label>\n            )}\n          </div>\n          <div class=\"inner-wrapper\">\n            <div class=\"inputfield-wrapper\">\n              <input\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\n                id={`inputfield-${this.uid}`}\n                disabled={this.disabled}\n                aria-label={`${this.label}${\n                  this.characterLimit ? \" \" + this.generateCharacterLimitLabel(this.characterLimit) : \"\"\n                }`}\n                aria-describedby={`info-${this.uid} error-${this.uid}`}\n                onInput={(ev) => this.handleInput(ev)}\n                onKeyDown={(ev) => this.handleKeyDown(ev)}\n                onBlur={(ev) => this.handleBlur(ev)}\n                onFocus={this.handleFocus.bind(this)}\n                placeholder={this.placeholder}\n                autocomplete=\"off\"\n                aria-required={this.requiredField ? \"true\" : null}\n                maxLength={this.characterLimit || undefined}\n                type={this.type}\n                step={this.step}\n                max={this.max}\n                min={this.min}\n              />\n              {this.characterLimit && typeof this.characterLimit === \"number\" ? (\n                <div class=\"character-count\">\n                  {this.charCount}/{this.characterLimit}\n                </div>\n              ) : (\n                \"\"\n              )}\n            </div>\n            {this.info && (\n              <div id={`info-${this.uid}`} class=\"info\">\n                {this.info}\n              </div>\n            )}\n            <div id={`error-${this.uid}`} aria-live=\"assertive\" class=\"error-message\" aria-atomic=\"true\">\n              {this.renderErrorMessage()}\n            </div>\n            <div\n              class=\"sr-only\"\n              aria-live=\"polite\"\n              aria-atomic=\"true\"\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n            >\n              {this.announcement}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-4aa0ee75.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmNavigationCss","Navigation","exports","this","mainNavigationMessage","intl","formatMessage","id","defaultMessage","description","openTooltipMessage","closeTooltipMessage","throttledRerender","throttle","forceUpdate","_this","el","Object","defineProperty","class_1","prototype","window","innerWidth","isCollapsible","open","toString","undefined","toggleTabbingOn","isTabbing","toggleTabbingOff","closeOnEscape","ev","key","handleWindowResize","handleHamburgerClicked","handleClickOnItem","handleStateChange","wmNavigationStateChanged","emit","expand","collapse","componentWillLoad","document","body","classList","contains","focus","btn","shadowRoot","querySelector","firstItem","redirectFocusFromBody","activeElement","tagName","relatedTarget","tabIndex","addEventListener","bind","setTimeout","toggleEl","removeEventListener","hamburgerBtn","focusLastItem","items","querySelectorAll","lastItem","Array","from","pop","renderOverlay","h","class","onClick","render","Host","role","ariaExpanded","tabindex","onFocus","ref","concat","icon","tooltip","wmNavigationHamburgerCss","NavigationHamburger","showNavMessage","class_2","getElementById","handleNavigationStateChanged","target","navId","console","error","showTooltip","tooltipText","tooltipEl","textContent","style","setProperty","transitionDelay","opacity","hasNoWhitespace","match","add","remove","removeProperty","tooltipVisible","hideTooltip","showTooltipForKeyboardUsers","handleClick","wmNavigationHamburgerClicked","onMouseEnter","onMouseLeave","onBlur","wmNavigationItemCss","NavigationItem","class_3","active","href","wmNavigationItemClicked","text"],"sources":["src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","src/components/wm-navigation/wm-navigation.tsx","src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","src/components/wm-navigation/wm-navigation-hamburger.tsx","src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\n  z-index: 10;\n}\n\n:host([aria-expanded=\"true\"]) {\n  z-index: 5000;\n}\n\n.tray {\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\n  display: flex;\n  flex-direction: column;\n  width: rem-calc(121);\n  background-color: $light-background;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  font-size: rem-calc(14);\n  height: 100%;\n}\n\n.navlist {\n  margin: 0;\n  padding: 0;\n}\n\n.toggle-wrapper {\n  display: none;\n}\n\n/* COLLAPSIBLE STYLES */\n@media screen and (max-width: 1023px) {\n  .tray {\n    @include transition(transform 0.33s ease);\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n\n    ul {\n      visibility: hidden;\n    }\n\n    .toggle-wrapper {\n      display: inline-block;\n      min-height: 5rem;\n      width: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n\n  :host([aria-expanded=\"true\"]) {\n    .tray {\n      transform: translateX(0);\n\n      ul {\n        visibility: visible;\n      }\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: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n  }\n}\n","import {\n  h,\n  Component,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Host,\n  Watch,\n  Event,\n  EventEmitter,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { intl, throttle } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation\",\n  styleUrl: \"wm-navigation.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Navigation {\n  @Element() el!: HTMLWmNavigationElement;\n  toggleEl!: HTMLWmButtonElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  @State() isTabbing: boolean = false;\n  @Event() wmNavigationStateChanged!: EventEmitter;\n\n  private mainNavigationMessage: string = intl.formatMessage({\n    id: \"navigation.mainNavigation\",\n    defaultMessage: \"Main\",\n    description: \"Label describing the site navigation, for screen reader users\",\n  });\n\n  private openTooltipMessage: string = intl.formatMessage({\n    id: \"global.openVerb\",\n    defaultMessage: \"Open\",\n    description: \"For a button, to open a user interface element\",\n  });\n\n  private closeTooltipMessage: string = intl.formatMessage({\n    id: \"global.closeVerb\",\n    defaultMessage: \"Close\",\n    description: \"For a button, to close a user interface element\",\n  });\n\n  get isCollapsible() {\n    return window.innerWidth < 1024;\n  }\n\n  get ariaExpanded() {\n    return this.isCollapsible\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\n        this.open.toString()\n      : // otherwise, do not render attr at all\n        undefined;\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(\"keydown\")\n  closeOnEscape(ev: KeyboardEvent) {\n    if (ev.key === \"Escape\") {\n      this.open = false;\n    }\n  }\n\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleWindowResize() {\n    // for component to react when breakpoint is crossed\n    // (doesn't rerender on window resize)\n    this.throttledRerender();\n  }\n\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\n  handleHamburgerClicked() {\n    this.open = !this.open;\n  }\n\n  @Listen(\"wmNavigationItemClicked\")\n  handleClickOnItem() {\n    this.open = false;\n  }\n\n  @Watch(\"open\")\n  handleStateChange() {\n    if (this.isCollapsible) {\n      this.wmNavigationStateChanged.emit();\n      this.open ? this.expand() : this.collapse();\n    }\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\n      const btn = this.open\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\n      this.isCollapsible ? btn.focus() : firstItem.focus();\n    };\n\n    if (this.isCollapsible && this.open) {\n      // hamburger needs to know if open was initially set to true\n      this.wmNavigationStateChanged.emit();\n      this.expand();\n    }\n  }\n\n  redirectFocusFromBody(ev: FocusEvent) {\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\n    // which should not redirect focus\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\n      this.el.focus();\n    }\n  }\n\n  expand() {\n    // listen to focus on body and redirect to the component\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\n    // and is tabbing back in\n    document.body.tabIndex = 0;\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\n\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\n    setTimeout(() => this.toggleEl.focus(), 250);\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\n  }\n\n  collapse() {\n    // rm event listener on body\n    document.body.tabIndex = -1;\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\n\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\n    // should fail silently if el doesn't exist\n    // (dev may have chosen not to use the hamburger component)\n    if (hamburgerBtn) hamburgerBtn.focus();\n  }\n\n  focusLastItem() {\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\n    lastItem.focus();\n  }\n\n  renderOverlay() {\n    return (\n      <div\n        class=\"overlay\"\n        onClick={() => {\n          this.open = false;\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\n        {this.open ? this.renderOverlay() : \"\"}\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\n        )}\n        <div class=\"tray\">\n          <div class=\"toggle-wrapper\">\n            <wm-button\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n              button-type=\"navigational\"\n              icon={this.open ? \"f156\" : \"f35c\"}\n              icon-size=\"2rem\"\n              tooltip={this.open ? this.closeTooltipMessage : this.openTooltipMessage}\n              tooltip-position=\"left\"\n              tabIndex={this.open ? undefined : -1}\n              onClick={() => {\n                this.open = !this.open;\n              }}\n            />\n          </div>\n          <ul class=\"navlist\">\n            <slot />\n          </ul>\n        </div>\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\n        )}\n      </Host>\n    );\n  }\n}\n","button {\n  display: none;\n  width: 100%;\n  height: 100%;\n  border: none;\n  box-shadow: none;\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: transparent;\n  outline: none;\n  padding: 0;\n\n  &.user-is-tabbing:focus {\n    @include focus-style;\n  }\n\n  &:hover {\n    background-color: $button-default-hover;\n  }\n}\n\n.icon {\n  &:before {\n    @include mdi-icon;\n    content: \"\\f35c\";\n    font-size: rem-calc(24);\n    color: $button-default-text;\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host {\n    width: rem-calc(60);\n    height: rem-calc(60);\n  }\n\n  button {\n    display: initial;\n  }\n}\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation-hamburger\",\n  styleUrl: \"wm-navigation-hamburger.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationHamburger {\n  @Element() el!: HTMLWmNavigationHamburgerElement;\n  nav!: HTMLWmNavigationElement;\n\n  @Prop() navId?: string;\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\n\n  @State() isTabbing?: boolean = false;\n  @State() open: boolean = false;\n\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\n\n  showNavMessage = intl.formatMessage({\n    id: \"navigation.showNavigation\",\n    defaultMessage: \"Show navigation\",\n    description: \"For user interface element opening a navigation menu\",\n  });\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  // this also works on initial load because event is fired then\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\n  handleNavigationStateChanged(ev: CustomEvent) {\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n    if (!this.navId) {\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\n    }\n  }\n\n  showTooltip() {\n    const tooltipText = this.showNavMessage;\n    this.tooltipEl.textContent = tooltipText;\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\n    this.tooltipEl.style.transitionDelay = \"500ms\";\n    this.tooltipEl.style.opacity = \"1\";\n\n    // tooltip only has a maxWidth if it contains whitespace and can break\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\n    if (hasNoWhitespace) {\n      this.tooltipEl.classList.add(\"single-word\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n    } else {\n      this.tooltipEl.classList.remove(\"single-word\");\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n    }\n\n    // tooltip is only visible after the transition delay.\n    // This also fixes an issue for keyboard users:\n    // if they tab to a button out of screen bounds, the page scrolls\n    // and hideTooltip() would be triggered before the tooltip would show\n    setTimeout(() => {\n      this.tooltipVisible = true;\n    }, 500);\n  }\n\n  hideTooltip() {\n    this.tooltipEl.style.transitionDelay = \"0s\";\n    this.tooltipEl.style.opacity = \"0\";\n    this.tooltipVisible = false;\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  handleClick() {\n    this.hideTooltip();\n    this.wmNavigationHamburgerClicked.emit();\n  }\n\n  render() {\n    return (\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\n        <button\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\n          aria-expanded={this.open}\n          aria-controls={this.navId}\n          aria-label={this.showNavMessage}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.handleClick()}\n        >\n          <span class=\"icon\"></span>\n        </button>\n      </Host>\n    );\n  }\n}\n",".link {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: inherit;\n  text-decoration: none;\n  min-height: rem-calc(72);\n  text-align: center;\n  padding: 1.25rem 0.5rem;\n  font-weight: 500;\n  outline: none;\n  position: relative;\n\n  &:hover {\n    background-color: $light-background-hover;\n  }\n\n  .icon {\n    font-size: rem-calc(22);\n    color: $sidenav-icon;\n  }\n\n  .text {\n    font-size: rem-calc(14);\n  }\n\n  &.user-is-tabbing:focus {\n    // from P&SS\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\n  }\n}\n\n.link.active {\n  background-color: $pale-lilac-gray;\n  &:before {\n    content: \"\";\n    // link to or create semantic name\n    background-color: $periwinkle;\n    position: absolute;\n    height: 100%;\n    width: 5px;\n    left: 0;\n  }\n\n  .text {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n\n  .icon {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n}\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-navigation-item\",\n  styleUrl: \"wm-navigation-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationItem {\n  @Element() el!: HTMLWmNavigationItemElement;\n  @Prop() href?: string;\n  @Prop() text?: string;\n  @Prop() active?: boolean;\n\n  @State() isTabbing?: boolean = false;\n  @Event() wmNavigationItemClicked!: EventEmitter;\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  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          href={this.href}\n          onClick={() => this.wmNavigationItemClicked.emit()}\n        >\n          <div class=\"icon\" aria-hidden=\"true\">\n            <slot />\n          </div>\n          <div class=\"text\">{this.text}</div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-4c383e9e.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmProgressIndicatorCss","ProgressIndicator","exports","this","uid","generateId","slicesDetails","barLabelsWidth","el","parentElement","Object","defineProperty","class_1","prototype","shadowRoot","querySelector","Array","from","querySelectorAll","mode","allChartsDetails","undefined","text","concat","label","subinfo","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","call","componentWillLoad","_this","console","error","children","length","warn","addEventListener","detail","handleSliceUpdate","getDetails","_a","sent","forceUpdate","handleModeUpdate","renderBarOrDoughnut","total","renderStackedBar","renderDoughnut","render","h","Host","onBlur","exitChart","ref","componentWrapperEl","class","userIsNavigating","role","ariaLabelText","tabindex","chartRoleDescription","style","htmlFor","renderLegend","renderCompletionMessage","renderInstructionsText","wmProgressMonitorCss","ProgressMonitor","doughnutWidth","modeInitialized","debouncedUpdate","debounce","class_2","asNumber","parseToNum","breakpoint","asPixels","clientWidth","parsedBreakpoint","resizeObserver","ResizeObserver","observe","componentDidLoad","wmProgressMonitorModeChange","emit","componentWillUpdate","prevMode","num","asString","toString","withoutPx","replace","parseInt","keys","csvToArray","groupLegend","colors","bar","map","key","idx","legendItem","color","renderLegendItem","ProgressSlice","class_3","componentDidUpdate","wmProgressSliceUpdated"],"sources":["src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\nwm-progress-indicator {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\nimport { ChartDetails } from \"../../../global/interfaces\";\nimport { generateId, intl } from \"../../../global/functions\";\nimport {\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\n\n@Component({\n  tag: \"wm-progress-indicator\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-indicator.scss\",\n})\nexport class ProgressIndicator {\n  @Element() el!: HTMLWmProgressIndicatorElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() label?: string;\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() showLegend: boolean = true;\n\n  @State() isTabbing: boolean = false;\n  @State() mode?: \"doughnut\" | \"bar\";\n  @State() userIsNavigating: boolean = false;\n\n  private uid: string = generateId();\n  private total!: number;\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\n  private slicesDetails: SliceDetails[] = [];\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\n  }\n  get chartDetails(): ChartDetails | undefined {\n    return this.mode ? allChartsDetails[this.mode] : undefined;\n  }\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\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(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  componentWillLoad() {\n    if (!this.label) {\n      console.error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n\n    if (this.el.children.length !== 2) {\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\n    }\n\n    // Listen to parent for initial mode, and future changes\n    this.el.parentElement!.addEventListener(\n      \"wmProgressMonitorModeChange\",\n      (ev) => (this.mode = (ev as CustomEvent).detail)\n    );\n  }\n\n  @Listen(\"wmProgressSliceUpdated\")\n  async handleSliceUpdate() {\n    await getDetails.call(this, this.mode!);\n    forceUpdate(this.el);\n  }\n\n  @Watch(\"mode\")\n  handleModeUpdate() {\n    if (this.mode) {\n      getDetails.call(this, this.mode);\n    }\n  }\n\n  renderBarOrDoughnut() {\n    if (this.total > 0 && this.mode === \"bar\") {\n      return renderStackedBar.call(this, this.mode!);\n    } else {\n      return renderDoughnut.call(this, this.mode!);\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex=\"0\"\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby={`chart-instructions`}\n        >\n          <label\n            id={`label-${this.uid}`}\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\n            htmlFor={`graphic-${this.uid}`}\n          >\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.mode && this.renderBarOrDoughnut()}\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n",":host,\nwm-progress-monitor {\n  display: flex;\n\n  .legend-wrapper {\n    @extend %chart-legend-styles;\n    align-items: flex-start;\n    padding: 0 1.25rem;\n  }\n}\n\n:host(.row) {\n  flex-direction: row;\n}\n\n:host(.column) {\n  flex-direction: column;\n}\n","import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\nimport { csvToArray, debounce } from \"../../../global/functions\";\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\nimport { LegendItem } from \"../../../global/interfaces\";\n@Component({\n  tag: \"wm-progress-monitor\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-progress-monitor.scss\",\n})\nexport class ProgressMonitor {\n  @Element() el!: HTMLWmProgressMonitorElement;\n  @Prop() breakpoint?: number | string;\n  @Prop() groupLegend?: string;\n  @Prop() barLabelsWidth?: string;\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\n  private doughnutWidth = 300;\n  private prevMode?: string;\n  private modeInitialized: boolean = false;\n\n  get parsedBreakpoint() {\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\n    // e.g. 4 -> 1200px, while 768 -> 768 px\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\n    return asPixels;\n  }\n\n  get mode(): \"doughnut\" | \"bar\" {\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\n  }\n\n  componentWillLoad() {\n    // rerender on resize in case layout needs to change\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\n    resizeObserver.observe(this.el);\n  }\n\n  componentDidLoad() {\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\n    this.wmProgressMonitorModeChange.emit(this.mode);\n    this.modeInitialized = true;\n  }\n\n  componentWillUpdate() {\n    // store prevMode before every render except first to determine when it has changed\n    if (this.prevMode !== this.mode) {\n      this.wmProgressMonitorModeChange.emit(this.mode);\n    }\n    this.prevMode = this.mode;\n  }\n\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\n\n  parseToNum(num: string | number): number {\n    const asString = num.toString();\n    const withoutPx = asString.replace(\"px\", \"\");\n    return parseInt(withoutPx);\n  }\n\n  renderLegend() {\n    const keys = csvToArray(this.groupLegend!);\n    const colors = allChartsDetails.bar.colors;\n\n    return (\n      <div class=\"legend-wrapper\">\n        <div class=\"legend\">\n          {keys.map((key, idx) => {\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\n            return renderLegendItem(legendItem);\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\n        {this.modeInitialized && <slot />}\n      </Host>\n    );\n  }\n}\n","import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-progress-slice\",\n  shadow: true,\n})\nexport class ProgressSlice {\n  @Prop() legend?: string;\n  @Prop() amount?: string;\n  @Prop() popoverTitle?: string;\n  @Prop() popoverText?: string;\n  @Prop() popoverButtonText?: string;\n\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\n  componentDidUpdate() {\n    this.wmProgressSliceUpdated.emit();\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-525fbd6b.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmChartCss","Chart","exports","this","uid","generateId","slicesDetails","handleStackedBarResize","debounce","__awaiter","_this","hasHiddenBarValue","valueEls","el","shadowRoot","querySelectorAll","length","lastVisibleRightEdge_1","getBoundingClientRect","right","margin_1","forEach","valueEl","idx","bounds","left","classList","add","remove","debouncedUpdate","forceUpdate","debouncedSliceUpdate","getDetails","call","currentChartType","_a","sent","Object","defineProperty","class_1","prototype","valueFormat","showValues","window","innerWidth","querySelector","Array","from","current","chartType","hybridType","children","allChartsDetails","text","concat","label","subinfo","chartDetails","category","isStackedBar","isSimpleBar","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","componentWillLoad","Error","console","warn","isDoughnut","resizeObserver","ResizeObserver","observe","handleSliceUpdate","renderBarText","s","val","tempValueFormat","perc","amount","h","class","style","width","amountToPercent","total","drawAxis","x1","x2","y1","y2","x","y","renderChart","renderStackedBar","renderSimpleBar","renderDoughnut","render","Host","onBlur","exitChart","ref","componentWrapperEl","userIsNavigating","labelPosition","role","ariaLabelText","tabindex","chartRoleDescription","htmlFor","isBar","renderLegend","renderCompletionMessage","renderHiddenValuesMessage","renderInstructionsText"],"sources":["src/components/charts/wm-chart/wm-chart.scss?tag=wm-chart&encapsulation=shadow","src/components/charts/wm-chart/wm-chart.tsx"],"sourcesContent":[":host,\nwm-chart {\n  @extend %chart-styles;\n}\n\n:host(:focus) {\n  @extend %chart-focus-styles;\n}\n","import { Component, Element, h, Host, Prop, State, Listen } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { debounce, generateId, intl } from \"../../../global/functions\";\nimport {\n  amountToPercent,\n  exitChart,\n  getDetails,\n  handleChartKeydown,\n  renderStackedBar,\n  renderSimpleBar,\n  renderCompletionMessage,\n  renderDoughnut,\n  renderHiddenValuesMessage,\n  renderInstructionsText,\n  renderLegend,\n  allChartsDetails,\n} from \"../chartFunctions\";\nimport { ChartType, SliceDetails, SliceElement } from \"../../../global/interfaces\";\n\n@Component({\n  tag: \"wm-chart\",\n  shadow: { delegatesFocus: true },\n  styleUrl: \"wm-chart.scss\",\n})\nexport class Chart {\n  @Element() el!: HTMLWmChartElement;\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\n  private componentWrapperEl!: HTMLDivElement;\n\n  @Prop() chartType: ChartType | \"hybrid\" = \"doughnut1\"; // hybrid is not a real ChartType, it gets converted to something else.\n  @Prop() label?: string;\n  @Prop() labelWidth: string = \"150px\";\n  @Prop() subinfo?: string;\n  @Prop() completionMessage?: string;\n  @Prop() valueFormat?: \"percentage\" | \"amount\";\n  @Prop() showValues?: \"percentage\" | \"amount\"; // DEPRECATED in favor of value-format\n  @Prop() showGrid?: boolean = true; \n  get tempValueFormat() {\n    // use of this getter should be replaced with dateFormat when showValues is fully phased out\n    return this.valueFormat || this.showValues || \"none\";\n  }\n  @Prop() showLegend: boolean = true;\n  @Prop() showBarLegend: boolean = false;\n  @Prop() notStartedColor: boolean = false;\n  // left labels are a temporary solution for the lack of a stacked bar chart and is undocumented\n  // it only works with bar4 and should be used without a legend\n  @Prop() labelPosition: \"left\" | \"top\" = \"top\";\n  @State() isTabbing: boolean = false;\n  @State() userIsNavigating: boolean = false;\n  @State() hasHiddenBarValue: boolean = false;\n\n  get hybridType(): \"doughnut0\" | \"bar1\" {\n    return window.innerWidth > 1340 ? \"doughnut0\" : \"bar1\";\n  }\n  private uid: string = generateId();\n  private total!: number;\n  private slicesDetails: SliceDetails[] = [];\n\n  get popoverEl() {\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\n  }\n\n  get sliceEls(): SliceElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\"));\n  }\n\n  get currentChartType(): ChartType {\n    let current = this.chartType as ChartType;\n\n    if (this.chartType === \"hybrid\") {\n      current = this.hybridType;\n    } else if (this.chartType === \"doughnut2\" && this.el.children.length > 3) {\n      // render an internal type (that includes an additional color) if doughnut2 has more than 3 slices\n      current = \"doughnut2plus\";\n    }\n    return current; \n  }\n\n  get chartDetails() {\n    return allChartsDetails[this.currentChartType];\n  }\n\n  get ariaLabelText() {\n    let text = `${this.label}`;\n    if (this.subinfo) {\n      text += ` ${this.subinfo}`;\n    }\n    return text;\n  }\n\n  get isDoughnut() {\n    return this.chartDetails.category === \"doughnut\";\n  }\n\n  get isStackedBar() {\n    return this.chartDetails.category === \"stackedBar\";\n  }\n\n  get isSimpleBar() {\n    return this.chartDetails.category === \"simpleBar\";\n  }\n\n  get isBar() {\n    return this.isStackedBar || this.isSimpleBar;\n  }\n\n  get chartRoleDescription(): string {\n    return intl.formatMessage({\n      id: \"chart.roleDescription\",\n      defaultMessage: \"Interactive chart\",\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\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(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    handleChartKeydown.call(this, ev);\n  }\n\n  /* LIFECYCLE METHODS + EVENTS FROM THE CHILDREN */\n\n  async componentWillLoad() {\n    if (!this.label) {\n      throw new Error(\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\n      );\n    }\n    if (this.showValues) {\n      console.warn(\"wm-chart: show-values has been deprecated as of v3.1.0. Please use value-format instead.\");\n    }\n    await getDetails.call(this, this.currentChartType);\n\n    // rerender on resize\n    // unnecessary for doughnuts (except hybrid) as layout doesn't change\n    if (this.chartType === \"hybrid\" || !this.isDoughnut) {\n      const resizeObserver = new ResizeObserver(() => {\n        this.isStackedBar ? this.handleStackedBarResize() : this.debouncedUpdate();\n      });\n      resizeObserver.observe(this.el);\n    }\n  }\n\n  handleStackedBarResize = debounce(async () => {\n    let hasHiddenBarValue = false;\n\n    // if any value text overlaps with another, hide it and display warning\n    const valueEls = this.el.shadowRoot!.querySelectorAll(\".value\");\n\n    if (valueEls.length) {\n      let lastVisibleRightEdge = valueEls.length ? valueEls[0].getBoundingClientRect().right : 0;\n      let margin = 4;\n\n      valueEls.forEach((valueEl, idx) => {\n        // checks are to the left of each valueEl, so skip the first one\n        if (idx > 0) {\n          const bounds = valueEl.getBoundingClientRect();\n\n          if (bounds.left - margin < lastVisibleRightEdge) {\n            // left edge of current value is overlapping right edge of last visible value\n            valueEl.classList.add(\"hidden\");\n            hasHiddenBarValue = true;\n          } else {\n            valueEl.classList.remove(\"hidden\");\n            lastVisibleRightEdge = bounds.right;\n          }\n        }\n      });\n    }\n\n    this.hasHiddenBarValue = hasHiddenBarValue;\n  }, 100);\n\n  debouncedUpdate = debounce(async () => {\n    forceUpdate(this.el);\n  }, 10);\n\n  debouncedSliceUpdate = debounce(async () => {\n    await getDetails.call(this, this.currentChartType);\n    forceUpdate(this.el);\n  }, 100);\n\n  @Listen(\"wmChartSliceUpdated\")\n  handleSliceUpdate() {\n    this.debouncedSliceUpdate();\n  }\n\n  /* RENDERING */\n  renderBarText(s: SliceDetails, idx: number) {\n    let val;\n    if (this.tempValueFormat === \"percentage\") {\n      // if segment has an amount, but \"0\" percentage (it's below 0.5% and rounded down), still display it as <1%\n      val = s.perc === 0 && s.amount > 0 ? \"<1%\" : `${s.perc}%`;\n    } else if (this.tempValueFormat === \"amount\") {\n      val = s.amount;\n    }\n\n    // even though we do not display the value text if it has an amount of 0, we still want to render the value-wrapper\n    // in order to not disturb the positioning of the other value texts in the entire row\n    return (\n      <div\n        class=\"value-wrapper\"\n        style={{\n          width: `calc(${amountToPercent(s.amount, this.total, false)}%\n        ${idx !== this.slicesDetails.length - 1 ? \" - 2px\" : \"\"}`,\n        }}\n      >\n        <span class=\"value\">{s.amount > 0 && val}</span>\n      </div>\n    );\n  }\n\n  drawAxis() {\n    if (this.currentChartType === \"bar3\") {\n      return (\n        <svg class=\"axis\">\n          <line x1=\"0\" x2=\"100%\" y1=\"0\" y2=\"0\" />\n          <line x1=\"0\" x2=\"0\" y1=\"0\" y2=\"-85px\" />\n          <line class=\"tick\" x1=\"0.5\" x2=\"0.5\" y1=\"0\" y2=\"6\" />\n          <text x=\"0.5\" y=\"-6\">\n            0%\n          </text>\n          <line class=\"tick\" x1=\"100%\" x2=\"100%\" y1=\"0\" y2=\"6\" />\n          <text x=\"100%\" y=\"-6\">\n            100%\n          </text>\n        </svg>\n      );\n    }\n  }\n\n  renderChart() {\n    if (this.total > 0) {\n      if (this.isStackedBar) {\n        return renderStackedBar.call(this, this.currentChartType);\n      } else if (this.isSimpleBar) {\n        return renderSimpleBar.call(this, this.currentChartType);\n      } else if (this.isDoughnut) {\n        return renderDoughnut.call(this, this.currentChartType);\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => exitChart.call(this)}>\n        <div\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\n          class={`component-wrapper ${this.currentChartType} ${\n            this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"\n          } ${this.labelPosition === \"left\" && this.currentChartType === \"bar4\" ? \"left-label\" : \"\"}`}\n          role=\"application\"\n          aria-label={this.ariaLabelText}\n          tabindex={0}\n          aria-roledescription={this.chartRoleDescription}\n          aria-describedby=\"chart-instructions\"\n        >\n          <label class=\"label\" id={`label-${this.uid}`} htmlFor={`graphic-${this.uid}`}>\n            <span class=\"label-text\">{this.label}</span>\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\n          </label>\n          {this.isBar && renderLegend.call(this, this.currentChartType)}\n          {this.renderChart()}\n          {this.isDoughnut && renderLegend.call(this, this.currentChartType)}\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\n          {this.currentChartType === \"doughnut0\" ? renderCompletionMessage.call(this) : \"\"}\n          {this.hasHiddenBarValue && renderHiddenValuesMessage()}\n        </div>\n        {renderInstructionsText()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-535e33d7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmNavigatorCss","Navigator","this","retrievedInfo","loadFromUserinfo","parsedProducts","openRight","async","userName","console","error","parseData","setFocusIndex","getRequest","then","response","email","currentProductId","current_product_id","productKeysToCamelCase","products","logoutUrl","logout_url","connectionName","connection_name","catch","errStatus","getWmMode","el","JSON","parse","sort","a","b","name","map","product","keys","Object","newProduct","forEach","key","snakeCaseToCamelCase","length","currentProduct","getProduct","itemIndexToFocus","indexOf","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeys","ev","preventDefault","closeMenu","isOpen","getNewIndexToFocus","navigatorItems","openMenu","handleKeydown","detail","item","navItem","click","oldIndex","focusItem","unfocusItem","handleClick","isElOrChild","target","contains","handleButtonClick","wrapperEl","wrapperWidth","clientWidth","spaceLeft","getBoundingClientRect","left","spaceRight","document","documentElement","right","buttonFocusHandler","newSelection","tabIndex","focused","window","requestAnimationFrame","focus","index","oldSelection","hostButton","shadowRoot","querySelector","button","renderUserInfo","h","class","id","intl","formatMessage","defaultMessage","setAltText","renderHeading","description","renderList","role","renderProductOptions","renderLogoutOption","icon","isSelected","clickRedirect","iconUrl","setProductOnClick","selected","onClick","src","alt","productId","authType","location","href","linkUrl","connName","samlLinkUrl","setLogoutOnclick","wmNavigatorLogout","emit","Array","from","querySelectorAll","find","render","Host","expanded","altText","ref"],"sources":["./src/components/wm-navigator/wm-navigator.scss?tag=wm-navigator&encapsulation=shadow","./src/components/wm-navigator/wm-navigator.tsx"],"sourcesContent":[":host,\nwm-navigator {\n  min-width: 0;\n  position: relative;\n  display: inline-block;\n\n  .wrapper {\n    overflow: auto;\n    font-size: rem-calc(18);\n    min-width: rem-calc(210);\n    width: auto;\n    max-height: 80vh;\n    text-align: left;\n    position: absolute;\n    z-index: 50;\n    top: 100%;\n    right: 20px;\n    left: auto;\n    background: #fff;\n    letter-spacing: normal;\n    @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n    @include transition(transform 0.25s ease);\n    @include transformOrigin(center top);\n    @include scale($xVal: 1, $yVal: 1);\n\n    .user {\n      background: $background;\n      padding: rem-calc(10 20);\n      font-size: rem-calc(14);\n\n      p {\n        margin: 0;\n      }\n      p:first-child {\n        font-weight: 700;\n        text-transform: capitalize;\n      }\n    }\n\n    h2 {\n      background: #2e1b46;\n      color: #fff;\n      font-weight: 700;\n      margin: 0;\n      padding: rem-calc(10 20);\n      font-size: rem-calc(14);\n    }\n\n    [role=\"listbox\"] {\n      list-style: none;\n      margin: 0;\n      padding-left: 0;\n    }\n\n    &.hide {\n      @include scale($xVal: 1, $yVal: 0);\n    }\n\n    &.right {\n      right: auto;\n      left: 20px;\n    }\n  }\n\n  img {\n    transform: scale(0.8);\n    transform-origin: left center;\n    display: block;\n  }\n\n  .logout {\n    text-align: center;\n    text-transform: capitalize;\n  }\n}\n\npriv-navigator-item:focus {\n  outline: none;\n}\n","import { Component, Element, h, Host, Prop, State, Listen, EventEmitter, Event, Watch } from \"@stencil/core\";\nimport { getWmMode, Product, NavigatorPayload } from \"../../global/interfaces\";\nimport { intl, snakeCaseToCamelCase, getNewIndexToFocus } from \"../../global/functions\";\nimport { getRequest } from \"../../global/services/http-service\";\n\n@Component({\n  tag: \"wm-navigator\",\n  styleUrl: \"wm-navigator.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Navigator {\n  @Element() el!: any;\n  private wrapperEl?: HTMLDivElement;\n\n  // Component can receive user info and products as props (this is how it worked before)\n  @Prop() userName?: string;\n  @Prop() email?: string;\n  @Prop() authType: number = 1; // 1: none or off, 2: username-password or username_password_sso, 3: saml or saml_sso\n  @Prop() connectionName?: string;\n  @Prop() logoutUrl?: string;\n  @Prop() products?: string | []; // products as JSON string, parsed on load\n\n  // The new way is to retrieve user info from an endpoint\n  // dev needs to opt-in by setting loadFromUserinfo to true\n  @Prop() loadFromUserinfo: boolean = false;\n  // comp can check whether the info was successfully retrieved with:\n  private retrievedInfo: boolean = !this.loadFromUserinfo; // when in endpoint mode, only render after get request completed\n\n  // used either way to store the products\n  parsedProducts: Array<Product> = [];\n\n  /**\n   * Event emitted from child wm-navigator-button updates the state, which is then passed down as a prop by wm-navigator.\n   */\n  @State() isOpen: boolean = false;\n  private openRight: boolean = false; // whether the menu should open on the right side\n\n  @State() isTabbing: boolean = false;\n\n  /**\n   * Value is set to the index of the current product on load.\n   * Keyboard navigation updates the state to keep track of focus in the dropdown.\n   * State resets to the index of the current product when the dropdown closes.\n   */\n  @State() itemIndexToFocus: number = 0;\n\n  @Event() wmNavigatorLogout!: EventEmitter;\n\n  private currentProductId!: string;\n\n  async componentWillLoad() {\n    if (!this.userName) {\n      console.error(\"wm-navigator: user-name is a required property.\");\n    }\n\n    await this.parseData();\n    this.setFocusIndex();\n  }\n\n  // async because we need the http request to complete before proceeding\n  @Watch(\"products\")\n  async parseData() {\n    if (!!this.loadFromUserinfo) {\n      await getRequest(\"/platform/navigator/userinfo\")\n        .then((response: NavigatorPayload) => {\n          this.email = response.email;\n          this.currentProductId = response.current_product_id;\n          this.parsedProducts = this.productKeysToCamelCase(response.products);\n          this.logoutUrl = this.logoutUrl ? this.logoutUrl : response.logout_url;\n          this.connectionName = this.connectionName ? this.connectionName : response.connection_name;\n          if (!!this.email && !!this.currentProductId) {\n            this.retrievedInfo = true;\n          }\n        })\n        .catch((errStatus) => {\n          console.error(errStatus);\n        });\n    } else {\n      this.currentProductId = getWmMode(this.el);\n      if (!!this.products) {\n        if (typeof this.products === \"string\") {\n          this.parsedProducts = JSON.parse(this.products);\n        } else {\n          this.parsedProducts = this.products;\n        }\n        this.parsedProducts = this.productKeysToCamelCase(this.parsedProducts);\n      }\n    }\n    // products is initialized as empty array in case nothing is passed\n    this.parsedProducts.sort((a, b) => (a.name < b.name ? -1 : 1));\n  }\n\n  productKeysToCamelCase(products: object[]): Product[] {\n    products = products.map((product: any) => {\n      const keys = Object.keys(product);\n      let newProduct: { [key: string]: string } = {};\n      keys.forEach((key) => {\n        newProduct[snakeCaseToCamelCase(key)] = product[key];\n      });\n      return newProduct;\n    });\n    return products as Product[];\n  }\n\n  /**\n   * Sets index to focus on open to the selected product. This index resets it when the menu closes.\n   */\n  setFocusIndex() {\n    if (this.parsedProducts.length > 1) {\n      const currentProduct = this.getProduct(this.currentProductId);\n\n      if (currentProduct) {\n        this.itemIndexToFocus = this.parsedProducts.indexOf(currentProduct);\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(\"keydown\")\n  handleKeys(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Escape\":\n        ev.preventDefault();\n        this.closeMenu();\n        break;\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        ev.preventDefault();\n        if (!this.isOpen) {\n          this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, ev.key, this.navigatorItems.length);\n          this.openMenu();\n        }\n        break;\n    }\n  }\n\n  @Listen(\"keydownOnNavItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const item = ev.detail.navItem;\n    switch (key) {\n      case \"Tab\":\n        this.closeMenu();\n        break;\n      case \"Enter\":\n      case \" \":\n        item.click();\n        break;\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n        const oldIndex = this.itemIndexToFocus;\n        this.itemIndexToFocus = getNewIndexToFocus(this.itemIndexToFocus, key, this.navigatorItems.length);\n        this.focusItem();\n        this.unfocusItem(oldIndex);\n        break;\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  handleClick(ev: MouseEvent) {\n    const isElOrChild = ev.target === this.el || this.el.contains(ev.target as Node);\n\n    if (!isElOrChild && this.isOpen) {\n      this.closeMenu();\n    }\n  }\n\n  @Listen(\"buttonActivated\")\n  handleButtonClick() {\n    this.isOpen ? this.closeMenu() : this.openMenu();\n  }\n\n  openMenu() {\n    if (this.wrapperEl) {\n      const wrapperWidth = this.wrapperEl.clientWidth;\n      const spaceLeft = this.el.getBoundingClientRect().left;\n      const spaceRight = document.documentElement.clientWidth - this.el.getBoundingClientRect().right;\n      this.openRight = wrapperWidth > spaceLeft && spaceRight > spaceLeft;\n    }\n    this.isOpen = true;\n    this.focusItem();\n  }\n\n  closeMenu() {\n    this.isOpen = false;\n    this.buttonFocusHandler();\n    this.unfocusItem(this.itemIndexToFocus);\n    this.setFocusIndex();\n  }\n\n  focusItem() {\n    const newSelection = this.navigatorItems[this.itemIndexToFocus];\n    newSelection.tabIndex = 0;\n    newSelection.focused = true;\n    window.requestAnimationFrame(() => newSelection.focus());\n  }\n\n  unfocusItem(index: number) {\n    const oldSelection = this.navigatorItems[index];\n    oldSelection.tabIndex = -1;\n    oldSelection.focused = false;\n  }\n\n  buttonFocusHandler() {\n    const hostButton = this.el.shadowRoot.querySelector(\"priv-navigator-button\");\n    const button = hostButton.shadowRoot.querySelector(\"button\");\n    window.requestAnimationFrame(() => button.focus());\n  }\n\n  /**\n   * HELPERS FOR RENDER\n   */\n  renderUserInfo() {\n    return (\n      <div\n        class=\"user\"\n        id=\"wm-nav-user\"\n        aria-label={intl.formatMessage(\n          {\n            id: \"navigator.userinfoLabel\",\n            defaultMessage: \"for {name}, email {email}\",\n          },\n          { name: this.userName, email: this.email }\n        )}\n      >\n        <p>{this.userName}</p>\n        <p>{this.email}</p>\n      </div>\n    );\n  }\n\n  setAltText(): string {\n    if (this.parsedProducts.length > 1) {\n      return intl.formatMessage({\n        id: \"navigator.userinfoAndProductNavigator\",\n        defaultMessage: \"User information and product navigator\",\n      });\n    } else {\n      return intl.formatMessage({\n        id: \"navigator.userinfo\",\n        defaultMessage: \"User information\",\n      });\n    }\n  }\n\n  renderHeading() {\n    return (\n      <h2>\n        {intl.formatMessage({\n          id: \"navigator.watermarkApps\",\n          defaultMessage: \"Watermark Apps\",\n          description: \"Applications made by Watermark Insights\",\n        })}\n      </h2>\n    );\n  }\n\n  renderList() {\n    return (\n      <ul\n        role=\"listbox\"\n        aria-label={`${intl.formatMessage({\n          id: \"navigator.WatermarkAppNavigation\",\n          defaultMessage: \"Watermark App Navigation\",\n          description: \"list of applications by Watermark Insights\",\n        })}`}\n        aria-describedby=\"wm-nav-user\"\n      >\n        {this.parsedProducts.length > 1 && this.renderProductOptions()}\n        {this.renderLogoutOption()}\n      </ul>\n    );\n  }\n\n  renderProductOptions(): Array<HTMLPrivNavigatorItemElement> {\n    return this.parsedProducts.map((product: Product) => {\n      let name: string | undefined, icon: string | undefined, isSelected: boolean, clickRedirect: any;\n\n      name = product.name;\n      icon = (product as Product).iconUrl;\n\n      clickRedirect = this.setProductOnClick(product.id);\n\n      if (!!name && !!icon) {\n        isSelected = this.currentProductId === product.id;\n\n        return (\n          <priv-navigator-item\n            selected={isSelected}\n            id={product.id}\n            onClick={clickRedirect}\n            role=\"option\"\n            aria-label={name}\n          >\n            <img src={icon} alt={name} />\n          </priv-navigator-item>\n        );\n      }\n    });\n  }\n\n  setProductOnClick(productId: string) {\n    const product = this.getProduct(productId);\n\n    if (this.currentProductId === productId) {\n      return () => {};\n    } else if (product) {\n      if (!!this.loadFromUserinfo || this.authType === 2) {\n        return () => (window.location.href = (product as Product).linkUrl);\n      } else if (this.authType === 3) {\n        // products passed as prop, saml\n        const connName = this.connectionName ? `/?connection_name=${this.connectionName}` : \"\";\n        return () => (window.location.href = (product as Product).samlLinkUrl + connName);\n      }\n    }\n  }\n\n  renderLogoutOption() {\n    return (\n      <priv-navigator-item\n        class=\"logout\"\n        selected={!(this.parsedProducts.length > 1)}\n        id=\"nav-logout\"\n        onClick={this.setLogoutOnclick()}\n        role=\"option\"\n      >\n        <span class=\"logout\">\n          {intl.formatMessage({\n            id: \"navigator.logout\",\n            defaultMessage: \"Log Out\",\n          })}\n        </span>\n      </priv-navigator-item>\n    );\n  }\n\n  setLogoutOnclick() {\n    // The logout item will always emit a custom event on click so that the dev can run any business logic specific to the app on logout (e.g., clearing local storage).\n    // It will only redirect if the dev has set the logoutUrl. If some sort of custom redirect is needed, the logoutUrl should not be set.\n    return () => {\n      this.wmNavigatorLogout.emit();\n      if (this.logoutUrl) {\n        window.location.href = this.logoutUrl;\n      }\n    };\n  }\n\n  private get navigatorItems(): Array<HTMLPrivNavigatorItemElement> {\n    return Array.from(this.el.shadowRoot.querySelectorAll(\"priv-navigator-item\"));\n  }\n\n  private getProduct(id: string): Product | undefined {\n    return this.parsedProducts.find((product) => product.id === id);\n  }\n\n  render() {\n    return this.retrievedInfo ? (\n      <Host class={this.isTabbing ? \"user-is-tabbing\" : \"\"}>\n        <priv-navigator-button expanded={this.isOpen} altText={this.setAltText()} isTabbing={this.isTabbing} />\n        <div\n          class={`wrapper ${this.isOpen ? \"\" : \"hide\"} ${this.openRight ? \"right\" : \"\"}`}\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\n        >\n          {this.renderUserInfo()}\n          {this.parsedProducts.length > 1 && this.renderHeading()}\n          {this.renderList()}\n        </div>\n      </Host>\n    ) : (\n      \"\"\n    );\n  }\n}\n"],"mappings":"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"}