@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/ripple/p-08d17d5a.entry.js.map

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

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

package/dist/ripple/p-124da634.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,f as o,h as n,H as r,g as i}from"./p-1c23de4a.js";import{g as a,p as s,a as l,d}from"./p-fd8070fb.js";import{g as b,i as m,v as u}from"./p-05e0f901.js";const w=':host .wm-button,wm-network-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-network-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-network-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-network-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-network-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-network-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-network-uploader .wm-button.-textonly .button-text,wm-network-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-network-uploader .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-network-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-network-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-network-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-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 #c6b4e3;-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 #c6b4e3;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 #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-network-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi,wm-network-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-network-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-network-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-network-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-network-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-selector:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-selector:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-network-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-network-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-network-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-network-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-network-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-network-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-network-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-network-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-network-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-network-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-network-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-network-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-network-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-network-uploader .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-network-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-network-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-network-uploader .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-network-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-network-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-network-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selector,wm-network-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-network-uploader .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:2px solid #575195;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,wm-network-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-network-uploader .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,wm-network-uploader .wm-button.-selector:before,:host .wm-button.-selector-primary:before,wm-network-uploader .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f140";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:0.875rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,wm-network-uploader .wm-button.-selector:active,:host .wm-button.-selector-primary:active,wm-network-uploader .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,wm-network-uploader .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner,wm-network-uploader .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,wm-network-uploader .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol,wm-network-uploader .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover,wm-network-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-selector-primary,wm-network-uploader .wm-button.-selector-primary{background:#575195;color:#fff}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled),wm-network-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button:disabled,wm-network-uploader .wm-button:disabled,:host .wm-button.disabled,wm-network-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-network-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-network-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-network-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-network-uploader .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-network-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-network-uploader .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-network-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-network-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-network-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-network-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selector,wm-network-uploader .wm-button:disabled.-selector,:host .wm-button.disabled.-selector,wm-network-uploader .wm-button.disabled.-selector{color:#737373}:host .wm-button:disabled.-selector-primary,wm-network-uploader .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary,wm-network-uploader .wm-button.disabled.-selector-primary{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-textonly,wm-network-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-network-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-network-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-selector,wm-network-uploader .wm-button:disabled.dark.-selector,:host .wm-button:disabled.dark.-textonly,wm-network-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-network-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-network-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-network-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-selector,wm-network-uploader .wm-button.disabled.dark.-selector,:host .wm-button.disabled.dark.-textonly,wm-network-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-network-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-network-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-network-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-selector-primary,wm-network-uploader .wm-button:disabled.dark.-selector-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-network-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-selector-primary,wm-network-uploader .wm-button.disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-network-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-network-uploader a.wm-button,:host label.wm-button,wm-network-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-network-uploader{width:100%;position:relative}:host[dir=RTL] .mdi,wm-network-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-network-uploader input:focus+.wm-button.user-is-tabbing{-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;-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;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}:host *,wm-network-uploader *{-webkit-box-sizing:border-box;box-sizing:border-box}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.header{position:relative;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}.header .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.notif-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.notif-wrapper .notif{font-size:0.875rem;font-style:italic;margin-top:0.25rem}@media (max-width: 60.9375rem){.descr{margin-bottom:0.5rem}.notif-wrapper{margin-bottom:1rem}.header .notif-wrapper{-ms-flex-align:start;align-items:flex-start}}.file-info{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-info+.file-controls{-ms-flex:none;flex:none;margin-left:1rem}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:1.5rem;margin-bottom:0.4375rem}.empty-block .notif-wrapper{-ms-flex-pack:center;justify-content:center}.empty-block .notif-wrapper .wm-button{width:auto}ul{list-style:none;padding:0;width:100%}ul li{font-size:0.875rem}ul li .file{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:relative;height:3.75rem;padding:0.5rem 1.25rem;background:#f4f4f4;border:1px solid #6b6b6b;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}ul li .file+.file{margin-top:1.25rem}ul li .file .filename{font-weight:500}ul li .file .filedate{margin-left:3.75rem;font-weight:normal;font-style:italic}ul li .file wm-button+wm-button{margin-left:1rem}ul.file-list .file.--saved,ul.inprogress-list .file{margin-bottom:1.625rem}ul .progress{position:absolute;left:0;top:0;right:0;height:8px}ul.error-list li{margin-bottom:1.25rem;color:#c0392b}ul.error-list li .file{border:1px solid #c0392b;background-color:#f5ebea;height:3.75rem}ul .error-message{padding-top:0.25rem;font-style:italic}';const p=class{constructor(o){t(this,o);this.wmNetworkUploaderFilesChanged=e(this,"wmNetworkUploaderFilesChanged",7);this.inputId=b();this.isTabbing=false;this.fileList=[];this.inProgressList=[];this.errorList=[];this.notif=undefined;this.snackbar=[];this.numFilesInProgress=undefined;this.getPath=undefined;this.requestUploadPath=undefined;this.uploadPath=undefined;this.requestDownloadPath=undefined;this.deletePath=undefined;this.associatedData=undefined;this.buttonText=undefined;this.emptyStateText=undefined;this.icon=undefined;this.fileTypes="pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";this.maxSize=100;this.maxFiles=undefined;this.sortBy="date"}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleUploadProgress(t){this.inProgressList.map((e=>{if(e.name===t.detail.file_name){e.progress=t.detail.progress;o(this.el)}}));if(t.detail.progress===100){this.numFilesInProgress-=1}if(!this.srProgress&&this.numFilesInProgress){const t=this.numFilesInProgress;this.srProgress=setInterval((()=>{const e=this.inProgressList.reduce(((t,e)=>e.progress?t+e.progress:t),0);if(this.liveRegion){this.liveRegion.innerHTML=m.formatMessage({id:"uploader.uploadProgress",defaultMessage:"Upload progress: {percentage}%"},{percentage:Math.floor(e/t)})}}),5e3)}}handleFinishedSnack(t){this.snackbar=this.snackbar.filter((e=>e.id!==t.detail.id))}setMaxSize(){this.maxSize=this.maxSize>100?100:this.maxSize}uploadNotifications(t,e){if(e>0&&t===0){setTimeout((()=>{this.notif=null}),20*1e3);const t=m.formatMessage({id:"uploader.finishedUploading",defaultMessage:"Finished uploading"});this.notif={id:5,message:t};if(this.liveRegion){this.liveRegion.innerHTML=t}this.numFilesInProgress=null;clearInterval(this.srProgress);o(this.el)}else if(t>0&&t!=e){const e=m.formatMessage({id:"uploader.filesUploading",defaultMessage:"{num, plural, one {1 file uploading} other {# files uploading}}"},{num:t});this.notif={id:6,message:e};if(this.liveRegion){this.liveRegion.innerHTML=e}o(this.el)}}emitFileListEvent(){this.wmNetworkUploaderFilesChanged.emit(this.fileList)}formatDate(t,e,o){const n=Date.parse(t);if(e.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)){try{Intl.getCanonicalLocales(e)}catch(t){e="en-us"}}else{return t}if(!!n){const t=new Date(n);const r=t.getFullYear();const i=("0"+(t.getMonth()+1)).substr(-2);const a=("0"+t.getDate()).substr(-2);const s=t.toLocaleTimeString([e,"en-us"],{timeZone:o,hour:"numeric",minute:"numeric"});return`${r}/${i}/${a} ${s}`}else{return t}}isValidSize(t){return t/1024/1024<=this.maxSize}isDuplicate(t){return this.fileList.find((e=>e.file_name===t))}isEmpty(){return!this.fileList.length&&!this.inProgressList.length&&!this.errorList.length}get isDisabled(){const t=!!this.maxFiles&&this.fileList.length>=this.maxFiles;if(!this.notif){if(t){const t=m.formatMessage({id:"uploader.fileUploadLimitExceeded",defaultMessage:"Upload unsuccessful because file selection would exceed the maximum number of files",description:"Message displayed when trying to upload too many files"});this.notif={id:1,message:t};if(this.liveRegion){this.liveRegion.innerHTML=t}}else{this.notif=null}}else if(this.notif.id===1){if(!t){this.notif=null}}return t||this.numFilesInProgress>0}purgeProgressList(t){this.inProgressList=this.inProgressList.filter((e=>e.progress!==100&&e.name!==t.file_name))}getExistingFiles(){a(this.getPath).then((t=>{t.map((t=>this.purgeProgressList(t)));if(this.sortBy==="name"){t.sort(((t,e)=>t.file_name.localeCompare(e.file_name)))}this.fileList=t})).catch((t=>{console.error(t)}))}clearErrors(){this.errorList=[];this.notif=null}handleFiles(t){const e=Array.from(t.target.files);const n=this.fileTypes.split(" ").join(", ");if(!!this.maxFiles&&this.fileList.length+e.length>this.maxFiles){const t=m.formatMessage({id:"uploader.fileUploadLimitExceeded",defaultMessage:"Upload unsuccessful because file selection would exceed the maximum number of files",description:"Message displayed when trying to upload too many files"});this.notif={id:2,message:t};if(this.liveRegion){this.liveRegion.innerHTML=t}}else{e&&e.map((t=>{if(!u(t,this.fileTypes)){const e={file_name:t.name,message:m.formatMessage({id:"uploader.invalidFileType",defaultMessage:"The file type is invalid. Accepted types: {validTypes}"},{validTypes:n})};this.errorList.push(e)}else if(!this.isValidSize(t.size)){const e={file_name:t.name,message:m.formatMessage({id:"uploader.fileTooLarge",defaultMessage:"The selected file is too large. Maximum file size is {size}Mb"},{size:this.maxSize})};this.errorList.push(e)}else if(this.isDuplicate(t.name)){const e={file_name:t.name,message:m.formatMessage({id:"uploader.duplicateName",defaultMessage:"A file with this name already exists."})};this.errorList.push(e)}else{this.inProgressList.push(t)}o(this.el)}));if(this.inProgressList.length>0){this.numFilesInProgress=this.inProgressList.length;this.inProgressList.map(((t,e)=>{this.uploadFile(t,e)}))}}t.target.value=""}uploadFile(t,e){a(this.requestUploadPath+e.toString()).then((async e=>{const o=JSON.parse(this.associatedData);const n=Object.assign(Object.assign({},o),{file_name:t.name,mime_type:t.type,file_path:e.path,document_uuid:e.guid});const r=e=>{const o=e.lengthComputable&&e.total!==0?e.loaded/e.total*100:0;const n=new CustomEvent("wmUploadProgress",{detail:{file_name:t.name,progress:o}});this.el.dispatchEvent(n)};await s(e.url,t,r);await l(this.uploadPath,n);this.getExistingFiles()})).catch((t=>{this.numFilesInProgress=null;this.inProgressList=[];this.notif={id:3,message:m.formatMessage({id:"global.genericError",defaultMessage:"An error occurred. Please try again."})};console.error(t)}))}downloadFile(t,e){this.clearErrors();const o={file_path:e,file_uuid:t};l(this.requestDownloadPath,o).then((t=>{window.location.assign(t.url)})).catch((t=>{console.error(t)}))}deleteFile(t){this.clearErrors();this.snackbar.push({message:m.formatMessage({id:"uploader.fileDeleted",defaultMessage:"{fileName} was deleted."},{fileName:t.file_name}),id:t.uuid,link:""});this.fileList=this.fileList.filter((e=>e.uuid!==t.uuid));d(`${this.deletePath}/${t.uuid}`).catch((e=>{this.notif={id:4,message:m.formatMessage({id:"uploader.fileNotDeleted",defaultMessage:"{fileName} could not be deleted."},{fileName:t.file_name})};this.getExistingFiles();console.error(e)}))}componentWillLoad(){if(!this.getPath){throw new Error("wm-network-uploader: get-path is a required prop")}if(!this.requestUploadPath){throw new Error("wm-network-uploader: request-upload-path is a required prop")}if(!this.uploadPath){throw new Error("wm-network-uploader: upload-path is a required prop")}if(!this.requestDownloadPath){throw new Error("wm-network-uploader: request-download-path is a required prop")}if(!this.deletePath){throw new Error("wm-network-uploader: delete-path is a required prop")}if(!this.buttonText){throw new Error("wm-network-uploader: button-text is a required prop")}if(!this.emptyStateText){throw new Error("wm-network-uploader: empty-state-text is a required prop")}if(!this.associatedData){throw new Error("wm-network-uploader: associated-data is a required prop")}this.setMaxSize();this.clearErrors()}componentDidLoad(){this.getExistingFiles();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}}uploadButtonOnClick(t){if(this.isDisabled){t.preventDefault();if(this.liveRegion){const t=!!this.maxFiles&&this.fileList.length>=this.maxFiles;let e="";if(this.numFilesInProgress>0){e=m.formatMessage({id:"uploader.waitToUpload",defaultMessage:"Please wait for current upload to complete before uploading new files.",description:"Message for screen reader users"})}else if(t){e=m.formatMessage({id:"uploader.fileUploadLimitExceeded",defaultMessage:"Upload unsuccessful because file selection would exceed the maximum number of files",description:"Message displayed when trying to upload too many files"})}if(e){this.liveRegion.innerHTML="";new Promise((t=>{setTimeout((()=>{t("")}),500)})).then((()=>this.liveRegion.innerHTML=e))}}}else{this.clearErrors()}}renderUploadSvg(){return n("svg",{class:"upload-file",width:"91",height:"84",viewBox:"0 0 91 84"},n("path",{transform:"rotate(-180.000000) translate(-452, -255.5)",fill:"#eae8ec",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"}))}renderIcon(){const t=this.icon&&this.icon==="f066";return this.icon&&n("span",{class:`mdi ${t?"rotate":""}`},String.fromCodePoint(parseInt(`0x${this.icon}`)))}renderNotif(){return this.notif?n("span",{class:"notif"},this.notif.message):""}renderUploadButton(t){return n("div",{class:"notif-wrapper"},n("input",{name:this.inputId,id:this.inputId,class:"sr-only",type:"file",multiple:true,onClick:t=>this.uploadButtonOnClick(t),onChange:t=>this.handleFiles(t)}),n("label",{htmlFor:this.inputId,class:`wm-button ${t}${this.isTabbing?" user-is-tabbing":""}`},this.renderIcon(),this.buttonText),this.renderNotif())}renderWithItems(){return n("div",null,n("div",{class:"header"},n("div",{class:"descr"},n("slot",null)),this.renderUploadButton(this.isDisabled?"disabled":"")),this.renderErrorList(),this.renderInProgressList(),this.renderFileList())}renderEmptyState(){return n("div",null,n("div",{class:"header"},n("div",{class:"descr"},n("slot",null))),n("div",{class:"empty-block"},this.renderUploadSvg(),n("div",{class:"empty-message"},this.emptyStateText),this.renderUploadButton("-primary empty-button")))}renderErrorList(){if(!!this.errorList.length){if(this.liveRegion){let t=this.errorList.reduce((function(t,e){return t+`${e.file_name}: ${e.message} `}),"");this.liveRegion.innerHTML=t}return n("ul",{class:"error-list"},this.errorList.map((t=>n("li",null,n("div",{class:"file --error"},n("div",{class:"file-info"},n("span",{class:"filename"},t.file_name))),n("div",{class:"error-message"},t.message)))))}}renderInProgressList(){return n("ul",{class:"inprogress-list"},this.inProgressList.map((t=>n("li",null,n("div",{class:"file --progress"},n("div",{class:"progress",style:{background:`linear-gradient(to right, rgba(67, 126, 142, 1) ${t.progress}%, transparent ${t.progress}%)`}}),n("div",{class:"file-info"},n("span",{class:"filename"},t.name," ",n("span",{class:"sr-only"},"uploading"))))))))}renderFile(t){return n("li",null,n("div",{class:"file --saved"},n("div",{class:"file-info"},n("span",{class:"filename"},t.file_name),n("span",{class:"filedate"},this.formatDate(t.updated_at,m.locale,Intl.DateTimeFormat().resolvedOptions().timeZone))),n("div",{class:"file-controls"},n("wm-button",{class:"download-button","button-type":"icononly",tooltip:"download","label-for-identical-buttons":`download ${t.file_name}`,icon:"f1da",onClick:()=>this.downloadFile(t.uuid,t.file_path)}),n("wm-button",{class:"delete-button","button-type":"icononly",tooltip:"remove","label-for-identical-buttons":`remove ${t.file_name}`,icon:"f1c0",onClick:()=>this.deleteFile(t)}))))}renderFileList(){return n("ul",{class:"file-list"},this.fileList.map((t=>this.renderFile(t))))}render(){return n(r,null,this.isEmpty()?this.renderEmptyState():this.renderWithItems(),n("wm-snackbar",{notifications:JSON.stringify(this.snackbar)}),n("div",{ref:t=>this.liveRegion=t,class:"live-region sr-only","aria-live":"assertive","aria-atomic":"true"}))}get el(){return i(this)}static get watchers(){return{maxSize:["setMaxSize"],numFilesInProgress:["uploadNotifications"],fileList:["emitFileListEvent"]}}};p.style=w;export{p as wm_network_uploader};
-//# sourceMappingURL=p-124da634.entry.js.map

package/dist/ripple/p-124da634.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmNetworkUploaderCss","NetworkUploader","this","inputId","generateId","toggleTabbingOn","isTabbing","toggleTabbingOff","handleUploadProgress","ev","inProgressList","map","i","name","detail","file_name","progress","forceUpdate","el","numFilesInProgress","srProgress","total","setInterval","aggregate","reduce","avg","item","liveRegion","innerHTML","intl","formatMessage","id","defaultMessage","percentage","Math","floor","handleFinishedSnack","snackbar","filter","n","setMaxSize","maxSize","uploadNotifications","newNum","oldNum","setTimeout","notif","message","clearInterval","num","emitFileListEvent","wmNetworkUploaderFilesChanged","emit","fileList","formatDate","isoDate","locale","timezone","timestamp","Date","parse","match","Intl","getCanonicalLocales","_a","date","year","getFullYear","month","getMonth","substr","day","getDate","time","toLocaleTimeString","timeZone","hour","minute","isValidSize","size","isDuplicate","find","f","isEmpty","length","errorList","isDisabled","isMax","maxFiles","errMessage","description","purgeProgressList","getExistingFiles","getRequest","getPath","then","reply","sortBy","sort","a","b","localeCompare","catch","errStatus","console","error","clearErrors","handleFiles","files","Array","from","target","validTypes","fileTypes","split","join","file","hasValidType","push","uploadFile","value","requestUploadPath","toString","async","assData","JSON","associatedData","fileInfo","Object","assign","mime_type","type","file_path","path","document_uuid","guid","onProgress","lengthComputable","loaded","event","CustomEvent","dispatchEvent","putRequest","url","postRequest","uploadPath","err","downloadFile","uuid","payload","file_uuid","requestDownloadPath","window","location","deleteFile","fileName","link","deleteRequest","deletePath","componentWillLoad","Error","buttonText","emptyStateText","componentDidLoad","document","body","classList","contains","uploadButtonOnClick","preventDefault","errMsg","Promise","resolve","renderUploadSvg","h","class","width","height","viewBox","transform","fill","d","renderIcon","rotate","icon","String","fromCodePoint","parseInt","renderNotif","renderUploadButton","classes","multiple","onClick","onChange","e","htmlFor","renderWithItems","renderErrorList","renderInProgressList","renderFileList","renderEmptyState","srMessage","acc","style","background","renderFile","updated_at","DateTimeFormat","resolvedOptions","tooltip","render","Host","notifications","stringify","ref"],"sources":["./src/components/wm-uploader/wm-network-uploader/wm-network-uploader.scss?tag=wm-network-uploader&encapsulation=shadow","./src/components/wm-uploader/wm-network-uploader/wm-network-uploader.tsx"],"sourcesContent":[":host,\r\nwm-network-uploader {\r\n  width: 100%;\r\n  position: relative;\r\n\r\n  &[dir=\"RTL\"] {\r\n    .mdi {\r\n      margin-left: rem-calc(5);\r\n      margin-right: 0;\r\n    }\r\n  }\r\n  @extend %wm-button;\r\n\r\n  input:focus + .wm-button.user-is-tabbing {\r\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;\r\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;\r\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;\r\n  }\r\n}\r\n\r\n:host *,\r\nwm-network-uploader * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n\r\n.header {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  flex-wrap: wrap;\r\n\r\n  .notif-wrapper {\r\n    align-items: flex-end;\r\n  }\r\n}\r\n\r\n.notif-wrapper {\r\n  display: flex;\r\n  align-items: flex-start; // for .notif\r\n  height: -moz-fit-content;\r\n  height: fit-content;\r\n  flex-direction: column; // for.notif\r\n  align-items: center; // for.notif\r\n  .notif {\r\n    font-size: 0.875rem;\r\n    font-style: italic;\r\n    margin-top: rem-calc(4);\r\n  }\r\n}\r\n\r\n@media (max-width: rem-calc(975)) {\r\n  .descr {\r\n    margin-bottom: rem-calc(8);\r\n  }\r\n  .notif-wrapper {\r\n    margin-bottom: rem-calc(16);\r\n  }\r\n  .header {\r\n    .notif-wrapper {\r\n      align-items: flex-start;\r\n    }\r\n  }\r\n}\r\n\r\n.file-info {\r\n  white-space: nowrap;\r\n  text-overflow: ellipsis;\r\n  overflow: hidden;\r\n\r\n  + .file-controls {\r\n    flex: none;\r\n    margin-left: rem-calc(16);\r\n  }\r\n}\r\n\r\n.empty-block {\r\n  margin: 5rem auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n\r\n  .upload-file {\r\n    margin-bottom: rem-calc(30);\r\n  }\r\n\r\n  .empty-message {\r\n    font-size: 1.5rem;\r\n    margin-bottom: rem-calc(7);\r\n  }\r\n\r\n  .notif-wrapper {\r\n    justify-content: center;\r\n\r\n    .wm-button {\r\n      // Removing the width inherit here to prevent a 100% width\r\n      // from the notif-wrapper. Future proofing a day when\r\n      // we might want a long notif to wrap.\r\n      width: auto;\r\n    }\r\n  }\r\n}\r\n\r\nul {\r\n  list-style: none;\r\n  padding: 0;\r\n  width: 100%;\r\n  li {\r\n    font-size: rem-calc(14);\r\n    .file {\r\n      @include border-radius(3px);\r\n      position: relative; // for progress bar\r\n      height: rem-calc(60);\r\n      padding: rem-calc(8 20);\r\n      background: $background;\r\n      border: 1px solid rgb(107, 107, 107);\r\n\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n\r\n      + .file {\r\n        margin-top: rem-calc(20);\r\n      }\r\n\r\n      .filename {\r\n        font-weight: 500;\r\n      }\r\n\r\n      .filedate {\r\n        margin-left: rem-calc(60);\r\n        font-weight: normal;\r\n        font-style: italic;\r\n      }\r\n\r\n      wm-button + wm-button {\r\n        margin-left: rem-calc(16);\r\n      }\r\n    }\r\n  }\r\n\r\n  &.file-list .file.--saved,\r\n  &.inprogress-list .file {\r\n    // margin-bottom also on the last element, otherwise tooltip on dl and delete btns triggers a scrollbar\r\n    margin-bottom: rem-calc(26);\r\n  }\r\n\r\n  .progress {\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    right: 0;\r\n    height: 8px;\r\n  }\r\n\r\n  &.error-list li {\r\n    margin-bottom: rem-calc(20);\r\n    color: $error-color;\r\n    .file {\r\n      border: 1px solid $error-color;\r\n      background-color: #f5ebea;\r\n      height: rem-calc(60);\r\n    }\r\n  }\r\n  .error-message {\r\n    padding-top: rem-calc(4);\r\n    font-style: italic;\r\n  }\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, Watch, Event, EventEmitter } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { getRequest, postRequest, putRequest, deleteRequest } from \"../../../global/services/http-service\";\r\nimport { intl, generateId, hasValidType } from \"../../../global/functions\";\r\n//\r\n// Web API File interface => for FileList on input element, sending to AWS\r\n// Custom FileInfo interface (below) => for our server\r\nexport interface FileInfo {\r\n  file_name: string;\r\n  file_path?: string;\r\n  mime_type: string;\r\n  updated_at?: string;\r\n\r\n  uuid?: string; // AWS guid\r\n  document_uuid?: string; // aka file uuid. how is that different from the uuid above?\r\n  // organization_uuid: string; // aka node uuid\r\n}\r\n\r\ninterface FileInProgress extends File {\r\n  progress?: number;\r\n}\r\n\r\ninterface ErrorInfo {\r\n  file_name: string;\r\n  message: string;\r\n}\r\n\r\ninterface AWSData {\r\n  url: string;\r\n  updated_at: string;\r\n  path: string;\r\n  guid: string;\r\n}\r\n\r\ninterface Notification {\r\n  message: string;\r\n  id: string;\r\n  link: string;\r\n}\r\n\r\n@Component({\r\n  tag: \"wm-network-uploader\",\r\n  styleUrl: \"wm-network-uploader.scss\",\r\n  shadow: true,\r\n})\r\nexport class NetworkUploader {\r\n  @Element() el!: HTMLWmNetworkUploaderElement;\r\n  private liveRegion?: HTMLDivElement;\r\n\r\n  @State() isTabbing: boolean = false;\r\n\r\n  @State() fileList: FileInfo[] = [];\r\n  @State() inProgressList: FileInProgress[] = [];\r\n  @State() errorList: ErrorInfo[] = []; // for errors on a particular file\r\n  @State() notif?: { id: number; message: string } | null; // for global errors, e.g. user tries uploading too many files, and upload notifications\r\n  @State() snackbar: Notification[] = [];\r\n  @State() numFilesInProgress?: number | null; // null when not uploading != 0 (when all files are done uploading) != undefined (original state)\r\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.\r\n\r\n  @Prop() getPath!: string;\r\n  @Prop() requestUploadPath!: string;\r\n  @Prop() uploadPath!: string; // used for POST request (create db entry)\r\n  @Prop() requestDownloadPath!: string;\r\n  @Prop() deletePath!: string;\r\n\r\n  @Prop() associatedData?: string;\r\n  @Prop() buttonText!: string;\r\n  @Prop() emptyStateText!: string;\r\n  @Prop() icon!: string;\r\n  @Prop() fileTypes: string = \"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\";\r\n  @Prop({ mutable: true }) maxSize: number = 100; // in Mb\r\n  @Prop() maxFiles?: number;\r\n  @Prop() sortBy: \"name\" | \"date\" = \"date\"; // name is descending (a -> z), date is ascending (earlier -> later)\r\n\r\n  @Event() wmNetworkUploaderFilesChanged!: EventEmitter<Object[]>;\r\n\r\n  private inputId = generateId();\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"wmUploadProgress\")\r\n  handleUploadProgress(ev: CustomEvent) {\r\n    this.inProgressList.map((i) => {\r\n      if (i.name === ev.detail.file_name) {\r\n        i.progress = ev.detail.progress;\r\n        forceUpdate(this.el);\r\n      }\r\n    });\r\n\r\n    if (ev.detail.progress === 100) {\r\n      // inProgressList is not a perfect reflection of how many files are uploading\r\n      // because even after progress reached 100% the item should remain in the array\r\n      // (should only be removed once it appears in fileList)\r\n      this.numFilesInProgress! -= 1;\r\n    }\r\n\r\n    // aggregate the percentages for SR to announce progress\r\n    if (!this.srProgress && this.numFilesInProgress) {\r\n      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong\r\n      this.srProgress = setInterval(() => {\r\n        const aggregate = this.inProgressList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);\r\n        if (this.liveRegion) {\r\n          this.liveRegion.innerHTML = intl.formatMessage(\r\n            {\r\n              id: \"uploader.uploadProgress\",\r\n              defaultMessage: \"Upload progress: {percentage}%\",\r\n            },\r\n            { percentage: Math.floor(aggregate / total) }\r\n          );\r\n        }\r\n      }, 5000);\r\n    }\r\n  }\r\n\r\n  @Listen(\"userFinishedSnack\")\r\n  handleFinishedSnack(ev: CustomEvent) {\r\n    this.snackbar = this.snackbar.filter((n) => n.id !== ev.detail.id);\r\n  }\r\n\r\n  @Watch(\"maxSize\")\r\n  setMaxSize() {\r\n    // Max size can't be set above 100Mb\r\n    this.maxSize = this.maxSize > 100 ? 100 : this.maxSize;\r\n  }\r\n\r\n  @Watch(\"numFilesInProgress\")\r\n  uploadNotifications(newNum: number, oldNum: number) {\r\n    if (oldNum > 0 && newNum === 0) {\r\n      setTimeout(() => {\r\n        this.notif = null;\r\n      }, 20 * 1000);\r\n      const message = intl.formatMessage({\r\n        id: \"uploader.finishedUploading\",\r\n        defaultMessage: \"Finished uploading\",\r\n      });\r\n      this.notif = { id: 5, message };\r\n      if (this.liveRegion) {\r\n        this.liveRegion.innerHTML = message;\r\n      }\r\n      this.numFilesInProgress = null;\r\n      clearInterval(this.srProgress);\r\n      forceUpdate(this.el);\r\n    } else if (newNum > 0 && newNum != oldNum) {\r\n      const message = intl.formatMessage(\r\n        {\r\n          id: \"uploader.filesUploading\",\r\n          defaultMessage: \"{num, plural, one {1 file uploading} other {# files uploading}}\",\r\n        },\r\n        { num: newNum }\r\n      );\r\n      this.notif = { id: 6, message };\r\n      if (this.liveRegion) {\r\n        this.liveRegion.innerHTML = message;\r\n      }\r\n      forceUpdate(this.el);\r\n    }\r\n  }\r\n\r\n  @Watch(\"fileList\")\r\n  emitFileListEvent() {\r\n    this.wmNetworkUploaderFilesChanged.emit(this.fileList);\r\n  }\r\n\r\n  formatDate(isoDate: string, locale: string, timezone: string) {\r\n    const timestamp = Date.parse(isoDate);\r\n    if (locale.match(/^[a-zA-Z]*(-[a-zA-Z0-9]*)*$/g)) {\r\n      // make sure locale is valid, otherwise set default locale\r\n      try {\r\n        //@ts-ignore\r\n        Intl.getCanonicalLocales(locale);\r\n      } catch {\r\n        locale = \"en-us\";\r\n      }\r\n    } else {\r\n      return isoDate;\r\n    }\r\n\r\n    if (!!timestamp) {\r\n      const date = new Date(timestamp);\r\n      const year = date.getFullYear();\r\n      const month = (\"0\" + (date.getMonth() + 1)).substr(-2);\r\n      const day = (\"0\" + date.getDate()).substr(-2);\r\n      const time = date.toLocaleTimeString([locale, \"en-us\"], {\r\n        timeZone: timezone,\r\n        hour: \"numeric\",\r\n        minute: \"numeric\",\r\n      });\r\n      return `${year}/${month}/${day} ${time}`;\r\n    } else {\r\n      return isoDate;\r\n    }\r\n  }\r\n\r\n  isValidSize(size: number) {\r\n    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes\r\n    return size / 1024 / 1024 <= this.maxSize;\r\n  }\r\n\r\n  isDuplicate(name: string) {\r\n    return this.fileList.find((f) => f.file_name === name);\r\n  }\r\n\r\n  isEmpty() {\r\n    return !this.fileList.length && !this.inProgressList.length && !this.errorList.length;\r\n  }\r\n\r\n  get isDisabled() {\r\n    const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;\r\n\r\n    if (!this.notif) {\r\n      if (isMax) {\r\n        const errMessage = intl.formatMessage({\r\n          id: \"uploader.fileUploadLimitExceeded\",\r\n          defaultMessage: \"Upload unsuccessful because file selection would exceed the maximum number of files\",\r\n          description: \"Message displayed when trying to upload too many files\",\r\n        });\r\n        this.notif = { id: 1, message: errMessage };\r\n        if (this.liveRegion) {\r\n          this.liveRegion.innerHTML = errMessage;\r\n        }\r\n      } else {\r\n        this.notif = null;\r\n      }\r\n    } else if (this.notif.id === 1) {\r\n      // to make sure SR don't repeat the error, don't reset it if it already is showing\r\n      // just dismiss it if isMax is not true anymore\r\n      if (!isMax) {\r\n        this.notif = null;\r\n      }\r\n      // finally do nothing if error 2 is showing (special case when user selects too many files)\r\n    }\r\n    // disable if is the uploader is maxed out or if something is uploading\r\n    return isMax || this.numFilesInProgress! > 0;\r\n  }\r\n\r\n  purgeProgressList(item: FileInfo) {\r\n    // If a file is retrieved from the server because it was just uploaded\r\n    // it should be removed from inProgressList\r\n    this.inProgressList = this.inProgressList.filter((i) => i.progress !== 100 && i.name !== item.file_name);\r\n  }\r\n\r\n  getExistingFiles() {\r\n    getRequest(this.getPath)\r\n      .then((reply: FileInfo[]) => {\r\n        reply.map((item) => this.purgeProgressList(item));\r\n        if (this.sortBy === \"name\") {\r\n          reply.sort((a, b) => a.file_name.localeCompare(b.file_name));\r\n        }\r\n        this.fileList = reply;\r\n      })\r\n      .catch((errStatus) => {\r\n        console.error(errStatus);\r\n      });\r\n  }\r\n\r\n  clearErrors() {\r\n    this.errorList = [];\r\n    this.notif = null;\r\n  }\r\n\r\n  handleFiles(ev: Event) {\r\n    const files = Array.from((ev.target! as HTMLInputElement).files!);\r\n    const validTypes = this.fileTypes.split(\" \").join(\", \");\r\n\r\n    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {\r\n      const errMessage = intl.formatMessage({\r\n        id: \"uploader.fileUploadLimitExceeded\",\r\n        defaultMessage: \"Upload unsuccessful because file selection would exceed the maximum number of files\",\r\n        description: \"Message displayed when trying to upload too many files\",\r\n      });\r\n      this.notif = { id: 2, message: errMessage };\r\n      if (this.liveRegion) {\r\n        this.liveRegion.innerHTML = errMessage;\r\n      }\r\n    } else {\r\n      // map to create inProgress items so they can be displayed immediately\r\n      files &&\r\n        files.map((file) => {\r\n          if (!hasValidType(file, this.fileTypes)) {\r\n            const error = {\r\n              file_name: file.name,\r\n              message: intl.formatMessage(\r\n                {\r\n                  id: \"uploader.invalidFileType\",\r\n                  defaultMessage: \"The file type is invalid. Accepted types: {validTypes}\",\r\n                },\r\n                { validTypes }\r\n              ),\r\n            };\r\n            this.errorList.push(error);\r\n          } else if (!this.isValidSize(file.size)) {\r\n            const error = {\r\n              file_name: file.name,\r\n              message: intl.formatMessage(\r\n                {\r\n                  id: \"uploader.fileTooLarge\",\r\n                  defaultMessage: \"The selected file is too large. Maximum file size is {size}Mb\",\r\n                },\r\n                { size: this.maxSize }\r\n              ),\r\n            };\r\n            this.errorList.push(error);\r\n          } else if (this.isDuplicate(file.name)) {\r\n            const error = {\r\n              file_name: file.name,\r\n              message: intl.formatMessage({\r\n                id: \"uploader.duplicateName\",\r\n                defaultMessage: \"A file with this name already exists.\",\r\n              }),\r\n            };\r\n            this.errorList.push(error);\r\n          } else {\r\n            this.inProgressList.push(file);\r\n          }\r\n          forceUpdate(this.el);\r\n        });\r\n\r\n      if (this.inProgressList.length > 0) {\r\n        this.numFilesInProgress = this.inProgressList.length;\r\n\r\n        // map over \"uploadable\" files for actual upload\r\n        // this happens separately otherwise at each pass we'd have to wait for the requests to complete before displaying things\r\n        this.inProgressList.map((file, i) => {\r\n          this.uploadFile(file, i); // = input.files file\r\n        });\r\n      }\r\n    }\r\n    (ev.target! as HTMLInputElement).value = \"\"; // reset to ensure that onChange is triggered when the same file is selected a second time\r\n  }\r\n\r\n  uploadFile(file: File, i: number) {\r\n    // get upload link\r\n    getRequest(this.requestUploadPath + i.toString())\r\n      .then(async (reply: AWSData) => {\r\n        const assData = JSON.parse(this.associatedData!);\r\n        const fileInfo: FileInfo = {\r\n          ...assData,\r\n          file_name: file.name,\r\n          mime_type: file.type,\r\n          file_path: reply.path,\r\n          document_uuid: reply.guid,\r\n        };\r\n\r\n        // onProgress is passed as a callback to the ev listener inside putRequest (http service),\r\n        // so we can't change component things directly => custom event to pass data to uploader component.\r\n        const onProgress = (ev: ProgressEvent) => {\r\n          const progress = ev.lengthComputable && ev.total !== 0 ? (ev.loaded / ev.total) * 100 : 0;\r\n          const event = new CustomEvent(\"wmUploadProgress\", {\r\n            detail: { file_name: file.name, progress },\r\n          });\r\n\r\n          this.el.dispatchEvent(event);\r\n        };\r\n\r\n        // upload to AWS s3 to url we just fetched\r\n        await putRequest(reply.url, file, onProgress);\r\n\r\n        // create the db entry\r\n        await postRequest(this.uploadPath, fileInfo);\r\n\r\n        // get files from server again\r\n        this.getExistingFiles();\r\n      })\r\n      .catch((err) => {\r\n        // do not show toast on error\r\n        this.numFilesInProgress = null;\r\n        // do not show in progress item on error\r\n        this.inProgressList = [];\r\n        this.notif = {\r\n          id: 3,\r\n          message: intl.formatMessage({\r\n            id: \"global.genericError\",\r\n            defaultMessage: \"An error occurred. Please try again.\",\r\n          }),\r\n        };\r\n        console.error(err);\r\n      });\r\n  }\r\n\r\n  downloadFile(uuid: string, path: string) {\r\n    this.clearErrors();\r\n\r\n    // POST request to get temporary download link\r\n    const payload = {\r\n      file_path: path,\r\n      file_uuid: uuid,\r\n    };\r\n    postRequest(this.requestDownloadPath, payload)\r\n      .then((reply: { url: string }) => {\r\n        // we got the download link, now download the file\r\n        window.location.assign(reply.url);\r\n      })\r\n      .catch((err) => {\r\n        console.error(err);\r\n      });\r\n  }\r\n\r\n  deleteFile(file: FileInfo) {\r\n    this.clearErrors();\r\n\r\n    this.snackbar.push({\r\n      message: intl.formatMessage(\r\n        {\r\n          id: \"uploader.fileDeleted\",\r\n          defaultMessage: \"{fileName} was deleted.\",\r\n        },\r\n        { fileName: file.file_name }\r\n      ),\r\n      id: file.uuid!,\r\n      link: \"\",\r\n    });\r\n\r\n    // rm file from list immediately.\r\n    this.fileList = this.fileList.filter((i) => i.uuid !== file.uuid);\r\n\r\n    deleteRequest(`${this.deletePath}/${file.uuid}`).catch((err) => {\r\n      this.notif = {\r\n        id: 4,\r\n        message: intl.formatMessage(\r\n          {\r\n            id: \"uploader.fileNotDeleted\",\r\n            defaultMessage: \"{fileName} could not be deleted.\",\r\n          },\r\n          { fileName: file.file_name }\r\n        ),\r\n      };\r\n      this.getExistingFiles();\r\n      console.error(err);\r\n    });\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.getPath) {\r\n      throw new Error(\"wm-network-uploader: get-path is a required prop\");\r\n    }\r\n    if (!this.requestUploadPath) {\r\n      throw new Error(\"wm-network-uploader: request-upload-path is a required prop\");\r\n    }\r\n    if (!this.uploadPath) {\r\n      throw new Error(\"wm-network-uploader: upload-path is a required prop\");\r\n    }\r\n    if (!this.requestDownloadPath) {\r\n      throw new Error(\"wm-network-uploader: request-download-path is a required prop\");\r\n    }\r\n    if (!this.deletePath) {\r\n      throw new Error(\"wm-network-uploader: delete-path is a required prop\");\r\n    }\r\n    if (!this.buttonText) {\r\n      throw new Error(\"wm-network-uploader: button-text is a required prop\");\r\n    }\r\n    if (!this.emptyStateText) {\r\n      throw new Error(\"wm-network-uploader: empty-state-text is a required prop\");\r\n    }\r\n    if (!this.associatedData) {\r\n      throw new Error(\"wm-network-uploader: associated-data is a required prop\");\r\n    }\r\n\r\n    this.setMaxSize();\r\n    this.clearErrors();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.getExistingFiles();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  uploadButtonOnClick(ev: Event) {\r\n    if (this.isDisabled) {\r\n      // this is a temporary fix.\r\n      // we need the disabled button to be programmatically focusable\r\n      // to allow return focus after closing the browser file panel\r\n      // since it's focusable the button should respond when activated\r\n      // it looks disabled, and announces the reason why the action cannot\r\n      // be taken when activated.\r\n      // this is not pretty duplicating a intl message + the logic of isDisabled,\r\n      // but not worth a bigger refactor since this is only until we get the UX for disabled elements and refactor all interactive els.\r\n      ev.preventDefault();\r\n      if (this.liveRegion) {\r\n        const isMax = !!this.maxFiles && this.fileList.length >= this.maxFiles;\r\n        let errMsg: string = \"\";\r\n        if (this.numFilesInProgress! > 0) {\r\n          errMsg = intl.formatMessage({\r\n            id: \"uploader.waitToUpload\",\r\n            defaultMessage: \"Please wait for current upload to complete before uploading new files.\",\r\n            description: \"Message for screen reader users\",\r\n          });\r\n        } else if (isMax) {\r\n          errMsg = intl.formatMessage({\r\n            id: \"uploader.fileUploadLimitExceeded\",\r\n            defaultMessage: \"Upload unsuccessful because file selection would exceed the maximum number of files\",\r\n            description: \"Message displayed when trying to upload too many files\",\r\n          });\r\n        }\r\n\r\n        if (errMsg) {\r\n          // clear and set again to re-announce if button is clicked several times\r\n          // (can't be done inside setTimeout because of scope, hence the promise)\r\n          this.liveRegion.innerHTML = \"\";\r\n          new Promise((resolve) => {\r\n            setTimeout(() => {\r\n              resolve(\"\");\r\n            }, 500);\r\n          }).then(() => (this.liveRegion!.innerHTML = errMsg));\r\n        }\r\n      }\r\n    } else {\r\n      this.clearErrors();\r\n    }\r\n  }\r\n\r\n  renderUploadSvg() {\r\n    return (\r\n      <svg class=\"upload-file\" width=\"91\" height=\"84\" viewBox=\"0 0 91 84\">\r\n        <path\r\n          transform=\"rotate(-180.000000) translate(-452, -255.5)\"\r\n          fill=\"#eae8ec\"\r\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\"\r\n        ></path>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n  renderIcon() {\r\n    // mdi attachment icon (paper clip) is horizontal but we want it vertical\r\n    const rotate = this.icon && this.icon === \"f066\";\r\n    return (\r\n      this.icon && (\r\n        <span class={`mdi ${rotate ? \"rotate\" : \"\"}`}>{String.fromCodePoint(parseInt(`0x${this.icon}`))}</span>\r\n      )\r\n    );\r\n  }\r\n\r\n  renderNotif() {\r\n    return this.notif ? <span class=\"notif\">{this.notif.message}</span> : \"\";\r\n  }\r\n\r\n  renderUploadButton(classes: string) {\r\n    return (\r\n      <div class=\"notif-wrapper\">\r\n        <input\r\n          name={this.inputId}\r\n          id={this.inputId}\r\n          class=\"sr-only\"\r\n          type=\"file\"\r\n          multiple\r\n          onClick={(ev) => this.uploadButtonOnClick(ev)}\r\n          onChange={(e) => this.handleFiles(e)}\r\n        />\r\n        <label htmlFor={this.inputId} class={`wm-button ${classes}${this.isTabbing ? \" user-is-tabbing\" : \"\"}`}>\r\n          {this.renderIcon()}\r\n          {this.buttonText}\r\n        </label>\r\n        {this.renderNotif()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderWithItems() {\r\n    return (\r\n      <div>\r\n        <div class=\"header\">\r\n          <div class=\"descr\">\r\n            <slot />\r\n          </div>\r\n          {this.renderUploadButton(this.isDisabled ? \"disabled\" : \"\")}\r\n        </div>\r\n        {this.renderErrorList()}\r\n        {this.renderInProgressList()}\r\n        {this.renderFileList()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderEmptyState() {\r\n    return (\r\n      <div>\r\n        <div class=\"header\">\r\n          <div class=\"descr\">\r\n            <slot />\r\n          </div>\r\n        </div>\r\n        <div class=\"empty-block\">\r\n          {this.renderUploadSvg()}\r\n          <div class=\"empty-message\">{this.emptyStateText}</div>\r\n          {this.renderUploadButton(\"-primary empty-button\")}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderErrorList() {\r\n    if (!!this.errorList.length) {\r\n      if (this.liveRegion) {\r\n        let srMessage = this.errorList.reduce(function (acc, err) {\r\n          return acc + `${err.file_name}: ${err.message} `;\r\n        }, \"\");\r\n        this.liveRegion.innerHTML = srMessage;\r\n      }\r\n\r\n      return (\r\n        <ul class=\"error-list\">\r\n          {this.errorList.map((err) => (\r\n            <li>\r\n              <div class=\"file --error\">\r\n                <div class=\"file-info\">\r\n                  <span class=\"filename\">{err.file_name}</span>\r\n                </div>\r\n              </div>\r\n              <div class=\"error-message\">{err.message}</div>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderInProgressList() {\r\n    return (\r\n      <ul class=\"inprogress-list\">\r\n        {this.inProgressList.map((item) => {\r\n          return (\r\n            <li>\r\n              <div class=\"file --progress\">\r\n                <div\r\n                  class=\"progress\"\r\n                  style={{\r\n                    background: `linear-gradient(to right, rgba(67, 126, 142, 1) ${item.progress}%, transparent ${item.progress}%)`,\r\n                  }}\r\n                ></div>\r\n                <div class=\"file-info\">\r\n                  <span class=\"filename\">\r\n                    {item.name} <span class=\"sr-only\">uploading</span>\r\n                  </span>\r\n                </div>\r\n              </div>\r\n            </li>\r\n          );\r\n        })}\r\n      </ul>\r\n    );\r\n  }\r\n\r\n  renderFile(item: FileInfo) {\r\n    return (\r\n      <li>\r\n        <div class=\"file --saved\">\r\n          <div class=\"file-info\">\r\n            <span class=\"filename\">{item.file_name}</span>\r\n            <span class=\"filedate\">\r\n              {this.formatDate(item.updated_at!, intl.locale, Intl.DateTimeFormat().resolvedOptions().timeZone)}\r\n            </span>\r\n          </div>\r\n          <div class=\"file-controls\">\r\n            <wm-button\r\n              class=\"download-button\"\r\n              button-type=\"icononly\"\r\n              tooltip=\"download\"\r\n              label-for-identical-buttons={`download ${item.file_name}`}\r\n              icon=\"f1da\"\r\n              onClick={() => this.downloadFile(item.uuid!, item.file_path!)}\r\n            ></wm-button>\r\n            <wm-button\r\n              class=\"delete-button\"\r\n              button-type=\"icononly\"\r\n              tooltip=\"remove\"\r\n              label-for-identical-buttons={`remove ${item.file_name}`}\r\n              icon=\"f1c0\"\r\n              onClick={() => this.deleteFile(item)}\r\n            ></wm-button>\r\n          </div>\r\n        </div>\r\n      </li>\r\n    );\r\n  }\r\n\r\n  renderFileList() {\r\n    return <ul class=\"file-list\">{this.fileList.map((item) => this.renderFile(item))}</ul>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.isEmpty() ? this.renderEmptyState() : this.renderWithItems()}\r\n        <wm-snackbar notifications={JSON.stringify(this.snackbar)}></wm-snackbar>\r\n        <div\r\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\r\n          class=\"live-region sr-only\"\r\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\r\n          aria-atomic=\"true\"\r\n        ></div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-1aa16d42.js.map

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

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

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

package/dist/ripple/p-20d0d019.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmPaginationCss","Pagination","this","totalPages","debouncedResize","debounce","isLargeViewport","window","innerWidth","getMiddlePageNums","coreBtns","currentPage","undefined","toggleTabbingOn","isTabbing","toggleTabbingOff","maintainFocusOnNumberChange","el","requestAnimationFrame","shadowRoot","querySelector","focus","handleResize","calculateTotalPages","Math","ceil","totalItems","itemsPerPage","componentWillLoad","Error","document","body","classList","contains","getElementById","updatePageDisplayed","pageNum","value","wmPaginationPageClicked","emit","pageClicked","srAnnouncement","getCurrentPagesInView","displayShortPagination","pages","i","push","displayPageNumber","displayLongPagination","view","displayEllipsis","map","page","h","id","class","onClick","end","begin","renderLarge","disabled","renderSmall","width","height","xmlns","d","render"],"sources":["./src/components/wm-pagination/wm-pagination.scss?tag=wm-pagination&encapsulation=shadow","./src/components/wm-pagination/wm-pagination.tsx"],"sourcesContent":["nav .largescreen,\r\nnav .smallscreen {\r\n  margin-bottom: rem-calc(10);\r\n  @include displayFlex();\r\n  @include alignItems(center);\r\n  @include justifyContent(flex-end);\r\n  @include type-level-4;\r\n\r\n  .pageview {\r\n    @include type-level-4;\r\n    margin: rem-calc(0 10);\r\n  }\r\n\r\n  .paginationbtn {\r\n    position: relative;\r\n    @include box-shadow(none); // fix for Edge\r\n    @include transition(none);\r\n    border: none;\r\n    color: $button-default-text;\r\n    background-color: transparent;\r\n    margin: 0;\r\n    padding: 0;\r\n    height: rem-calc(40);\r\n    width: rem-calc(40);\r\n    font-family: inherit;\r\n    letter-spacing: 0.3px;\r\n    font-size: rem-calc(14);\r\n    font-weight: 500;\r\n    cursor: pointer;\r\n    text-transform: none; //For Edge\r\n\r\n    svg * {\r\n      fill: #565397;\r\n    }\r\n\r\n    &:hover:not([aria-current=\"page\"]):not([disabled]) {\r\n      text-decoration: underline;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n\r\n    &::-moz-focus-inner {\r\n      border: 0;\r\n      outline: none;\r\n    }\r\n\r\n    &[disabled] {\r\n      color: #9f9f9f;\r\n      pointer-events: none;\r\n      svg * {\r\n        fill: #9f9f9f;\r\n      }\r\n    }\r\n  }\r\n\r\n  .previousbtn {\r\n    margin-right: rem-calc(10);\r\n    width: auto !important;\r\n  }\r\n\r\n  .nextbtn {\r\n    margin-left: rem-calc(10);\r\n    margin-right: 0;\r\n    width: auto !important;\r\n  }\r\n\r\n  .previousbtn,\r\n  .nextbtn {\r\n    @include transition(none);\r\n  }\r\n\r\n  .ellipsis {\r\n    display: inline-block;\r\n    width: rem-calc(40);\r\n    text-align: center;\r\n  }\r\n\r\n  .pagebtncontainer {\r\n    &.user-is-tabbing {\r\n      :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n        @include box-shadow(none); // fix for Edge\r\n\r\n        &:before {\r\n          position: absolute;\r\n          content: \"\";\r\n          height: auto;\r\n          width: 16px;\r\n          top: 0;\r\n          bottom: 0;\r\n          left: 12px;\r\n          right: 0;\r\n          background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n          background-size: 6px 2px;\r\n          background-position: 0 2em;\r\n          border-radius: 0;\r\n          line-height: normal;\r\n        }\r\n\r\n        &.previousbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n\r\n        &.nextbtn:focus:before {\r\n          left: 0 !important;\r\n        }\r\n      }\r\n\r\n      [aria-current=\"page\"]:focus {\r\n        @include focus-style;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nnav .largescreen {\r\n  & .user-is-tabbing {\r\n    :focus:not(.-disabled):not([aria-current=\"page\"]) {\r\n      // to make focus indicator as wide as text \"previous\" and \"next\"\r\n      &.previousbtn:focus:before {\r\n        width: 56px !important;\r\n      }\r\n      &.nextbtn:focus:before {\r\n        width: 32px !important;\r\n      }\r\n    }\r\n  }\r\n  .paginationbtn {\r\n    &[aria-current=\"page\"] {\r\n      @include border-radius(50%);\r\n      @include box-shadow(0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n      background-color: $button-primary-background;\r\n      color: $button-primary-text;\r\n\r\n      &:hover {\r\n        @include box-shadow(0 4px 2px 0 rgba(87, 81, 149, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2));\r\n        background: mix(black, $button-primary-background, 10%);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n","import { h, Component, EventEmitter, Prop, Watch, Event, Element, Listen, State } from \"@stencil/core\";\r\nimport { debounce } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-pagination\",\r\n  styleUrl: \"wm-pagination.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Pagination {\r\n  @Element() el!: any;\r\n\r\n  @Prop() currentPage: number = 1;\r\n  @Prop() totalItems?: number = undefined;\r\n  @Prop() itemsPerPage?: number = undefined;\r\n  @Prop() value = 1;\r\n  @Prop() isLargeViewport: boolean = window.innerWidth > 600;\r\n  @State() isTabbing: boolean = false;\r\n  @State() srAnnouncement: string = \"\";\r\n\r\n  private totalPages: number = 0;\r\n\r\n  @Event() wmPaginationPageClicked!: EventEmitter<String>;\r\n  @Event() pageClicked!: EventEmitter<String>; // deprecated in favor of wmPaginationPageClicked\r\n  @Event() focusCurrentPage!: EventEmitter;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  maintainFocusOnNumberChange(el: \"previous\" | \"next\" | \"prev-arrow\" | \"next-arrow\" | \"page\") {\r\n    window.requestAnimationFrame(() => {\r\n      switch (el) {\r\n        case \"previous\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(`button#wm-1`).focus(); //Only shift focus from previous button to page 1 if page 1 is reached, which disables previous button. Otherwise, maintain focus on previous button.\r\n          break;\r\n        case \"next\":\r\n          this.currentPage === this.totalPages &&\r\n            this.el.shadowRoot.querySelector(`button#wm-${this.totalPages}`).focus(); //Only shift focus from next button if last page is reached, disabling next button. Otherwise, maintain focus on next button.\r\n          break;\r\n        case \"prev-arrow\":\r\n          this.currentPage === 1 && this.el.shadowRoot.querySelector(\"#next-arw\").focus(); //Only shift focus if page 1 is reached, disabling previous buttons. Otherwise, maintain focus on previous buttons.\r\n          break;\r\n        case \"next-arrow\":\r\n          this.currentPage === this.totalPages && this.el.shadowRoot.querySelector(\"#previous-arw\").focus(); //Only shift focus if last page is reached, disabling next buttons. Otherwise, maintain focus on next buttons.\r\n          break;\r\n        case \"page\":\r\n          this.el.shadowRoot.querySelector(`button#wm-${this.currentPage}`).focus();\r\n        default:\r\n          return;\r\n      }\r\n    });\r\n  }\r\n\r\n  debouncedResize = debounce(() => {\r\n    this.isLargeViewport = window.innerWidth > 600;\r\n  }, 250);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleResize() {\r\n    this.debouncedResize();\r\n  }\r\n\r\n  @Watch(\"totalItems\")\r\n  @Watch(\"itemsPerPage\")\r\n  calculateTotalPages() {\r\n    this.totalPages = Math.ceil(this.totalItems! / this.itemsPerPage!);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.totalItems || !this.itemsPerPage || !this.currentPage) {\r\n      throw new Error(\"Please check the required attributes\");\r\n    }\r\n\r\n    this.calculateTotalPages();\r\n\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the components's state\r\n      if (this.isLargeViewport) {\r\n        this.el.shadowRoot.getElementById(`wm-${this.currentPage}`).focus();\r\n      } else {\r\n        this.currentPage === 1\r\n          ? this.el.shadowRoot.getElementById(\"next-arw\").focus()\r\n          : this.el.shadowRoot.getElementById(\"wm-1-arw\").focus();\r\n      }\r\n    };\r\n  }\r\n\r\n  updatePageDisplayed(pageNum: any) {\r\n    this.value = pageNum;\r\n    this.wmPaginationPageClicked.emit();\r\n    this.pageClicked.emit(); // deprecated\r\n    this.srAnnouncement = `Current page, ${this.currentPage}. ${this.getCurrentPagesInView()}`;\r\n  }\r\n\r\n  displayShortPagination() {\r\n    let pages = [];\r\n    for (let i = 1; i <= this.totalPages; i++) {\r\n      pages.push(this.displayPageNumber(i));\r\n    }\r\n    return pages;\r\n  }\r\n\r\n  displayLongPagination() {\r\n    let view = [\r\n      this.displayPageNumber(1),\r\n      this.currentPage > 3 && this.displayEllipsis(),\r\n      ...this.getMiddlePageNums().map((page) => this.displayPageNumber(page)),\r\n      this.currentPage + 2 < this.totalPages && this.displayEllipsis(),\r\n      this.displayPageNumber(this.totalPages),\r\n    ];\r\n    return view;\r\n  }\r\n\r\n  displayPageNumber(pageNum: number) {\r\n    return (\r\n      <button\r\n        id={`wm-${pageNum}`}\r\n        class=\"paginationbtn\"\r\n        onClick={() => {\r\n          this.currentPage = pageNum;\r\n          this.updatePageDisplayed(pageNum);\r\n          this.maintainFocusOnNumberChange(\"page\");\r\n        }}\r\n        value={pageNum}\r\n        aria-label={this.currentPage !== pageNum ? `Go to page ${pageNum}` : \"\"}\r\n        aria-current={this.currentPage === pageNum ? \"page\" : undefined}\r\n      >\r\n        {pageNum}\r\n      </button>\r\n    );\r\n  }\r\n\r\n  displayEllipsis() {\r\n    return <span class=\"ellipsis\">...</span>;\r\n  }\r\n\r\n  getMiddlePageNums = () => {\r\n    let coreBtns;\r\n    // if pg is 1, 2 or 3\r\n    if (this.currentPage < 4) {\r\n      coreBtns = [2, 3, 4];\r\n    } else if (this.currentPage > this.totalPages - 3) {\r\n      coreBtns = [this.totalPages - 3, this.totalPages - 2, this.totalPages - 1];\r\n    } else {\r\n      coreBtns = [this.currentPage - 1, this.currentPage, this.currentPage + 1];\r\n    }\r\n    return coreBtns;\r\n  };\r\n\r\n  // displayPageView = () => {\r\n  //   // let end = this.itemsPerPage! * this.currentPage;\r\n  //   // const begin = end - this.itemsPerPage! + 1;\r\n  //   // if (end > this.totalItems!) {\r\n  //   //   end = this.totalItems!;\r\n  //   // }\r\n  //   return <div class=\"pageview\">{this.getCurrentView()}</div>;\r\n  // };\r\n\r\n  getCurrentPagesInView() {\r\n    let end = this.itemsPerPage! * this.currentPage;\r\n    const begin = end - this.itemsPerPage! + 1;\r\n    if (end > this.totalItems!) {\r\n      end = this.totalItems!;\r\n    }\r\n    return \"Viewing \" + (begin === end ? `${begin}` : `${begin}–${end} of ${this.totalItems}`);\r\n  }\r\n\r\n  renderLarge() {\r\n    return (\r\n      <div class=\"largescreen\">\r\n        <div class=\"pageview\">{this.getCurrentPagesInView()}</div>\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id=\"previous\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage - 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"previous\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Previous\r\n          </button>\r\n          {this.totalPages < 6 ? this.displayShortPagination() : this.displayLongPagination()}\r\n          <button\r\n            id=\"next\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.currentPage + 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n            aria-controls=\"status\"\r\n          >\r\n            Next\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderSmall() {\r\n    return (\r\n      <div class=\"smallscreen\">\r\n        <div class={`pagebtncontainer ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\r\n          <button\r\n            id={`wm-1-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = 1;\r\n              this.updatePageDisplayed(1);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            value={1}\r\n            aria-current={this.currentPage === 1 ? \"page\" : undefined}\r\n            aria-label={`Go to page 1`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === 1}\r\n          >\r\n            <svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6zM15.41 10.59L10.83 6l4.58-4.59L14 0 8 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id=\"previous-arw\"\r\n            class=\"paginationbtn previousbtn\"\r\n            onClick={() => {\r\n              this.currentPage -= 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"prev-arrow\");\r\n            }}\r\n            disabled={this.currentPage === 1}\r\n            aria-label=\"Go to previous page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M7.41 10.59L2.83 6l4.58-4.59L6 0 0 6l6 6z\" />\r\n            </svg>\r\n          </button>\r\n          Page {this.currentPage} of {this.totalPages}\r\n          <button\r\n            id=\"next-arw\"\r\n            class=\"paginationbtn nextbtn\"\r\n            onClick={() => {\r\n              this.currentPage += 1;\r\n              this.updatePageDisplayed(this.currentPage);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            disabled={this.currentPage === this.totalPages}\r\n            aria-label=\"Go to next page\"\r\n          >\r\n            <svg width=\"8\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n          <button\r\n            id={`wm-${this.totalPages}-arw`}\r\n            class=\"paginationbtn\"\r\n            onClick={() => {\r\n              this.currentPage = this.totalPages;\r\n              this.updatePageDisplayed(this.totalPages);\r\n              this.maintainFocusOnNumberChange(\"next-arrow\");\r\n            }}\r\n            value={this.totalPages}\r\n            aria-current={this.currentPage === this.totalPages ? \"page\" : undefined}\r\n            aria-label={`Go to last page, page ${this.totalPages}`}\r\n            aria-controls=\"status\"\r\n            disabled={this.currentPage === this.totalPages}\r\n          >\r\n            <svg width=\"17\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\">\r\n              <path d=\"M.59 10.59L5.17 6 .59 1.41 2 0l6 6-6 6zM9.59 10.59L14.17 6 9.59 1.41 11 0l6 6-6 6z\" />\r\n            </svg>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // do not render the component if there's only one page\r\n      this.totalItems! > this.itemsPerPage! && (\r\n        <nav aria-label={`Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.`}>\r\n          {/* both \"desktop\" and \"mobile\" versions are renderered. media queries hide the unnecessary stuff */}\r\n          {this.isLargeViewport ? this.renderLarge() : this.renderSmall()}\r\n          {/* The below is for screenreader purposes, ensuring it announces the new current page.*/}\r\n          <div id=\"status\" class=\"sr-only\" aria-live=\"polite\" aria-relevant=\"text\" aria-atomic=\"true\">\r\n            {this.srAnnouncement}\r\n          </div>\r\n        </nav>\r\n      )\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}