@watermarkinsights/ripple 3.25.0 → 3.25.1

package/dist/ripple/p-833c622f.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmTabItemCss","TabItem","exports","this","tabClicked","ev","preventDefault","_this","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","Object","defineProperty","class_1","prototype","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","parentTabList","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","concat","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","class_2","offsetWidth","Array","from","querySelectorAll","tabItems","filter","t","getLinkEl","tab","shadowRoot","querySelector","allPanels","document","tabIds","map","p","getPanel","panels","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","selectedTabItem","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","menuLayout","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","class_3","generateId","tabPanelLoaded"],"sources":["src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n  * {\n    box-sizing: border-box;\n  }\n  font-family: inherit;\n  display: inline-block;\n\n  .tab-item {\n    list-style-type: none;\n    height: 100%;\n    display: inline-block;\n\n    .tab {\n      @include border-radius(0);\n      color: $button-default-text;\n      text-decoration: none;\n      letter-spacing: 0.7px;\n      font-size: rem-calc(14);\n      font-weight: 500;\n      opacity: 1;\n      position: relative;\n      text-transform: uppercase;\n      display: inline-block;\n      height: calc(40 / 12 * 1em);\n      line-height: calc(40 / 12 * 1em);\n      padding-right: rem-calc(24);\n      padding-left: rem-calc(24);\n\n      &[aria-selected=\"true\"] {\n        font-weight: 700;\n        opacity: 1;\n        background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n        background-size: calc(100% - 50px) 3px;\n\n        &.dark {\n          color: $button-primary-text;\n        }\n      }\n\n      &,\n      &:hover,\n      &:active {\n        outline: none;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &.dark:not([aria-selected=\"true\"]) {\n        opacity: 0.8;\n        color: $button-primary-text;\n      }\n\n      &.user-is-tabbing:focus:not(:active) {\n        outline: none;\n        @include focus-style;\n        &.dark {\n          @include focus-on-dark;\n        }\n      }\n    }\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tab-item\",\n  styleUrl: \"wm-tab-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabItem {\n  @Element() el!: HTMLWmTabItemElement;\n\n  private get parentTabList(): HTMLWmTabListElement | null {\n    return this.el.parentElement as HTMLWmTabListElement;\n  }\n\n  /**\n   * Indicates whether the tab is currently active\n   */\n  @Prop() selected: boolean = false;\n\n  @Prop() show: boolean = true;\n\n  /**\n   * The id of the tab, linked to a tab panel.\n   */\n  @Prop() tabId: string = \"\";\n\n  /**\n   * Reference to focusable link element\n   */\n  linkEl?: HTMLAnchorElement;\n\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  @Event() keydownOnTabItem!: EventEmitter<{\n    tabItem: HTMLWmTabItemElement;\n    key: string;\n  }>;\n\n  @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\n\n  private tabClicked = (ev: MouseEvent) => {\n    ev.preventDefault();\n    this.wmTabSelected.emit({ tabId: this.tabId });\n    this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n  };\n\n  private tabPressed = (ev: KeyboardEvent) => {\n    const key = ev.key;\n\n    if (key === \"Enter\" || key === \" \") {\n      ev.preventDefault();\n      this.wmTabSelected.emit({ tabId: this.tabId });\n      this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n    } else if (key.includes(\"Arrow\")) {\n      ev.preventDefault();\n      this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\n    }\n  };\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\n  }\n\n  componentDidLoad() {\n    this.tabItemLoaded.emit();\n  }\n\n  render() {\n    let classes = this.show ? \"\" : \"hide \";\n    classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\n\n    let styles = {};\n    const padding = this.parentTabList && this.parentTabList.customPadding;\n    if (padding) {\n      const bkgSize = parseInt(padding, 10) * 2 || 0;\n      const units = padding.split(/([0-9]+)/).pop();\n      styles = {\n        \"padding-left\": this.parentTabList!.customPadding,\n        \"padding-right\": this.parentTabList!.customPadding,\n        \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\n      };\n    }\n\n    return (\n      <Host role=\"presentation\">\n        <li class=\"tab-item\" role=\"presentation\">\n          <a\n            class={`tab ${classes}`}\n            style={styles}\n            role=\"tab\"\n            ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\n            onClick={this.tabClicked}\n            id={`tab-link-${this.tabId}`}\n            onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\n            aria-selected={this.selected ? \"true\" : \"false\"}\n            tabindex={this.selected ? 0 : -1}\n          >\n            <slot></slot>\n          </a>\n        </li>\n      </Host>\n    );\n  }\n}\n",":host,\nwm-tab-list {\n  * {\n    box-sizing: border-box;\n  }\n\n  position: relative;\n  white-space: nowrap;\n  height: fit-content;\n  display: block;\n\n  .tabcontainer {\n    margin: 0;\n    margin-left: -24px;\n    width: 100%;\n    height: rem-calc(65);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: 0;\n\n    &.dark {\n      background: rgb(53, 59, 72);\n      margin: 0;\n    }\n  }\n\n  wm-select {\n    padding: rem-calc(6) 0;\n  }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n","wm-tab-panel {\n  visibility: inherit;\n\n  &.tab-hidden {\n    display: none;\n  }\n\n  &:active {\n    outline: none;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &.user-is-tabbing:focus {\n    outline: -webkit-focus-ring-color auto 5px;\n  }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"],"mappings":"gOAAA,IAAMA,EAAe,27D,ICORC,EAAOC,EAAA,yB,yNAkCVC,KAAAC,WAAa,SAACC,GACpBA,EAAGC,iBACHC,EAAKC,cAAcC,KAAK,CAAEC,MAAOH,EAAKG,QACtCH,EAAKI,YAAYF,KAAK,CAAEC,MAAOH,EAAKG,O,EAG9BP,KAAAS,WAAa,SAACP,GACpB,IAAMQ,EAAMR,EAAGQ,IAEf,GAAIA,IAAQ,SAAWA,IAAQ,IAAK,CAClCR,EAAGC,iBACHC,EAAKC,cAAcC,KAAK,CAAEC,MAAOH,EAAKG,QACtCH,EAAKI,YAAYF,KAAK,CAAEC,MAAOH,EAAKG,O,MAC/B,GAAIG,EAAIC,SAAS,SAAU,CAChCT,EAAGC,iBACHC,EAAKQ,iBAAiBN,KAAK,CAAEO,QAAST,EAAKU,GAAIJ,IAAKR,EAAGQ,K,iBAvC/B,M,UAEJ,K,WAKA,E,CAdxBK,OAAAC,eAAYC,EAAAC,UAAA,gBAAa,C,IAAzB,WACE,OAAOlB,KAAKc,GAAGK,a,uCAkDjBF,EAAAC,UAAAE,gBAAA,WACEpB,KAAKqB,QAAUrB,KAAKqB,OAAOC,UAAUC,IAAI,kB,EAI3CN,EAAAC,UAAAM,iBAAA,WACExB,KAAKqB,QAAUrB,KAAKqB,OAAOC,UAAUG,OAAO,kB,EAG9CR,EAAAC,UAAAQ,iBAAA,WACE1B,KAAK2B,cAAcrB,M,EAGrBW,EAAAC,UAAAU,OAAA,eAAAxB,EAAAJ,KACE,IAAI6B,EAAU7B,KAAK8B,KAAO,GAAK,QAC/BD,GAAW7B,KAAK+B,eAAiB/B,KAAK+B,cAAcC,kBAAoB,OAAS,OAAS,GAE1F,IAAIC,EAAS,GACb,IAAMC,EAAUlC,KAAK+B,eAAiB/B,KAAK+B,cAAcI,cACzD,GAAID,EAAS,CACX,IAAME,EAAUC,SAASH,EAAS,IAAM,GAAK,EAC7C,IAAMI,EAAQJ,EAAQK,MAAM,YAAYC,MACxCP,EAAS,CACP,eAAgBjC,KAAK+B,cAAeI,cACpC,gBAAiBnC,KAAK+B,cAAeI,cACrC,kBAAmB,eAAAM,OAAeL,GAAOK,OAAGH,EAAK,S,CAIrD,OACEI,EAACC,EAAI,CAACC,KAAK,gBACTF,EAAA,MAAIG,MAAM,WAAWD,KAAK,gBACxBF,EAAA,KACEG,MAAO,OAAAJ,OAAOZ,GACdiB,MAAOb,EACPW,KAAK,MACLG,IAAK,SAACjC,GAAE,OAAMV,EAAKiB,OAASP,CAApB,EACRkC,QAAShD,KAAKC,WACdgD,GAAI,YAAAR,OAAYzC,KAAKO,OACrB2C,UAAW,SAAChD,GAAsB,OAAAE,EAAKK,WAAWP,EAAhB,EAAmB,gBACtCF,KAAKmD,SAAW,OAAS,QACxCC,SAAUpD,KAAKmD,SAAW,GAAK,GAE/BT,EAAA,e,kOAjGQ,I,UCPpB,IAAMW,EAAe,wkB,ICQRC,EAAOvD,EAAA,yB,yHAqLlBC,KAAAuD,mBAAqBC,GAAS,WAC5B,IAAKpD,EAAKqD,UAAW,CACnBrD,EAAKsD,c,CAEPC,EAAYvD,EAAKU,G,GAChB,K,+GAhLkC,K,CAKrCC,OAAAC,eAAY4C,EAAA1C,UAAA,aAAU,C,IAAtB,WACE,GAAIlB,KAAKyD,UAAW,CAClB,OAAOzD,KAAKc,GAAG+C,YAAc7D,KAAKyD,UAAY,E,KACzC,CACL,OAAO,K,wCAUX1C,OAAAC,eAAY4C,EAAA1C,UAAA,WAAQ,C,IAApB,WACE,OAAO4C,MAAMC,KAAK/D,KAAKc,GAAGkD,iBAAiB,e,uCAG7CjD,OAAAC,eAAI4C,EAAA1C,UAAA,kBAAe,C,IAAnB,WACE,OAAOlB,KAAKiE,SAASC,QAAO,SAACC,GAAM,OAAAA,EAAEhB,QAAF,IAAY,E,uCAGzCS,EAAA1C,UAAAkD,UAAA,SAAUC,GAChB,OAAOA,EAAIC,WAAYC,cAAc,I,EAGvCxD,OAAAC,eAAY4C,EAAA1C,UAAA,SAAM,C,IAAlB,WACE,IAAMsD,EAAYV,MAAMC,KAAKU,SAAST,iBAAiB,iBACvD,IAAMU,EAAS1E,KAAKiE,SAASU,KAAI,SAACR,GAAM,OAAAA,EAAE5D,KAAF,IACxC,OAAOiE,EAAUN,QAAO,SAACU,GAAM,OAAAF,EAAO/D,SAASiE,EAAErE,MAAlB,G,uCAGzBqD,EAAA1C,UAAA2D,SAAA,SAAStE,GACf,OAAOP,KAAK8E,OAAOC,MAAK,SAACH,GAAM,OAAAA,EAAErE,QAAUA,CAAZ,G,EAKzBqD,EAAA1C,UAAAwC,aAAA,WACN,IAAIsB,EAAUhF,KAAKiE,SAASgB,QAAO,SAACC,EAAKb,GAAQ,OAAAa,EAAMb,EAAIR,WAAV,GAAuB,GACxE7D,KAAKyD,UAAYuB,GAAWA,EAAU,EAAIA,EAAUhF,KAAKyD,S,EAI3DG,EAAA1C,UAAAiE,YAAA,SAAYlC,GACVjD,KAAKiE,SAASU,KAAI,SAACN,GAAyB,OAAMA,EAAIlB,SAAWkB,EAAI9D,QAAU0C,CAAnC,IAC5C,IAAMmC,EAAcpF,KAAK8E,OAAOO,SAAW,GAAKrF,KAAKiE,SAASoB,OAAS,EACvE,GAAID,EAAa,CAIfpF,KAAKsF,qBAAqBtF,KAAK8E,OAAO,GAAI9E,KAAKuF,iBAC/CvF,KAAK8E,OAAO,GAAGU,OAAS,I,KACnB,CACLxF,KAAK8E,OAAOH,KAAI,SAACc,GAA4B,OAAMA,EAAMD,OAASC,EAAMlF,QAAU0C,CAArC,G,GAIjDW,EAAA1C,UAAAwE,UAAA,WACE1F,KAAKiE,SAASU,KAAI,SAACR,GAAC,OAAMA,EAAErC,KAAO,IAAf,G,EAGtB8B,EAAA1C,UAAAyE,UAAA,WACE3F,KAAKiE,SAASU,KAAI,SAACR,GAAC,OAAMA,EAAErC,KAAO,KAAf,G,EAGtB8B,EAAA1C,UAAA0E,kBAAA,eAAAxF,EAAAJ,KACEA,KAAKc,GAAG+E,MAAQ,WAEdzF,EAAKmF,iBAAmBnF,EAAKmF,gBAAgBM,O,GAIjDjC,EAAA1C,UAAAQ,iBAAA,WACE1B,KAAK8F,YACL,IAAMC,EAAc/F,KAAK+F,aAAe/F,KAAKiE,SAAS,GAAG1D,MACzDP,KAAKmF,YAAYY,E,EAInBnC,EAAA1C,UAAAS,cAAA,SAAczB,GACZF,KAAKgG,qBAAqB9F,EAAG+F,O,EAG/BrC,EAAA1C,UAAA8E,qBAAA,SAAqB3B,GACnB,IAAMoB,EAAQzF,KAAK6E,SAASR,EAAI9D,OAGhC,IAAKkF,EAAO,CACV,GAAIzF,KAAK8E,OAAOO,SAAW,EAAG,CAC5BrF,KAAKkG,mBAAmB7B,EAAKrE,KAAK8E,OAAO,G,MAEtC,CAEL9E,KAAKsF,qBAAqBG,EAAOpB,GACjCrE,KAAKkG,mBAAmB7B,EAAKoB,E,GAIjC7B,EAAA1C,UAAAgF,mBAAA,SAAmB7B,EAA2BoB,GAC5C,IAAMU,EAAOnG,KAAKoE,UAAUC,GAE5B,GAAI8B,EAAM,CACRA,EAAKC,aAAa,gBAAiBX,EAAMxC,IACzCkD,EAAKC,aAAa,OAAQ,IAAA3D,OAAIgD,EAAMxC,I,GAIxCW,EAAA1C,UAAAmF,sBAAA,SAAsBhC,GACpB,IAAM8B,EAAOnG,KAAKoE,UAAUC,GAE5B,GAAI8B,EAAM,CACRA,EAAKG,gBAAgB,iBACrBH,EAAKG,gBAAgB,O,GAIzB1C,EAAA1C,UAAAoE,qBAAA,SAAqBG,EAA8BpB,GACjD,IAAM8B,EAAOnG,KAAKoE,UAAUC,GAE5B,GAAI8B,EAAM,CACRV,EAAMW,aAAa,kBAAmBD,EAAKlD,IAC3CwC,EAAMW,aAAa,SAAU/B,EAAI9D,M,GAKrCqD,EAAA1C,UAAAqF,kBAAA,SAAkBrG,GAChB,GAAIF,KAAKwG,kBAAmB,CAC1BxG,KAAKmF,YAAYjF,EAAGuG,OAAOlG,M,GAK/BqD,EAAA1C,UAAAwF,cAAA,SAAcxG,GACZ,IAAMQ,EAAMR,EAAGuG,OAAO/F,IACtB,IAAMiG,EAAQ3G,KAAKiE,SAAS2C,QAAQ1G,EAAGuG,OAAO5F,SAE9C,GAAIH,IAAQ,aAAeA,IAAQ,aAAc,CAC/CV,KAAK6G,qBAAqBF,EAAOjG,E,GAIrCkD,EAAA1C,UAAA2F,qBAAA,SAAqBF,EAAejG,GAClC,GAAIA,EAAK,CACPiG,EAAQjG,IAAQ,YAAciG,EAAQ,EAAIA,EAAQ,C,CAGpD,GAAIA,EAAQ,EAAG,CACbA,EAAQ3G,KAAKiE,SAASoB,OAAS,C,MAC1B,GAAIsB,IAAU3G,KAAKiE,SAASoB,OAAQ,CACzCsB,EAAQ,C,CAGV,IAAMG,EAAa9G,KAAKiE,SAAS0C,GACjC3G,KAAKoE,UAAU0C,GAAYjB,O,EAO7BjC,EAAA1C,UAAA4E,UAAA,WACE9F,KAAKuD,oB,EAUPK,EAAA1C,UAAA6F,iBAAA,WACE,GAAI/G,KAAKgH,WAAY,CACnBhH,KAAK2F,YACL,OACEjD,EAAA,aAAWuE,MAAM,gBAAe,iBAAgB,QAC7CjH,KAAKkH,gB,KAGL,CACLlH,KAAK0F,YACL,IAAIyB,EAAU,GACd,GAAInH,KAAKmC,cAAe,CACtBgF,EAAU,CACR,cAAe,IAAMnH,KAAKmC,c,CAG9B,OACEO,EAAA,MAAIG,MAAO,gBAAAJ,OAAgBzC,KAAKgC,kBAAoB,IAAMc,MAAOqE,EAASvE,KAAK,WAC7EF,EAAA,a,GAMRkB,EAAA1C,UAAAgG,cAAA,eAAA9G,EAAAJ,KACE,OAAOA,KAAKiE,SAASU,KAAI,SAACR,GAAC,OACzBzB,EAAA,aACEO,GAAI,YAAAR,OAAY0B,EAAE5D,OAClB4C,SAAUgB,EAAE5D,QAAUH,EAAK2F,YAC3B/C,QAAS,SAAC9C,GACRA,EAAGC,iBACHC,EAAKC,cAAcC,KAAK,CAAEC,MAAO4D,EAAE5D,QACnCH,EAAKI,YAAYF,KAAK,CAAEC,MAAO4D,EAAE5D,O,GAGlC4D,EAAEiD,YAVoB,G,EAe7BxD,EAAA1C,UAAAU,OAAA,WACE,OAAOc,EAACC,EAAI,CAACE,MAAO7C,KAAKgH,WAAa,OAAS,IAAKhH,KAAK+G,mB,+VArOzC,I,UCRpB,IAAMM,EAAgB,sN,ICOTC,EAAQvH,EAAA,0B,mFAMwB,M,WAKF,E,CAIzCwH,EAAArG,UAAA0E,kBAAA,YACG5F,KAAKc,GAAGmC,IAAMjD,KAAKc,GAAGsF,aAAa,KAAMoB,I,EAG5CD,EAAArG,UAAAQ,iBAAA,WACE1B,KAAKyH,eAAenH,KAAK,CAAEC,MAAOP,KAAKO,O,EAIzCgH,EAAArG,UAAAE,gBAAA,WACEpB,KAAKc,GAAGQ,UAAUC,IAAI,kB,EAIxBgG,EAAArG,UAAAM,iBAAA,WACExB,KAAKc,GAAGQ,UAAUG,OAAO,kB,EAG3B8F,EAAArG,UAAAU,OAAA,WACE,OAAOc,EAACC,EAAI,CAACC,KAAK,WAAWC,MAAO,CAAE,cAAe7C,KAAKwF,S,uHAlCzC,I"}

package/dist/ripple/p-8613600d.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmButtonCss","Button","exports","this","btnPos","old","new","id","generateId","ariaPopup","Object","defineProperty","class_1","prototype","toBool","disabled","buttonType","buttonStyle","buttonEl","tempButtonType","offsetWidth","scrollWidth","isTruncated","document","getElementById","classes","permanentlyDelete","textWrap","isTabbing","customBackground","transformStyle","iconRotate","concat","iconFlip","assign","iconSize","fontSize","transform","toggleTabbingOn","toggleTabbingOff","handleScroll","tooltipVisible","hideTooltip","validateType","newValue","valid","includes","validateIcon","validateDeprecatedType","updateIcon","icon","getIconCodeFromName","console","error","tooltip","handleKeydown","ev","key","preventDefault","isDisabled","el","click","componentWillLoad","warn","componentDidLoad","body","classList","contains","getAttribute","getBoundingClientRect","showTooltip","_this","hasTooltip","tooltipText","textContent","tooltipEl","hasNoWhitespace","match","add","style","setProperty","remove","removeProperty","adjustedTooltipPlacement_1","adjustTooltipPlacement","tooltipPosition","tooltipRect_1","transitionDelay","opacity","setTimeout","positionTooltip","tPos","tooltipRect","window","requestAnimationFrame","top","left","vDiff","height","hDiff","width","vPos","hPos","bottom","right","Math","max","showTooltipForKeyboardUsers","getAriaLabel","labelForIdenticalButtons","render","h","Host","class","buttonClasses","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","onClick","iconStyles","String","fromCodePoint","parseInt"],"sources":["src/components/wm-button/wm-button.scss?tag=wm-button&encapsulation=shadow","src/components/wm-button/wm-button.tsx"],"sourcesContent":[":host([disabled]),\n:host(.button-disabled) {\n  pointer-events: none;\n}\n\n:host([disabled=\"false\"]) {\n  // override disabled behavior from occuring when the string is \"false\", which would evaluate as truthy\n  pointer-events: initial;\n}\n\n:host,\nwm-button {\n  display: inline-block;\n  width: fit-content;\n  position: relative; // for tooltip\n  @include box-shadow(none);\n\n  .sr-only {\n    @include srOnly;\n  }\n\n  @extend %wm-button;\n}\n","import { h, Component, Prop, Element, Listen, Watch, Host, State } from \"@stencil/core\";\nimport { getIconCodeFromName, TooltipPlacement, validButtonTypes } from \"../../global/interfaces\";\nimport { generateId, adjustTooltipPlacement, toBool } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-button\",\n  styleUrl: \"wm-button.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Button {\n  @Element() el!: HTMLWmButtonElement;\n  private buttonEl!: HTMLButtonElement;\n\n  // icon and tooltip have reflect set to true. Without reflect, the react wrappers don't expose the attribute\n  // and the component throws errors when they are required (when buttonType is icononly or navigational)\n  @Prop({ reflect: true }) disabled: boolean = false;\n  get isDisabled(): boolean {\n    // string \"false\" needs to be treated as bool False because react wrappers convert bool to string.\n    return toBool(this.disabled);\n  }\n  @Prop({ mutable: true }) buttonType: validButtonTypes | null = null;\n  @Prop({ mutable: true }) buttonStyle: validButtonTypes | null = null; // DEPRECATED in favor of button-type\n  get tempButtonType(): validButtonTypes {\n    // uses of this getter should be replaced with this.buttonType when buttonStyle is fully phased out\n    // don't forget to reset this.buttonType's default value to secondary\n    return this.buttonType || this.buttonStyle || \"secondary\";\n  }\n  @Prop({ reflect: true, mutable: true }) icon?: string;\n  @Prop() iconSize?: string;\n  @Prop() iconRotate?: number;\n  @Prop() iconFlip?: \"horizontal\" | \"vertical\";\n  @Prop({ reflect: true, mutable: true }) tooltip?: string;\n  @Prop() labelForIdenticalButtons?: string;\n  @Prop() tooltipPosition: TooltipPlacement = \"bottom-right\";\n  @Prop() permanentlyDelete?: boolean = false;\n  @Prop() textWrap: boolean = true;\n  @Prop() customBackground?: string;\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\n\n  @State() isTabbing: boolean = false;\n\n  private btnPos: any = { old: {}, new: {} }; // for tooltip position. old and new are DOMRect\n  private id = generateId();\n  private ariaPopup: boolean = false;\n\n  get isTruncated(): boolean {\n    return (\n      !!this.buttonEl && this.tempButtonType === \"textonly\" && this.buttonEl.offsetWidth < this.buttonEl.scrollWidth\n    );\n  }\n\n  get hasTooltip(): boolean {\n    // tooltip is only rendered for icononly and navigational types, or if the button text is truncated\n    return this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\" || this.isTruncated;\n  }\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\n  }\n\n  get buttonClasses() {\n    let classes = \"wm-button\";\n    classes += this.permanentlyDelete ? \" -permanentlydelete\" : \"\";\n    classes += this.tempButtonType ? \" -\" + this.tempButtonType : \" -secondary\";\n    classes += this.textWrap ? \"\" : \" nowrap\";\n    classes += this.isTabbing ? \" user-is-tabbing\" : \"\";\n    classes += this.isTruncated ? \" -truncated\" : \"\";\n    classes += this.customBackground === \"dark\" ? \" dark\" : \"\";\n    return classes;\n  }\n\n  get iconStyles() {\n    let transformStyle = \"\";\n    transformStyle += this.iconRotate ? `rotate(${this.iconRotate}deg)` : \"\";\n    transformStyle += this.iconFlip === \"horizontal\" ? `scaleX(-1)` : \"\";\n    transformStyle += this.iconFlip === \"vertical\" ? `scaleY(-1)` : \"\";\n\n    return {\n      ...(this.iconSize && { fontSize: this.iconSize }),\n      ...((this.iconRotate || this.iconFlip) && { transform: transformStyle }),\n    };\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  // we need to listen for scroll events during the capture phase because they do not bubble up\n  // there can be layouts where the main content has 100vh and overflows\n  // in these cases window will register no scroll events unless we catch on they way down\n  @Listen(\"scroll\", { target: \"window\", capture: true })\n  handleScroll() {\n    if (this.tooltipVisible) {\n      this.hideTooltip();\n    }\n  }\n\n  @Watch(\"buttonType\")\n  validateType(newValue: string) {\n    const valid = [\n      \"primary\",\n      \"secondary\",\n      \"textonly\",\n      \"icononly\",\n      \"navigational\",\n      \"selector\",\n      \"selector-primary\",\n      \"pairpositive\",\n      \"pairnegative\",\n    ].includes(newValue);\n\n    if (!valid) {\n      this.buttonType = \"secondary\";\n    }\n\n    this.validateIcon();\n  }\n\n  // remove entire watcher after buttonStyle has been fully removed\n  @Watch(\"buttonStyle\")\n  validateDeprecatedType(newValue: string) {\n    const valid = [\"primary\", \"secondary\", \"textonly\", \"icononly\", \"navigational\", \"selector\"].includes(newValue);\n\n    if (!valid) {\n      this.buttonStyle = \"secondary\";\n    }\n\n    this.validateIcon();\n  }\n\n  @Watch(\"icon\")\n  updateIcon() {\n    this.icon = getIconCodeFromName(this.icon!);\n  }\n\n  validateIcon() {\n    switch (this.tempButtonType) {\n      case \"icononly\":\n      case \"navigational\":\n        // if the style is icononly or navigational...\n        // - an icon must be provided\n        if (!this.icon) {\n          console.error(\n            \"wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.\"\n          );\n        }\n        // - if no tooltip text was passed and we couldn't generate one, throw an error\n        if (!this.tooltip) {\n          console.error(\n            \"wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.\"\n          );\n        }\n        break;\n      case \"pairpositive\":\n        this.icon = \"f12c\";\n        break;\n      case \"pairnegative\":\n        this.icon = \"f739\";\n        break;\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"Enter\":\n        ev.preventDefault();\n        if (!this.isDisabled) {\n          this.el.click();\n        }\n        break;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.buttonStyle) {\n      console.warn(\"wm-button: button-style has been deprecated as of v3.1.0. Please use button-type instead.\");\n    }\n\n    this.validateType(this.tempButtonType);\n\n    if (this.icon) {\n      this.icon = this.icon = getIconCodeFromName(this.icon);\n    }\n  }\n\n  componentDidLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.ariaPopup = !!this.el.getAttribute(\"aria-haspopup\");\n\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\n  }\n\n  showTooltip() {\n    if (this.hasTooltip) {\n      // set tooltip text\n      let tooltipText = \"\";\n      if (this.isTruncated && this.el.textContent) {\n        // when truncated, tooltip text is the button's content\n        tooltipText = this.el.textContent;\n      } else if (this.tooltip) {\n        // otherwise it is the tooltip property if present\n        tooltipText = this.tooltip;\n      }\n      this.tooltipEl.textContent = tooltipText;\n\n      // tooltip only has a maxWidth if it contains whitespace and can break\n      const hasNoWhitespace = tooltipText.match(/^[^\\s]+$/);\n      if (hasNoWhitespace) {\n        this.tooltipEl.classList.add(\"single-word\");\n        this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n      } else {\n        this.tooltipEl.classList.remove(\"single-word\");\n        this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n      }\n\n      // adjust placement in case there is no space to place the tooltip where specified via prop\n      // calculation outside of the function to keep it pure\n      const adjustedTooltipPlacement = adjustTooltipPlacement(this.tooltipPosition, this.buttonEl, this.tooltipEl);\n\n      this.btnPos.old = {};\n      const tooltipRect = this.tooltipEl.getBoundingClientRect();\n      this.tooltipEl.style.transitionDelay = \"500ms\";\n      this.tooltipEl.style.opacity = \"1\";\n      // This slight delay fixes an issue for keyboard users:\n      // if they tab to a button out of screen bounds, the page scrolls\n      // and hideTooltip() would be triggered before the tooltip would show\n      setTimeout(() => {\n        this.tooltipVisible = true;\n        this.positionTooltip(adjustedTooltipPlacement, tooltipRect);\n      }, 50);\n    }\n  }\n\n  positionTooltip(tPos: string, tooltipRect: DOMRect) {\n    if (this.tooltipVisible) {\n      window.requestAnimationFrame(() => this.positionTooltip(tPos, tooltipRect));\n    }\n    this.btnPos.new = this.buttonEl.getBoundingClientRect();\n    if (this.btnPos.new.top != this.btnPos.old.top || this.btnPos.new.left != this.btnPos.old.left) {\n      // this is to figure out how to offset, given the size of the button and of the tooltip\n      // to get the center positions, calculate the difference between the button width and the tooltip width\n      const vDiff = (this.btnPos.new.height - tooltipRect.height) / 2;\n      const hDiff = (this.btnPos.new.width - tooltipRect.width) / 2;\n      // the naming convention defaults to center in the absence of a value\n      // Values \"top\" and \"bottom\" imply horizontal centering; Values \"right\" and \"left\" imply vertical centering\n      // therefore we first set to center first, then adjust accordingly\n      let vPos = this.btnPos.new.top + vDiff;\n      let hPos = this.btnPos.new.left + hDiff;\n\n      if (tPos.includes(\"top\")) {\n        vPos = this.btnPos.new.top - tooltipRect.height - 8;\n      }\n      if (tPos.includes(\"bottom\")) {\n        vPos = this.btnPos.new.bottom + 8;\n      }\n      if (tPos.includes(\"left\")) {\n        hPos = this.btnPos.new.left - tooltipRect.width - 8;\n      }\n      if (tPos.includes(\"right\")) {\n        hPos = this.btnPos.new.right + 8;\n      }\n\n      // after all positioning has been calculated, if tooltip is off-screen or closer than 24px it is readjusted\n      // this only occurs when the tooltip is overflowing to the left and is positioned top or bottom\n      // (button placed too far left, or screen size under 268px)\n      hPos = Math.max(hPos, 24);\n      this.tooltipEl.style.setProperty(\"--wmTooltipTop\", vPos + \"px\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", hPos + \"px\");\n      // this.tooltipEl.style.top = vPos + \"px\";\n      // this.tooltipEl.style.left = hPos + \"px\";\n      // this.tooltipEl.style.top = (vPos / 16).toString() + \"rem\";\n      // this.tooltipEl.style.left = (hPos / 16).toString() + \"rem\";\n\n      this.btnPos.old = this.btnPos.new;\n    }\n  }\n\n  hideTooltip() {\n    if (this.hasTooltip) {\n      this.tooltipEl.style.transitionDelay = \"0s\";\n      this.tooltipEl.style.opacity = \"0\";\n      this.tooltipVisible = false;\n    }\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  getAriaLabel() {\n    if (this.tempButtonType === \"icononly\" || this.tempButtonType === \"navigational\") {\n      return this.labelForIdenticalButtons || this.tooltip;\n    }\n\n    if (this.labelForIdenticalButtons) {\n      return this.labelForIdenticalButtons;\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.isDisabled ? \"button-disabled\" : \"\"}>\n        <button\n          id={this.id}\n          class={`${this.buttonClasses}`}\n          disabled={this.isDisabled}\n          ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n          aria-label={this.getAriaLabel()}\n          aria-hasPopup={this.ariaPopup ? \"menu\" : null}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.hideTooltip()}\n        >\n          {this.icon && (\n            <span class=\"mdi\" style={this.iconStyles}>\n              {String.fromCodePoint(parseInt(`0x${this.icon}`))}\n            </span>\n          )}\n          <span class=\"button-text\">\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-888bec42.js.map

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

package/dist/ripple/p-889579fc.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as s,g as o,f as r}from"./p-1c23de4a.js";import{i as n,d as a,g as l,m as h,w as p}from"./p-c6a0f7e5.js";import{g as d}from"./p-9b2dfb54.js";const c=':host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}:host .sr-only,wm-option .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}.checkbox: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:"\\f131";display:inline;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:"\\f132"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hidden),wm-option.hidden,:host(.filtered-out),wm-option.filtered-out{display:none}:host(.duplicate.last),wm-option.duplicate.last{border-bottom:12px solid rgba(46, 27, 70, 0.05)}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):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;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}';const f=class{constructor(i){t(this,i);this.wmOptionSelected=e(this,"wmOptionSelected",7);this.wmKeyUpPressed=e(this,"wmKeyUpPressed",7);this.wmKeyDownPressed=e(this,"wmKeyDownPressed",7);this.wmEscKeyPressed=e(this,"wmEscKeyPressed",7);this.wmHomeKeyPressed=e(this,"wmHomeKeyPressed",7);this.wmEndKeyPressed=e(this,"wmEndKeyPressed",7);this.wmEnterKeyPressed=e(this,"wmEnterKeyPressed",7);this.wmLetterPressed=e(this,"wmLetterPressed",7);this.wmOptionBlurred=e(this,"wmOptionBlurred",7);this.value=undefined;this.subinfo=undefined;this.disabled=false;this.selected=false;this.focused=false;this.searchTerm=""}get hostClasses(){let t=[];if(this.subinfo){t.push("hassubinfo")}if(this.parentSelectEl.multiple){t.push("multi-option")}if(!this.el.textContent.toLowerCase().includes(this.searchTerm)){t.push("filtered-out")}return t.join(" ")}get parentSelectEl(){var t;return((t=this.el.parentElement)===null||t===void 0?void 0:t.nodeName)!=="WM-SELECT"?this.el.getRootNode().host:this.el.parentElement}handleKeydown(t){switch(t.key){case"ArrowUp":t.preventDefault();this.wmKeyUpPressed.emit(this.el);break;case"ArrowDown":t.preventDefault();this.wmKeyDownPressed.emit(this.el);break;case"Enter":t.preventDefault();if(!this.disabled){this.el.click();this.wmEnterKeyPressed.emit(this.el)}break;case" ":t.preventDefault();this.el.click();break;case"Escape":t.preventDefault();t.stopPropagation();this.wmEscKeyPressed.emit();break;case"Home":t.preventDefault();this.wmHomeKeyPressed.emit();break;case"End":t.preventDefault();this.wmEndKeyPressed.emit();break;default:if(t.key.length===1){this.wmLetterPressed.emit(t.key)}}}handleSelection(){if(!this.disabled){this.wmOptionSelected.emit(this.el)}}handleBlur(t){this.wmOptionBlurred.emit({relatedTarget:t.relatedTarget})}syncAriaSelected(){this.selected?this.el.setAttribute("aria-selected","true"):this.el.removeAttribute("aria-selected")}syncAriaDisabled(){this.disabled?this.el.setAttribute("aria-disabled","true"):this.el.removeAttribute("aria-disabled")}updateDisabledOnClick(){if(this.disabled&&this.el.onclick){this.onClickFunc=this.el.onclick;this.el.onclick=null}else if(!this.disabled&&this.onClickFunc){this.el.onclick=this.onClickFunc}}handleSearch(t){this.searchTerm=t.detail.searchTerm.toLowerCase();if(this.searchTerm){const t=new RegExp(`${this.searchTerm}`,"gi");const e=this.el.textContent.replace(t,(t=>`<strong>${t}</strong>`));this.textEl.innerHTML=e}else{this.textEl.innerHTML=this.el.textContent}}componentWillLoad(){this.syncAriaSelected();this.syncAriaDisabled();this.updateDisabledOnClick();this.parentSelectEl.addEventListener("wmSelectSearchChanged",(t=>this.handleSearch(t)))}render(){return i(s,{role:"option",tabindex:this.focused?0:-1,class:this.hostClasses},i("div",{class:`option-wrapper ${this.parentSelectEl.multiple?"checkbox":""}`},i("span",{"aria-hidden":"true",ref:t=>this.textEl=t},this.el.textContent),i("span",{class:"sr-only"},this.el.textContent)),i("div",{class:"subinfo"},this.subinfo))}get el(){return o(this)}static get watchers(){return{selected:["syncAriaSelected"],disabled:["syncAriaDisabled","updateDisabledOnClick"]}}};f.style=c;const b=':host{position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}:host .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}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{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}.wrapper.invalid .label{color:#c0392b}.wrapper.invalid .label:after{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:"\\f026";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .button-wrapper .displayedoption: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;pointer-events:none}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus{-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}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:0;right:0;background:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;top:100%;left:0}.options-wrapper{max-height:12.5rem;overflow:auto}.select-all{width:100%;cursor:pointer;padding:1.25rem;border:none;margin:0;border-bottom:2px solid rgba(46, 27, 70, 0.05);background:#fff;font-family:inherit;font-size:inherit;text-align:left;text-align:start;font-weight:500;color:#575195;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.select-all:hover,.select-all:focus{outline:none;background:#f4f4f4}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid rgba(46, 27, 70, 0.05);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #4a4a4a}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-webkit-box-shadow:0 0 0 1px #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .icon: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:"\\f349";color:#6b6b6b;font-size:0.875rem}.search-results-message{padding:1.25rem;color:#4a4a4a;font-size:0.875rem;font-style:italic}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}';const m=class{constructor(i){t(this,i);this.wmSelectDidLoad=e(this,"wmSelectDidLoad",7);this.wmSelectBlurred=e(this,"wmSelectBlurred",7);this.wmSelectChanged=e(this,"wmSelectChanged",7);this.wmComponentBlurred=e(this,"wmComponentBlurred",7);this.wmSelectSearchChanged=e(this,"wmSelectSearchChanged",7);this.selectAllMessage=n.formatMessage({id:"select.selectAll",defaultMessage:"Select All"});this.deselectAllMessage=n.formatMessage({id:"select.deselectAll",defaultMessage:"Deselect All"});this.allOptionsSelectedMessage=n.formatMessage({id:"select.allOptionsSelected",defaultMessage:"All options selected"});this.allOptionsDeselectedMessage=n.formatMessage({id:"select.allOptionsDeselected",defaultMessage:"All options deselected"});this.keysSoFar="";this.searchIndex=0;this.openUp=false;this.overflowCount=0;this.displayedOptions=[];this.debouncedClearKeysSoFar=a((()=>{this.keysSoFar=""}),500);this.debouncedSearch=a((()=>{this.wmSelectSearchChanged.emit({searchTerm:this.searchTerm});if(this.filteredOptions.length){this.announce(this.resultsFoundMessage)}else{this.announce(this.noResultsFoundMessage)}}),150);this.disabled=false;this.invalid=false;this.maxHeight=undefined;this.label=undefined;this.labelPosition="top";this.requiredField=false;this.errorMessage="";this.multiple=false;this.search=false;this.selectAll=false;this.placeholder=n.formatMessage({id:"select.multiPlaceholder",defaultMessage:"Make a selection",description:"Placeholder text. Use imperative"});this.searchPlaceholder=n.formatMessage({id:"select.searchPlaceholder",defaultMessage:"Search",description:"Placeholder text. Use imperative"});this.allSelectedMessage=n.formatMessage({id:"select.allSelected",defaultMessage:"All selected",description:"Text displayed when all options are selected"});this.isTabbing=false;this.isExpanded=false;this.announcement=""}get childOptions(){return Array.from(this.el.querySelectorAll("wm-option"))}get duplicateOptions(){return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"))}get allOptionEls(){return this.duplicateOptions.concat(this.childOptions)}get visibleOptionEls(){return this.allOptionEls.filter((t=>!t.classList.contains("hidden")&&!t.classList.contains("filtered-out")))}get searchTerm(){return this.searchFieldEl?this.searchFieldEl.value:""}get filteredOptions(){return this.childOptions.filter((t=>{var e;return(e=t.textContent)===null||e===void 0?void 0:e.toLowerCase().includes(this.searchTerm.toLowerCase())}))}get selectedOptions(){return Array.from(this.el.querySelectorAll("wm-option")).filter((t=>t.selected))}get allSelected(){return this.childOptions.every((t=>t.selected))}get resultsFoundMessage(){return n.formatMessage({id:"select.searchResultsFound",defaultMessage:"{numResults, plural, one {1 option found} other {# options found}}",description:"The message read by the screen reader, indicating how many results a search returned"},{numResults:this.filteredOptions.length})}get noResultsFoundMessage(){return n.formatMessage({id:"select.noSearchResults",defaultMessage:"No results found. Please try your search again.",description:"The message displayed when no options pass the search filter"})}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleOptionSelection(t){const e=t.detail;this.focusOption(e);if(!this.multiple){if(!e.selected){this.selectOption(e);const t={changedOption:e,selectedOptions:[e]};this.wmSelectChanged.emit(t);const i=new CustomEvent("change",{detail:t});this.el.dispatchEvent(i)}this.close()}else{this.selectOption(e);const t=e.classList.contains("duplicate");const i=t?this.findCorrespondingOption(e):e;const s=this.childOptions.filter((t=>t.selected));const o={changedOption:i,selectedOptions:s};this.wmSelectChanged.emit(o);const r=new CustomEvent("change",{detail:o});this.el.dispatchEvent(r)}}handleChildEnter(){this.close()}handleChildUp(t){this.moveUp(t.detail)}handleChildDown(t){this.moveDown(t.detail)}moveToFirstOption(){this.focusOption(this.visibleOptionEls[0])}moveToLastOption(){this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length-1])}closePopupOnEscape(){this.close()}handleOptionBlur(t){if(!this.isElOrChild(t.detail.relatedTarget)){const e=new CustomEvent("blur");e.relatedTarget=t.detail.relatedTarget;this.el.dispatchEvent(e)}}handleClick(t){if(!this.isElOrChild(t.target)){this.close()}}handleSelectAllClick(){this.allSelected?this.deselectAllOptions():this.selectAllOptions()}selectAllOptions(){this.allOptionEls.forEach((t=>t.selected=true));this.setSelectAllButton();this.setButtonText();const t={changedOption:null,selectedOptions:this.childOptions};this.wmSelectChanged.emit(t)}deselectAllOptions(){this.allOptionEls.forEach((t=>t.selected=false));this.setSelectAllButton();this.setButtonText();const t={changedOption:null,selectedOptions:[]};this.wmSelectChanged.emit(t)}handleButtonBlur(t){if(this.isElOrChild(t.relatedTarget)){t.stopPropagation()}}handleSearchFieldBlur(t){this.searchFieldWrapperEl.classList.remove("focus");if(this.isElOrChild(t.relatedTarget)){t.stopPropagation()}}handleKey(t){switch(t.key){case"ArrowDown":if(this.isExpanded===false){t.preventDefault();this.open("next")}break;case"ArrowUp":if(this.isExpanded===false){t.preventDefault();this.open("previous")}break}}componentWillLoad(){if(!this.label){console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).")}this.uid=this.el.id?this.el.id:l();if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(this.selectedOptions.length>0){this.selectedOptions.forEach((t=>{this.displayedOptions.push(t)}))}else if(!this.multiple){this.selectOption(this.allOptionEls[0])}}componentDidLoad(){this.wmSelectDidLoad.emit();this.dropdownEl.classList.add("hidden");r(this.el);if(this.maxHeight){this.listboxEl.style.maxHeight=this.maxHeight}if(this.multiple){this.updateOptionVisibility()}this.setButtonText()}componentWillUpdate(){if(this.multiple){const t=this.visibleOptionEls.filter((t=>t.classList.contains("duplicate")));t.forEach(((e,i)=>{if(i===t.length-1){e.classList.add("last")}else{e.classList.remove("last")}}))}}moveUp(t){const e=this.visibleOptionEls;if(this.selectAllEl){e.unshift(this.selectAllEl)}if(this.searchFieldEl){e.unshift(this.searchFieldEl)}const i=e[e.indexOf(t)-1]||e[e.length-1];if(i){this.focusOption(i)}}moveDown(t){const e=this.visibleOptionEls;if(this.selectAllEl){e.unshift(this.selectAllEl)}if(this.searchFieldEl){e.unshift(this.searchFieldEl)}const i=e[e.indexOf(t)+1]||e[0];if(i){this.focusOption(i)}}open(t){if(!this.disabled){const e=this.el.clientHeight;const i=this.buttonEl.clientHeight;this.openUp=h(this.el,this.dropdownEl,e,i);this.isExpanded=true;this.dropdownEl.classList.remove("hidden");window.requestAnimationFrame((()=>{switch(t){case"next":if(this.search){this.searchFieldEl.focus();this.listboxEl.scrollTop=0}else{this.moveDown(this.visibleOptionEls.filter((t=>t.selected)).slice(-1)[0])}break;case"previous":if(this.search){this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length-1])}else{this.moveUp(this.visibleOptionEls.filter((t=>t.selected))[0])}break;default:if(this.search){this.searchFieldEl.focus();this.listboxEl.scrollTop=0}else if(this.selectedOptions.length>0){this.focusOption(this.visibleOptionEls.filter((t=>t.selected))[0])}else{this.focusOption(this.visibleOptionEls[0])}break}}))}}close(t=true){if(this.isExpanded){this.isExpanded=false;this.allOptionEls.map((t=>t.focused=false));window.setTimeout((()=>{this.dropdownEl.classList.add("hidden");if(this.multiple){this.updateOptionVisibility()}if(this.search){this.searchFieldEl.value="";this.wmSelectSearchChanged.emit({searchTerm:this.searchTerm})}if(t){this.buttonEl.focus()}}),150)}}updateOptionVisibility(){this.childOptions.forEach(((t,e)=>{const i=this.duplicateOptions[e];if(t.selected){t.classList.add("hidden");i.classList.remove("hidden")}else{t.classList.remove("hidden");i.classList.add("hidden")}}))}focusOption(t){this.allOptionEls.forEach((e=>e.focused=e===t));t.scrollIntoView({block:"nearest"});window.setTimeout((()=>t.scrollIntoView({block:"nearest"})),60);t.focus()}selectOption(t){if(t.classList.contains("duplicate")){const e=this.findCorrespondingOption(t);e.selected=!e.selected;r(this.el)}else if(this.multiple){t.selected=!t.selected}else{this.childOptions.forEach((e=>e.selected=e===t))}if(this.selectAllEl){this.setSelectAllButton()}this.setButtonText()}findAndFocusOption(t){const e=t.detail.toLowerCase();if(!this.keysSoFar){this.visibleOptionEls.forEach(((t,e)=>{if(t.focused){this.searchIndex=e}}))}this.keysSoFar+=e;let i=this.findMatchInRange(this.visibleOptionEls,this.searchIndex+1,this.visibleOptionEls.length);if(!i){i=this.findMatchInRange(this.visibleOptionEls,0,this.searchIndex)}if(i){this.focusOption(i)}this.debouncedClearKeysSoFar()}findMatchInRange(t,e,i){let s=null;let o=t.slice(e,i);o.forEach((t=>{const e=t.textContent;if(!s&&e&&e.toLowerCase().startsWith(this.keysSoFar)){s=t}}));return s}findCorrespondingOption(t){const e=t.classList.contains("duplicate");return e?this.childOptions[this.duplicateOptions.indexOf(t)]:this.duplicateOptions[this.childOptions.indexOf(t)]}isElOrChild(t){var e;return t===this.el||this.el.contains(t)||((e=this.el.shadowRoot)===null||e===void 0?void 0:e.contains(t))}exposeErrors(){const t=l();this.errorContainer.id=`wm-errors-${t}`;this.buttonEl.setAttribute("aria-describedby",`wm-errors-${t}`)}renderErrorContainer(){return i("div",{id:"wm-errors",class:this.errorMessage?"error-message":"",ref:t=>this.errorContainer=t,"aria-live":"assertive","aria-atomic":"true"},this.errorMessage)}handleComponentBlur(t){if(!this.el.contains(t.relatedTarget)){this.close(false);this.wmSelectBlurred.emit();this.wmComponentBlurred.emit()}}handleKeyDown(t){const e=t.target;switch(t.key){case"ArrowDown":t.preventDefault();this.moveDown(t.target);break;case"ArrowUp":t.preventDefault();this.moveUp(t.target);break;case"Escape":t.preventDefault();this.close();break;case"Enter":if(e===this.selectAllEl){t.preventDefault();this.handleSelectAllClick();this.close()}break;case" ":if(e===this.selectAllEl){t.preventDefault();this.handleSelectAllClick()}break}}setButtonText(){this.displayedOptions=this.childOptions.filter((t=>t.selected)).map((t=>!t.classList.contains("hidden")?t:this.findCorrespondingOption(t)));if(this.multiple){const t=38;const e=window.getComputedStyle(this.buttonEl);const i=parseInt(e.getPropertyValue("padding-left").slice(0,-2));const s=parseInt(e.getPropertyValue("padding-right").slice(0,-2));const o=this.buttonEl.clientWidth-i-s-t;let r=this.displayedOptions.map((t=>t.shadowRoot.querySelector(".option-wrapper").clientWidth));let n=r.reduce(((t,e)=>t+e),0);this.overflowCount=0;while(n>o&&this.displayedOptions.length>1){this.overflowCount++;n-=r[r.length-1];r.pop();this.displayedOptions.pop()}}}setSelectAllButton(){if(this.allSelected){this.selectAllEl.textContent=this.deselectAllMessage;this.announce(this.allOptionsSelectedMessage)}else{this.selectAllEl.textContent=this.selectAllMessage;if(this.selectedOptions.length===0){this.announce(this.allOptionsDeselectedMessage)}}}announce(t){if(this.liveRegionEl.textContent===t){t+=" "}this.announcement=t}renderButtonText(){if(this.multiple&&this.displayedOptions.length<1){return i("span",null,this.placeholder)}else if(this.multiple&&this.allSelected&&this.overflowCount>0){return this.allSelectedMessage}else{return this.displayedOptions.map(((t,e)=>i("span",null,e>0?", ":"",t.textContent)))}}renderSubinfo(){if(!this.multiple&&this.selectedOptions.length>0&&this.selectedOptions[0].subinfo){return i("span",{class:"subinfo"},this.selectedOptions[0].subinfo)}}renderOverflowCount(){if(this.overflowCount>0&&!this.allSelected){return i("span",null,i("span",{class:"overflow-counter"},"+",this.overflowCount))}}renderSearchField(){return i("div",{class:"search"},i("div",{class:"searchfield-wrapper",ref:t=>this.searchFieldWrapperEl=t},i("div",{class:"icon"}),i("input",{ref:t=>this.searchFieldEl=t,class:"searchfield",role:"combobox","aria-controls":`list-${this.uid}`,"aria-expanded":this.isExpanded?"true":"false",onKeyDown:t=>this.handleKeyDown(t),onFocus:()=>this.searchFieldWrapperEl.classList.add("focus"),onBlur:t=>this.handleSearchFieldBlur(t),onInput:()=>this.debouncedSearch(),placeholder:this.searchPlaceholder})))}renderSearchFailedMessage(){return i("div",{class:"search-results-message"},this.noResultsFoundMessage)}renderSelectAllButton(){if(this.selectAll&&this.multiple&&this.searchTerm==""){return i("button",{ref:t=>this.selectAllEl=t,class:"select-all",onClick:()=>this.handleSelectAllClick(),onKeyDown:t=>this.handleKeyDown(t),tabindex:"-1"},this.allSelected?this.deselectAllMessage:this.selectAllMessage)}}renderDuplicateOptions(){return Array.from(this.el.children).map((t=>i("wm-option",{class:"duplicate",selected:t.selected},t.textContent)))}render(){const t={id:`selectbtn-${this.uid}`,["disabled"]:this.disabled,["aria-controls"]:`list-${this.uid}`,["aria-labelledby"]:`label-${this.uid} selectbtn-${this.uid}`,["aria-describedby"]:"wm-errors",["aria-expanded"]:this.isExpanded?"true":"false",onClick:()=>this.isExpanded?this.close():this.open()};return i(s,{onBlur:t=>this.handleComponentBlur(t)},i("div",{class:`wrapper ${p()} label-${this.labelPosition} ${this.invalid||this.errorMessage?"invalid":""}`},i("div",{class:"label-wrapper"},i("label",{class:"label",id:`label-${this.uid}`,htmlFor:`selectbtn-${this.uid}`},this.label,this.requiredField?i("span",{class:"required"},i("span",{class:"sr-only"},d.requiredField),i("span",{"aria-hidden":"true"},"*")):"")),i("div",{class:"button-wrapper"},i("button",Object.assign({},t,{class:`displayedoption ${this.isTabbing?"user-is-tabbing":""}`,ref:t=>this.buttonEl=t,onBlur:t=>this.handleButtonBlur(t),onFocus:()=>this.close()}),i("span",{class:this.selectedOptions.length>0&&this.selectedOptions.filter((t=>t.subinfo)).length>0?"overflowcontrol hassubinfo":"overflowcontrol"},i("span",{class:"button-text"},this.renderButtonText()),this.renderSubinfo()),this.renderOverflowCount()),i("div",{class:`dropdown ${this.isExpanded?"open":""} ${this.openUp?"upwards":""}`,ref:t=>this.dropdownEl=t},this.search&&this.renderSearchField(),i("div",{id:`list-${this.uid}`,class:"options-wrapper",tabindex:-1,role:"listbox","aria-multiselectable":this.multiple?"true":null,"aria-labelledby":`label-${this.uid}`,ref:t=>this.listboxEl=t},this.search&&this.filteredOptions.length===0&&this.renderSearchFailedMessage(),this.renderSelectAllButton(),this.multiple&&this.renderDuplicateOptions(),i("slot",null))),this.renderErrorContainer(),i("div",{id:"announcement","aria-live":"polite",class:"sr-only",ref:t=>this.liveRegionEl=t},this.announcement))))}static get delegatesFocus(){return true}get el(){return o(this)}static get watchers(){return{errorMessage:["exposeErrors"]}}};m.style=b;export{f as wm_option,m as wm_select};
-//# sourceMappingURL=p-889579fc.entry.js.map

package/dist/ripple/p-889579fc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmOptionCss","Option","undefined","hostClasses","classes","this","subinfo","push","parentSelectEl","multiple","el","textContent","toLowerCase","includes","searchTerm","join","_a","parentElement","nodeName","getRootNode","host","handleKeydown","ev","key","preventDefault","wmKeyUpPressed","emit","wmKeyDownPressed","disabled","click","wmEnterKeyPressed","stopPropagation","wmEscKeyPressed","wmHomeKeyPressed","wmEndKeyPressed","length","wmLetterPressed","handleSelection","wmOptionSelected","handleBlur","wmOptionBlurred","relatedTarget","syncAriaSelected","selected","setAttribute","removeAttribute","syncAriaDisabled","updateDisabledOnClick","onclick","onClickFunc","handleSearch","detail","regexp","RegExp","boldedText","replace","match","textEl","innerHTML","componentWillLoad","addEventListener","render","h","Host","role","tabindex","focused","class","ref","wmSelectCss","Select","selectAllMessage","intl","formatMessage","id","defaultMessage","deselectAllMessage","allOptionsSelectedMessage","allOptionsDeselectedMessage","keysSoFar","searchIndex","openUp","overflowCount","displayedOptions","debouncedClearKeysSoFar","debounce","debouncedSearch","wmSelectSearchChanged","filteredOptions","announce","resultsFoundMessage","noResultsFoundMessage","description","childOptions","Array","from","querySelectorAll","duplicateOptions","shadowRoot","allOptionEls","concat","visibleOptionEls","filter","option","classList","contains","searchFieldEl","value","selectedOptions","x","allSelected","every","numResults","toggleTabbingOn","isTabbing","toggleTabbingOff","handleOptionSelection","focusOption","selectOption","changedOption","wmSelectChanged","event","CustomEvent","dispatchEvent","close","isDuplicate","originalOption","findCorrespondingOption","o","handleChildEnter","handleChildUp","moveUp","handleChildDown","moveDown","moveToFirstOption","moveToLastOption","closePopupOnEscape","handleOptionBlur","isElOrChild","handleClick","target","handleSelectAllClick","deselectAllOptions","selectAllOptions","forEach","setSelectAllButton","setButtonText","handleButtonBlur","handleSearchFieldBlur","searchFieldWrapperEl","remove","handleKey","isExpanded","open","label","console","error","uid","generateId","document","body","componentDidLoad","wmSelectDidLoad","dropdownEl","add","forceUpdate","maxHeight","listboxEl","style","updateOptionVisibility","componentWillUpdate","visibleDuplicateOptions","idx","focusableEls","selectAllEl","unshift","prevEl","indexOf","nextEl","optionToSelect","elHeight","clientHeight","buttonHeight","buttonEl","shouldOpenUp","window","requestAnimationFrame","search","focus","scrollTop","slice","returnFocus","map","i","setTimeout","duplicateOption","scrollIntoView","block","correspondingOption","findAndFocusOption","character","nextMatch","findMatchInRange","list","startIndex","endIndex","optionsInRange","startsWith","exposeErrors","newId","errorContainer","renderErrorContainer","errorMessage","handleComponentBlur","wmSelectBlurred","wmComponentBlurred","handleKeyDown","y","overflowCounterWidth","computedStyle","getComputedStyle","paddingLeft","parseInt","getPropertyValue","paddingRight","availableSpace","clientWidth","optionsWidths","querySelector","optionsTotalWidth","reduce","acc","pop","message","liveRegionEl","announcement","renderButtonText","placeholder","allSelectedMessage","renderSubinfo","renderOverflowCount","renderSearchField","onKeyDown","onFocus","onBlur","onInput","searchPlaceholder","renderSearchFailedMessage","renderSelectAllButton","selectAll","onClick","renderDuplicateOptions","children","buttonProps","getTextDir","labelPosition","invalid","htmlFor","requiredField","globalMessages","Object","assign"],"sources":["./src/components/wm-option/wm-option.scss?tag=wm-option&encapsulation=shadow","./src/components/wm-option/wm-option.tsx","./src/components/wm-select/wm-select.scss?tag=wm-select&encapsulation=shadow","./src/components/wm-select/wm-select.tsx"],"sourcesContent":[":host(:not(:last-child)),\nwm-option:not(:last-child) {\n  border-bottom: 2px solid $list-border-bottom-color;\n}\n\n:host,\nwm-option {\n  display: block;\n  cursor: pointer;\n  position: relative;\n  padding: rem-calc(20);\n  background: $light-background;\n  font-family: inherit;\n  list-style: none;\n  color: $body-text-color;\n  user-select: none;\n\n  &:focus,\n  &.focus {\n    outline: none;\n    background: $background;\n  }\n\n  &.icon {\n    color: $button-default-text;\n  }\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n\n.checkbox {\n  &:before {\n    @include mdi-icon;\n    content: \"\\f131\";\n    display: inline;\n    margin-right: rem-calc(4);\n    color: $periwinkle;\n  }\n}\n\n:host([aria-selected=\"true\"]),\nwm-option[aria-selected=\"true\"] {\n  background: $list-selected-background-color;\n  font-weight: 500;\n\n  .checkbox {\n    &:before {\n      content: \"\\f132\";\n    }\n  }\n}\n\n:host([aria-disabled=\"true\"]),\nwm-option[aria-disabled=\"true\"] {\n  font-style: italic;\n  color: $gray;\n  cursor: default;\n\n  .checkbox {\n    &:before {\n      color: $gray;\n    }\n  }\n}\n\n:host(.multi-option),\nwm-option.multi-option {\n  background: unset;\n}\n\n:host(.hidden),\nwm-option.hidden,\n:host(.filtered-out),\nwm-option.filtered-out {\n  display: none;\n}\n\n:host(.duplicate.last),\nwm-option.duplicate.last {\n  border-bottom: 12px solid $list-border-bottom-color;\n}\n\n:host(.hassubinfo),\nwm-option.hassubinfo {\n  display: flex;\n\n  .option-wrapper {\n    flex: 1;\n  }\n  .subinfo {\n    flex: none;\n  }\n}\n\n.subinfo {\n  font-style: italic;\n}\n\n.option-wrapper {\n  // necessary for multiselect overflow measurement\n  display: inline-block;\n}\n\n::slotted {\n  font-family: inherit;\n}\n\n::slotted(i) {\n  font-size: rem-calc(14);\n\n  &:before {\n    @include mdi-icon;\n    display: inline-block;\n    margin-right: rem-calc(10);\n    pointer-events: none;\n  }\n}\n\n:host(:focus),\nwm-option:focus {\n  outline: none;\n  background: $background;\n}\n\n:host(:hover) {\n  background: $background;\n  outline: none;\n}\n","import { h, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-option\",\n  styleUrl: \"wm-option.scss\",\n  shadow: true,\n})\nexport class Option {\n  @Element() el!: HTMLElement;\n\n  @Prop() value?: string | null; // if devs pass a value as attribute they should be able to retrieve it by querying the property. This is untouched by the component.\n  @Prop({ mutable: true }) subinfo?: string = undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop() focused: boolean = false;\n\n  @Event() wmOptionSelected!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmKeyUpPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmKeyDownPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEscKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEndKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmEnterKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n  @Event() wmLetterPressed!: EventEmitter<string>;\n  @Event() wmOptionBlurred!: EventEmitter<{ relatedTarget: EventTarget | null }>;\n\n  private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\n  @State() searchTerm: string = \"\";\n  private textEl!: HTMLDivElement;\n\n  get hostClasses() {\n    let classes = [];\n    if (this.subinfo) {\n      classes.push(\"hassubinfo\");\n    }\n    if (this.parentSelectEl.multiple) {\n      classes.push(\"multi-option\");\n    }\n    if (!this.el.textContent!.toLowerCase().includes(this.searchTerm)) {\n      classes.push(\"filtered-out\");\n    }\n    return classes.join(\" \");\n  }\n\n  get parentSelectEl() {\n    return this.el.parentElement?.nodeName !== \"WM-SELECT\"\n      ? ((this.el.getRootNode() as ShadowRoot).host as HTMLWmSelectElement)\n      : (this.el.parentElement as HTMLWmSelectElement);\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.wmKeyUpPressed.emit(this.el as HTMLWmOptionElement);\n        break;\n\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.wmKeyDownPressed.emit(this.el as HTMLWmOptionElement);\n        break;\n\n      case \"Enter\":\n        ev.preventDefault();\n        if (!this.disabled) {\n          this.el.click();\n          this.wmEnterKeyPressed.emit(this.el as HTMLWmOptionElement);\n        }\n        break;\n\n      case \" \":\n        ev.preventDefault();\n        this.el.click();\n        break;\n\n      case \"Escape\":\n        ev.preventDefault();\n        ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n        this.wmEscKeyPressed.emit();\n        break;\n\n      case \"Home\":\n        ev.preventDefault();\n        this.wmHomeKeyPressed.emit();\n        break;\n\n      case \"End\":\n        ev.preventDefault();\n        this.wmEndKeyPressed.emit();\n        break;\n\n      default:\n        if (ev.key.length === 1) {\n          // emit for single characters (\"a\",\"l\",\"5\", etc), avoid others (\"shift\", \"control\", etc)\n          this.wmLetterPressed.emit(ev.key);\n        }\n    }\n  }\n\n  @Listen(\"click\")\n  handleSelection() {\n    if (!this.disabled) {\n      // the parent wm-select is in charge of the actual selection\n      // using ev.detail because ev.target returns the wm-select for duplicate options\n      this.wmOptionSelected.emit(this.el as HTMLWmOptionElement);\n    }\n  }\n\n  @Listen(\"blur\")\n  handleBlur(ev: FocusEvent) {\n    this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });\n  }\n\n  @Watch(\"selected\")\n  syncAriaSelected() {\n    // this function only keeps the aria-selected attr in sync with the selected prop\n    // all the logic for selecting / deselecting happens in the parent wm-select\n    this.selected ? this.el.setAttribute(\"aria-selected\", \"true\") : this.el.removeAttribute(\"aria-selected\");\n  }\n\n  @Watch(\"disabled\")\n  syncAriaDisabled() {\n    this.disabled ? this.el.setAttribute(\"aria-disabled\", \"true\") : this.el.removeAttribute(\"aria-disabled\");\n  }\n\n  @Watch(\"disabled\")\n  updateDisabledOnClick() {\n    if (this.disabled && this.el.onclick) {\n      this.onClickFunc = this.el.onclick;\n      this.el.onclick = null;\n    } else if (!this.disabled && this.onClickFunc) {\n      this.el.onclick = this.onClickFunc;\n    }\n  }\n\n  handleSearch(ev: CustomEvent) {\n    // filter is case-insensitive, so\n    this.searchTerm = ev.detail.searchTerm.toLowerCase();\n\n    if (this.searchTerm) {\n      const regexp = new RegExp(`${this.searchTerm}`, \"gi\");\n      const boldedText = this.el.textContent!.replace(regexp, (match) => `<strong>${match}</strong>`);\n      // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as \"hel lo\"\n      // aria-hidden and sr-only is used to circumvent this\n      this.textEl.innerHTML = boldedText;\n    } else {\n      this.textEl.innerHTML = this.el.textContent!;\n    }\n  }\n\n  componentWillLoad() {\n    this.syncAriaSelected();\n    this.syncAriaDisabled();\n    this.updateDisabledOnClick();\n\n    this.parentSelectEl.addEventListener(\"wmSelectSearchChanged\", (ev) => this.handleSearch(ev as CustomEvent));\n  }\n\n  render() {\n    return (\n      <Host role=\"option\" tabindex={this.focused ? 0 : -1} class={this.hostClasses}>\n        <div class={`option-wrapper ${this.parentSelectEl.multiple ? \"checkbox\" : \"\"}`}>\n          <span aria-hidden=\"true\" ref={(el) => (this.textEl = el as HTMLDivElement)}>\n            {this.el.textContent}\n          </span>\n          <span class=\"sr-only\">{this.el.textContent}</span>\n        </div>\n        <div class=\"subinfo\">{this.subinfo}</div>\n      </Host>\n    );\n  }\n}\n",":host {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  font-family: inherit;\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n\n@include label;\n\n.wrapper {\n  & .button-wrapper {\n    position: relative;\n    flex: 1;\n    font-size: rem-calc(18);\n    color: $button-default-text;\n    min-width: rem-calc(140);\n\n    .displayedoption {\n      @include border-radius(3px);\n      @include box-shadow(none);\n      display: flex;\n      align-items: center;\n      flex-wrap: nowrap;\n      background: transparent;\n      width: 100%;\n      border: solid 1px rgba(35, 35, 35, 0.6);\n      padding: rem-calc(0 30 0 15);\n      cursor: pointer;\n      height: rem-calc(40);\n      line-height: normal;\n      font-family: inherit;\n      color: $button-default-text;\n      font-weight: 400;\n      font-size: rem-calc(14);\n      text-transform: none;\n      text-align: left;\n\n      @media only screen and (max-width: 768px) {\n        height: rem-calc(44);\n      }\n\n      &:before {\n        @include mdi-icon;\n        content: \"\\f140\";\n        position: absolute;\n        right: rem-calc(9);\n        pointer-events: none;\n      }\n\n      &:hover:not(:disabled):not(.-disabled):not(.-raised) {\n        background: transparent;\n        text-decoration: none;\n      }\n\n      &:active {\n        // fix style bleed in Edge\n        -ms-transform: scale(1, 1) !important;\n        transform: scale(1, 1) !important;\n      }\n\n      &:focus {\n        outline: none;\n      }\n\n      &::-moz-focus-inner {\n        border: 0;\n      }\n\n      &.user-is-tabbing:focus {\n        @include focus-style;\n      }\n\n      .overflowcontrol {\n        display: block;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n        overflow: hidden;\n        flex: 1;\n\n        &.hassubinfo {\n          display: flex;\n\n          .button-text {\n            flex: 1;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            min-width: 0;\n          }\n          .subinfo {\n            flex: none;\n            font-style: italic;\n          }\n        }\n      }\n\n      .overflow-counter {\n        font-weight: bold;\n        margin-left: rem-calc(8);\n      }\n    }\n\n    > .displayedoption[disabled] {\n      color: #6b6b6b;\n      border-color: #8a8a8a;\n      background: #f0f0f0;\n      cursor: default;\n    }\n\n    > .dropdown {\n      -webkit-overflow-scrolling: touch;\n\n      @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n      @include transition(transform 0.25s ease);\n      @include scale($xVal: 1, $yVal: 0);\n      @include transformOrigin(center top);\n      @include border-radius(3px);\n      position: absolute;\n      top: 0;\n      right: 0;\n      background: #fff;\n      z-index: 100;\n      width: 100%;\n      font-size: rem-calc(14);\n\n      &.upwards {\n        top: unset;\n        bottom: calc(100% - 2.5rem);\n        @include transformOrigin(center bottom);\n      }\n\n      &.hidden {\n        visibility: hidden;\n      }\n    }\n\n    > .dropdown.open {\n      @include scale($xVal: 1, $yVal: 1);\n    }\n  }\n\n  &.invalid {\n    & .button-wrapper {\n      & .displayedoption {\n        @include invalidBorder;\n      }\n    }\n  }\n\n  & .error-message {\n    @include errorMessage;\n    margin-bottom: rem-calc(4);\n    top: 100%;\n    left: 0;\n  }\n}\n\n.options-wrapper {\n  max-height: rem-calc(200);\n  overflow: auto;\n}\n\n.select-all {\n  //display: inline-block;\n  width: 100%;\n  cursor: pointer;\n  padding: rem-calc(20);\n  border: none;\n  margin: 0;\n  border-bottom: 2px solid $list-border-bottom-color;\n  background: $light-background;\n  font-family: inherit;\n  font-size: inherit;\n  text-align: left; // fallback for browsers not supporting logical properties\n  text-align: start;\n  font-weight: 500;\n  color: $interactive-element;\n  user-select: none;\n\n  &:hover,\n  &:focus {\n    outline: none;\n    background: #f4f4f4;\n  }\n}\n\n.search {\n  box-sizing: border-box;\n  border-bottom: 2px solid $list-border-bottom-color;\n  padding: rem-calc(20);\n\n  .searchfield-wrapper {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    height: rem-calc(44);\n    width: 100%;\n    padding: 0 rem-calc(12);\n    @include border-radius(3px);\n    border: 1px solid $input-border-color;\n    &:focus,\n    &.focus {\n      @include field-focus;\n    }\n  }\n  .searchfield {\n    width: 100%;\n    border: none;\n    outline: none;\n    font-family: inherit;\n    font-size: rem-calc(14);\n    margin-left: rem-calc(4);\n  }\n  .icon:before {\n    @include mdi-icon;\n    content: \"\\f349\";\n    color: $gray;\n    font-size: rem-calc(14);\n  }\n}\n\n.search-results-message {\n  padding: rem-calc(20);\n  color: $body-text-color;\n  font-size: rem-calc(14);\n  font-style: italic;\n}\n\n.rtl {\n  > .dropdown {\n    @include transformOrigin(left top);\n    left: 0;\n    right: auto;\n\n    .option {\n      padding-left: rem-calc(48);\n      padding-right: rem-calc(20);\n    }\n  }\n\n  > .displayedoption {\n    padding: rem-calc(0 15 0 30);\n    text-align: right;\n\n    &:before {\n      right: auto;\n      left: rem-calc(9);\n    }\n  }\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Watch, Host } from \"@stencil/core\";\nimport { forceUpdate } from \"@stencil/core\";\nimport { generateId, getTextDir, shouldOpenUp, intl, debounce } from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n  tag: \"wm-select\",\n  styleUrl: \"wm-select.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Select {\n  @Element() el!: HTMLWmSelectElement;\n\n  private uid!: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ mutable: true }) invalid: boolean = false;\n  @Prop() maxHeight?: string;\n  @Prop({ mutable: true }) label?: string;\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n  @Prop() requiredField: boolean = false;\n  @Prop({ mutable: true }) errorMessage: string = \"\";\n  @Prop() multiple: boolean = false;\n  @Prop() search: boolean = false;\n  @Prop() selectAll: boolean = false;\n  @Prop() placeholder: string = intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  });\n  @Prop() searchPlaceholder: string = intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  });\n  @Prop() allSelectedMessage: string = intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  });\n\n  selectAllMessage = intl.formatMessage({\n    id: \"select.selectAll\",\n    defaultMessage: \"Select All\",\n  });\n\n  deselectAllMessage = intl.formatMessage({\n    id: \"select.deselectAll\",\n    defaultMessage: \"Deselect All\",\n  });\n\n  allOptionsSelectedMessage = intl.formatMessage({\n    id: \"select.allOptionsSelected\",\n    defaultMessage: \"All options selected\",\n  });\n\n  allOptionsDeselectedMessage = intl.formatMessage({\n    id: \"select.allOptionsDeselected\",\n    defaultMessage: \"All options deselected\",\n  });\n\n  @State() isTabbing: boolean = false;\n  @State() isExpanded: boolean = false;\n  @State() announcement: string = \"\";\n  @Event() wmSelectDidLoad!: EventEmitter<void>;\n  @Event() wmSelectBlurred!: EventEmitter<void>;\n  @Event() wmSelectChanged!: EventEmitter<Object>;\n  @Event() wmComponentBlurred!: EventEmitter<void>; // deprecated in favor of wmSelectBlurred\n  @Event() wmSelectSearchChanged!: EventEmitter<Object>;\n\n  private buttonEl!: HTMLButtonElement;\n  private dropdownEl!: HTMLDivElement;\n  private selectAllEl!: HTMLButtonElement;\n  private listboxEl!: HTMLDivElement;\n  private liveRegionEl!: HTMLDivElement;\n  private searchFieldWrapperEl!: HTMLDivElement;\n  private searchFieldEl!: HTMLInputElement;\n  private errorContainer!: HTMLDivElement;\n  private keysSoFar: string = \"\";\n  private searchIndex: number = 0;\n  private openUp: boolean = false;\n  get childOptions() {\n    return Array.from(this.el.querySelectorAll(\"wm-option\"));\n  }\n  get duplicateOptions(): HTMLWmOptionElement[] {\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\"wm-option\"));\n  }\n  get allOptionEls(): HTMLWmOptionElement[] {\n    // this includes both slotted wm-options and internally created wm-options\n    return this.duplicateOptions.concat(this.childOptions);\n  }\n  get visibleOptionEls(): HTMLWmOptionElement[] {\n    return this.allOptionEls.filter(\n      (option) => !option.classList.contains(\"hidden\") && !option.classList.contains(\"filtered-out\")\n    );\n  }\n\n  //////////////////////////////////////\n  // for search variants\n  get searchTerm(): string {\n    return this.searchFieldEl ? this.searchFieldEl.value : \"\";\n  }\n  get filteredOptions(): HTMLWmOptionElement[] {\n    return this.childOptions.filter((option) =>\n      option.textContent?.toLowerCase().includes(this.searchTerm.toLowerCase())\n    );\n  }\n  //////////////////////////////////////\n\n  //////////////////////////////////////\n  // for multiselect button text\n  private overflowCount: number = 0;\n  get selectedOptions(): HTMLWmOptionElement[] {\n    return Array.from(this.el.querySelectorAll(\"wm-option\")).filter((x) => x.selected);\n  }\n  private displayedOptions: HTMLWmOptionElement[] = [];\n  get allSelected() {\n    return this.childOptions.every((option) => option.selected);\n  }\n  //////////////////////////////////////\n\n  get resultsFoundMessage() {\n    return intl.formatMessage(\n      {\n        id: \"select.searchResultsFound\",\n        defaultMessage: \"{numResults, plural, one {1 option found} other {# options found}}\",\n        description: \"The message read by the screen reader, indicating how many results a search returned\",\n      },\n      { numResults: this.filteredOptions.length }\n    );\n  }\n\n  get noResultsFoundMessage() {\n    return intl.formatMessage({\n      id: \"select.noSearchResults\",\n      defaultMessage: \"No results found. Please try your search again.\",\n      description: \"The message displayed when no options pass the search filter\",\n    });\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"wmOptionSelected\")\n  handleOptionSelection(ev: CustomEvent): void {\n    const option: HTMLWmOptionElement = ev.detail;\n    this.focusOption(option);\n    if (!this.multiple) {\n      // if the option was already selected, leave selected states untouched and don't fire the event\n      if (!option.selected) {\n        this.selectOption(option);\n        const detail = { changedOption: option, selectedOptions: [option] };\n        this.wmSelectChanged.emit(detail);\n        // change is deprecated in favor of wmSelectChanged\n        // because of issues with React wrappers when using native events name\n        const event = new CustomEvent(\"change\", { detail: detail });\n        // @ts-ignore\n        this.el.dispatchEvent(event);\n      }\n      this.close();\n    } else {\n      this.selectOption(option);\n      // we pass the original option with the event, as it's the only one the devs know or care about\n      // devs will typically set a `value` on the option, which is not copied over\n      // we could have taken the value and put it on the duplicate option,\n      // but this approach is more flexible (what if they want to have a data attribute?)\n      const isDuplicate: boolean = option.classList.contains(\"duplicate\");\n      const originalOption: HTMLWmOptionElement = isDuplicate ? this.findCorrespondingOption(option) : option;\n      const selectedOptions = this.childOptions.filter((o) => o.selected);\n      const detail = { changedOption: originalOption, selectedOptions: selectedOptions };\n      this.wmSelectChanged.emit(detail);\n      // change is deprecated in favor of wmSelectChanged\n      // because of issues with React wrappers when using native events name\n      const event = new CustomEvent(\"change\", { detail: detail });\n      // @ts-ignore\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  @Listen(\"wmEnterKeyPressed\")\n  handleChildEnter(): void {\n    // only occurs for multiselects. handle the click, then close\n    this.close();\n  }\n\n  @Listen(\"wmKeyUpPressed\")\n  handleChildUp(ev: CustomEvent): void {\n    this.moveUp(ev.detail as HTMLWmOptionElement);\n  }\n\n  @Listen(\"wmKeyDownPressed\")\n  handleChildDown(ev: CustomEvent): void {\n    this.moveDown(ev.detail as HTMLWmOptionElement);\n  }\n\n  @Listen(\"wmHomeKeyPressed\")\n  moveToFirstOption(): void {\n    this.focusOption(this.visibleOptionEls[0]);\n  }\n\n  @Listen(\"wmEndKeyPressed\")\n  moveToLastOption(): void {\n    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\n  }\n\n  @Listen(\"wmEscKeyPressed\")\n  closePopupOnEscape(): void {\n    this.close();\n  }\n\n  @Listen(\"wmOptionBlurred\")\n  handleOptionBlur(ev: CustomEvent): void {\n    // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget\n    // keeps our component's blur events accurate, and closes when focusing browser address bar\n    if (!this.isElOrChild(ev.detail.relatedTarget)) {\n      const event = new CustomEvent(\"blur\");\n      // @ts-ignore\n      event.relatedTarget = ev.detail.relatedTarget;\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  @Listen(\"click\", { target: \"document\", capture: true })\n  handleClick(ev: MouseEvent): void {\n    if (!this.isElOrChild(ev.target as HTMLElement)) {\n      this.close();\n    }\n  }\n\n  handleSelectAllClick() {\n    this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();\n  }\n\n  selectAllOptions() {\n    this.allOptionEls.forEach((o) => (o.selected = true));\n    this.setSelectAllButton();\n    this.setButtonText();\n    const detail = { changedOption: null, selectedOptions: this.childOptions };\n    this.wmSelectChanged.emit(detail);\n  }\n\n  deselectAllOptions() {\n    this.allOptionEls.forEach((o) => (o.selected = false));\n    this.setSelectAllButton();\n    this.setButtonText();\n    const detail = { changedOption: null, selectedOptions: [] };\n    this.wmSelectChanged.emit(detail);\n  }\n\n  handleButtonBlur(ev: FocusEvent) {\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\n      // do not emit a blur event when opening the dropdown and focusing the Options\n      ev.stopPropagation();\n    }\n  }\n\n  handleSearchFieldBlur(ev: FocusEvent) {\n    this.searchFieldWrapperEl.classList.remove(\"focus\");\n    if (this.isElOrChild(ev.relatedTarget as HTMLElement)) {\n      // do not emit a blur event when moving from searchfield to options\n      ev.stopPropagation();\n    }\n  }\n\n  @Listen(\"keydown\")\n  handleKey(ev: KeyboardEvent): void {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        if (this.isExpanded === false) {\n          ev.preventDefault();\n          this.open(\"next\");\n        }\n        break;\n\n      case \"ArrowUp\":\n        if (this.isExpanded === false) {\n          ev.preventDefault();\n          this.open(\"previous\");\n        }\n        break;\n    }\n  }\n\n  componentWillLoad() {\n    if (!this.label) {\n      console.error(\n        \"For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).\"\n      );\n    }\n\n    this.uid = this.el.id ? this.el.id : generateId();\n\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    // set initial selections\n    if (this.selectedOptions.length > 0) {\n      this.selectedOptions.forEach((x) => {\n        this.displayedOptions.push(x);\n      });\n      // single Select only, pre-select if no default option from dev\n    } else if (!this.multiple) {\n      this.selectOption(this.allOptionEls[0]);\n    }\n  }\n\n  componentDidLoad() {\n    this.wmSelectDidLoad.emit();\n    this.dropdownEl.classList.add(\"hidden\");\n    forceUpdate(this.el);\n\n    // Dev can overwrite the max-height rule set in the Sass file\n    if (this.maxHeight) {\n      this.listboxEl.style.maxHeight = this.maxHeight;\n    }\n\n    if (this.multiple) {\n      this.updateOptionVisibility();\n    }\n    this.setButtonText();\n  }\n\n  componentWillUpdate() {\n    if (this.multiple) {\n      // find last visible duplicate option and apply .last class\n      const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains(\"duplicate\"));\n      visibleDuplicateOptions.forEach((option, idx) => {\n        if (idx === visibleDuplicateOptions.length - 1) {\n          option.classList.add(\"last\");\n        } else {\n          option.classList.remove(\"last\");\n        }\n      });\n    }\n  }\n\n  moveUp(el: HTMLElement) {\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\n    if (this.selectAllEl) {\n      focusableEls.unshift(this.selectAllEl);\n    }\n    if (this.searchFieldEl) {\n      focusableEls.unshift(this.searchFieldEl);\n    }\n\n    const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];\n\n    if (prevEl) {\n      this.focusOption(prevEl);\n    }\n  }\n\n  moveDown(el: HTMLElement) {\n    const focusableEls: HTMLElement[] = this.visibleOptionEls;\n    if (this.selectAllEl) {\n      focusableEls.unshift(this.selectAllEl);\n    }\n    if (this.searchFieldEl) {\n      focusableEls.unshift(this.searchFieldEl);\n    }\n\n    const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];\n\n    if (nextEl) {\n      this.focusOption(nextEl);\n    }\n  }\n\n  open(optionToSelect?: \"next\" | \"previous\"): void {\n    if (!this.disabled) {\n      const elHeight = this.el.clientHeight;\n      const buttonHeight = this.buttonEl.clientHeight;\n      this.openUp = shouldOpenUp(\n        this.el,\n        this.dropdownEl,\n        // when opening up, dropdown covers both label and button\n        elHeight,\n        // when opening down, dropdown covers only the button\n        buttonHeight\n      );\n      this.isExpanded = true;\n      this.dropdownEl.classList.remove(\"hidden\");\n\n      window.requestAnimationFrame(() => {\n        switch (optionToSelect) {\n          case \"next\":\n            // search variant focuses search field\n            // all others focus option \"after\" last selected option  (this can be the first option)\n            if (this.search) {\n              this.searchFieldEl.focus();\n              this.listboxEl.scrollTop = 0;\n            } else {\n              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);\n            }\n            break;\n          case \"previous\":\n            // search variant focuses last option\n            // all others focus option \"above\" first selected option (this can be the last option)\n            if (this.search) {\n              this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);\n            } else {\n              this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);\n            }\n            break;\n          default:\n            // search variant focuses search field\n            // all others focus the selected option\n            // if no option is selected (empty multiselect), focuses first option\n            if (this.search) {\n              this.searchFieldEl.focus();\n              this.listboxEl.scrollTop = 0;\n            } else if (this.selectedOptions.length > 0) {\n              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);\n            } else {\n              this.focusOption(this.visibleOptionEls[0]);\n            }\n            break;\n        }\n      });\n    }\n  }\n\n  close(returnFocus: boolean = true): void {\n    if (this.isExpanded) {\n      this.isExpanded = false;\n      this.allOptionEls.map((i) => (i.focused = false));\n\n      window.setTimeout(() => {\n        this.dropdownEl.classList.add(\"hidden\");\n        if (this.multiple) {\n          this.updateOptionVisibility();\n        }\n        // clear search field, reset filtered / bolded state of wm-options\n        if (this.search) {\n          this.searchFieldEl.value = \"\";\n          this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\n        }\n        // Returns focus to button after popup closes (no need if user is tabbing)\n        // Delay is necessary for screenreader to get new expanded state before focus\n        // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n        // also UX wise, it makes sense for the button to only be focused after the animation is complete\n        if (returnFocus) {\n          this.buttonEl.focus();\n        }\n      }, 150);\n    }\n  }\n\n  updateOptionVisibility() {\n    // this runs for search multiselects, where selected options are rendered at the top of the dropdown list\n    // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected\n    this.childOptions.forEach((option, idx) => {\n      const duplicateOption = this.duplicateOptions[idx];\n      if (option.selected) {\n        option.classList.add(\"hidden\");\n        duplicateOption.classList.remove(\"hidden\");\n      } else {\n        option.classList.remove(\"hidden\");\n        duplicateOption.classList.add(\"hidden\");\n      }\n    });\n  }\n\n  focusOption(option: HTMLElement): void {\n    this.allOptionEls.forEach((i) => (i.focused = i === option));\n\n    // option must be scrolledIntoView before focused\n    // if focus is called first the option might be positioned incorrectly (in the center of the dropdown) and scrollIntoView will do nothing as the option will already be in view\n    option.scrollIntoView({ block: \"nearest\" });\n\n    // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))\n    // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to\n    // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms\n    window.setTimeout(() => option.scrollIntoView({ block: \"nearest\" }), 60);\n\n    option.focus();\n  }\n\n  selectOption(option: HTMLWmOptionElement): void {\n    // beware of this function's name. For multiselect it actually toggles the selected state, so it can also deselect the option\n    if (option.classList.contains(\"duplicate\")) {\n      // if clicking on a duplicate option, toggle selected property of real one, then rerender\n      const correspondingOption = this.findCorrespondingOption(option);\n      correspondingOption.selected = !correspondingOption.selected;\n      forceUpdate(this.el);\n    } else if (this.multiple) {\n      option.selected = !option.selected;\n    } else {\n      this.childOptions.forEach((x) => (x.selected = x === option));\n    }\n    // update the selectAll checkbox when an option is de/selected\n    // checking is the el is present, implies that this.multiple and this.selectAll are true\n    if (this.selectAllEl) {\n      this.setSelectAllButton();\n    }\n    this.setButtonText();\n  }\n\n  @Listen(\"wmLetterPressed\")\n  findAndFocusOption(ev: CustomEvent): void {\n    const character = ev.detail.toLowerCase();\n\n    if (!this.keysSoFar) {\n      // if first character entered, set currently focused option as the starting index for the search\n      this.visibleOptionEls.forEach((option, idx) => {\n        if (option.focused) {\n          this.searchIndex = idx;\n        }\n      });\n    }\n\n    this.keysSoFar += character;\n\n    let nextMatch = this.findMatchInRange(this.visibleOptionEls, this.searchIndex + 1, this.visibleOptionEls.length);\n    if (!nextMatch) {\n      // if match can't be found from starting option downwards, search from top\n      nextMatch = this.findMatchInRange(this.visibleOptionEls, 0, this.searchIndex);\n    }\n\n    if (nextMatch) {\n      // findMatchInRange still might have returned null, only focus if match found\n      this.focusOption(nextMatch as HTMLWmOptionElement);\n    }\n    this.debouncedClearKeysSoFar();\n  }\n\n  debouncedClearKeysSoFar = debounce(() => {\n    this.keysSoFar = \"\";\n  }, 500);\n\n  findMatchInRange(list: HTMLWmOptionElement[], startIndex: number, endIndex: number): HTMLWmOptionElement | null {\n    let match: HTMLWmOptionElement | null = null;\n    let optionsInRange = list.slice(startIndex, endIndex);\n\n    // Find the first option starting with the keysSoFar substring, searching in\n    // the specified range of options\n    optionsInRange.forEach((option) => {\n      const label = option.textContent;\n      if (!match && label && label.toLowerCase().startsWith(this.keysSoFar)) {\n        match = option;\n      }\n    });\n\n    return match;\n  }\n\n  findCorrespondingOption(el: HTMLWmOptionElement): HTMLWmOptionElement {\n    // if duplicate, returns the child wm-option\n    // if child wm-option, returns duplicate\n    const isDuplicate = el.classList.contains(\"duplicate\");\n    return isDuplicate\n      ? this.childOptions[this.duplicateOptions.indexOf(el)]\n      : this.duplicateOptions[this.childOptions.indexOf(el)];\n  }\n\n  isElOrChild(el: HTMLElement) {\n    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot\n    return el === this.el || this.el.contains(el) || this.el.shadowRoot?.contains(el);\n  }\n\n  @Watch(\"errorMessage\")\n  exposeErrors() {\n    // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683\n    const newId = generateId();\n    this.errorContainer.id = `wm-errors-${newId}`;\n    this.buttonEl.setAttribute(\"aria-describedby\", `wm-errors-${newId}`);\n  }\n\n  renderErrorContainer() {\n    return (\n      <div\n        id=\"wm-errors\"\n        class={this.errorMessage ? \"error-message\" : \"\"}\n        ref={(el) => (this.errorContainer = el as HTMLDivElement)}\n        aria-live=\"assertive\"\n        aria-atomic=\"true\"\n      >\n        {this.errorMessage}\n      </div>\n    );\n  }\n\n  handleComponentBlur(ev: FocusEvent): void {\n    // Do not close or emit custom blur event when blurring to an element inside (wm-option)\n    if (!this.el.contains(ev.relatedTarget as Node)) {\n      this.close(false);\n      this.wmSelectBlurred.emit();\n      this.wmComponentBlurred.emit(); // deprecated\n    }\n  }\n\n  // on search field or select all. keydown on options is handled via events.\n  handleKeyDown(ev: KeyboardEvent) {\n    const el = ev.target as HTMLElement;\n    switch (ev.key) {\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.moveDown(ev.target as HTMLElement);\n        break;\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.moveUp(ev.target as HTMLElement);\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        this.close();\n        break;\n      case \"Enter\":\n        if (el === this.selectAllEl) {\n          ev.preventDefault();\n          this.handleSelectAllClick();\n          this.close();\n        }\n        break;\n      case \" \":\n        if (el === this.selectAllEl) {\n          ev.preventDefault();\n          this.handleSelectAllClick();\n        }\n        break;\n    }\n  }\n\n  debouncedSearch = debounce(() => {\n    this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });\n\n    if (this.filteredOptions.length) {\n      this.announce(this.resultsFoundMessage);\n    } else {\n      this.announce(this.noResultsFoundMessage);\n    }\n  }, 150);\n\n  setButtonText() {\n    this.displayedOptions = this.childOptions\n      .filter((x) => x.selected)\n      .map((y) => (!y.classList.contains(\"hidden\") ? y : this.findCorrespondingOption(y)));\n\n    // handle overflow + counter for multiselect\n    if (this.multiple) {\n      // this is a fixed measurement accounting for the max width of a 3 character overflow counter\n      const overflowCounterWidth = 38;\n      const computedStyle = window.getComputedStyle(this.buttonEl);\n\n      // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually\n      const paddingLeft = parseInt(computedStyle.getPropertyValue(\"padding-left\").slice(0, -2));\n      const paddingRight = parseInt(computedStyle.getPropertyValue(\"padding-right\").slice(0, -2));\n\n      const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;\n\n      let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot!.querySelector(\".option-wrapper\")!.clientWidth);\n\n      let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);\n      this.overflowCount = 0;\n\n      while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {\n        this.overflowCount++;\n        optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];\n        optionsWidths.pop();\n        this.displayedOptions.pop();\n      }\n    }\n  }\n\n  setSelectAllButton() {\n    if (this.allSelected) {\n      this.selectAllEl.textContent = this.deselectAllMessage;\n      this.announce(this.allOptionsSelectedMessage);\n    } else {\n      this.selectAllEl.textContent = this.selectAllMessage;\n      if (this.selectedOptions.length === 0) {\n        this.announce(this.allOptionsDeselectedMessage);\n      }\n    }\n  }\n\n  announce(message: string) {\n    // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\n    if (this.liveRegionEl.textContent === message) {\n      message += \"\\u00A0\";\n    }\n    this.announcement = message;\n  }\n\n  renderButtonText() {\n    if (this.multiple && this.displayedOptions.length < 1) {\n      return <span>{this.placeholder}</span>;\n    } else if (this.multiple && this.allSelected && this.overflowCount > 0) {\n      return this.allSelectedMessage;\n    } else {\n      return this.displayedOptions.map((x, idx) => (\n        <span>\n          {idx > 0 ? \", \" : \"\"}\n          {x.textContent}\n        </span>\n      ));\n    }\n  }\n\n  renderSubinfo() {\n    // multiselects cannot have subinfo for options\n    if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {\n      return <span class=\"subinfo\">{this.selectedOptions[0].subinfo}</span>;\n    }\n  }\n\n  renderOverflowCount() {\n    if (this.overflowCount > 0 && !this.allSelected) {\n      return (\n        <span>\n          <span class=\"overflow-counter\">+{this.overflowCount}</span>\n        </span>\n      );\n    }\n  }\n\n  renderSearchField() {\n    return (\n      <div class=\"search\">\n        <div class=\"searchfield-wrapper\" ref={(el) => (this.searchFieldWrapperEl = el as HTMLInputElement)}>\n          <div class=\"icon\"></div>\n          <input\n            ref={(el) => (this.searchFieldEl = el as HTMLInputElement)}\n            class=\"searchfield\"\n            role=\"combobox\"\n            aria-controls={`list-${this.uid}`}\n            aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n            onKeyDown={(ev) => this.handleKeyDown(ev)}\n            onFocus={() => this.searchFieldWrapperEl.classList.add(\"focus\")}\n            onBlur={(ev) => this.handleSearchFieldBlur(ev)}\n            onInput={() => this.debouncedSearch()}\n            placeholder={this.searchPlaceholder}\n          ></input>\n        </div>\n      </div>\n    );\n  }\n\n  renderSearchFailedMessage() {\n    return <div class=\"search-results-message\">{this.noResultsFoundMessage}</div>;\n  }\n\n  renderSelectAllButton() {\n    if (this.selectAll && this.multiple && this.searchTerm == \"\") {\n      return (\n        <button\n          ref={(el) => (this.selectAllEl = el as HTMLButtonElement)}\n          class=\"select-all\"\n          onClick={() => this.handleSelectAllClick()}\n          onKeyDown={(ev) => this.handleKeyDown(ev)}\n          tabindex=\"-1\"\n        >\n          {this.allSelected ? this.deselectAllMessage : this.selectAllMessage}\n        </button>\n      );\n    }\n  }\n\n  renderDuplicateOptions() {\n    return Array.from(this.el.children).map((option) => {\n      return (\n        <wm-option class=\"duplicate\" selected={(option as HTMLWmOptionElement).selected}>\n          {option.textContent}\n        </wm-option>\n      );\n    });\n  }\n\n  render() {\n    const buttonProps = {\n      id: `selectbtn-${this.uid}`,\n      [\"disabled\"]: this.disabled,\n      [\"aria-controls\"]: `list-${this.uid}`,\n      [\"aria-labelledby\"]: `label-${this.uid} selectbtn-${this.uid}`,\n      [\"aria-describedby\"]: \"wm-errors\",\n      [\"aria-expanded\"]: this.isExpanded ? \"true\" : \"false\",\n      onClick: () => (this.isExpanded ? this.close() : this.open()),\n    };\n\n    return (\n      <Host onBlur={(ev: FocusEvent) => this.handleComponentBlur(ev)}>\n        <div\n          class={`wrapper ${getTextDir()} label-${this.labelPosition} ${\n            this.invalid || this.errorMessage ? \"invalid\" : \"\"\n          }`}\n        >\n          <div class=\"label-wrapper\">\n            <label class=\"label\" id={`label-${this.uid}`} htmlFor={`selectbtn-${this.uid}`}>\n              {this.label}\n              {\n                // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)\n                this.requiredField ? (\n                  <span class=\"required\">\n                    <span class=\"sr-only\">{globalMessages.requiredField}</span>\n                    <span aria-hidden=\"true\">*</span>\n                  </span>\n                ) : (\n                  \"\"\n                )\n              }\n            </label>\n          </div>\n          <div class=\"button-wrapper\">\n            <button\n              {...buttonProps}\n              class={`displayedoption ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n              ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n              onBlur={(ev) => this.handleButtonBlur(ev)}\n              onFocus={() => this.close()}\n            >\n              <span\n                class={\n                  this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0\n                    ? \"overflowcontrol hassubinfo\"\n                    : \"overflowcontrol\"\n                }\n              >\n                <span class=\"button-text\">{this.renderButtonText()}</span>\n                {this.renderSubinfo()}\n              </span>\n              {this.renderOverflowCount()}\n            </button>\n            <div\n              class={`dropdown ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\n              ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\n            >\n              {this.search && this.renderSearchField()}\n              <div\n                id={`list-${this.uid}`}\n                class=\"options-wrapper\"\n                tabindex={-1}\n                role=\"listbox\"\n                aria-multiselectable={this.multiple ? \"true\" : null}\n                aria-labelledby={`label-${this.uid}`}\n                ref={(el) => (this.listboxEl = el as HTMLDivElement)}\n              >\n                {this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage()}\n                {this.renderSelectAllButton()}\n                {this.multiple && this.renderDuplicateOptions()}\n                <slot />\n              </div>\n            </div>\n            {this.renderErrorContainer()}\n            <div\n              id=\"announcement\"\n              aria-live=\"polite\"\n              class=\"sr-only\"\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n            >\n              {this.announcement}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/ripple/p-8c51e9f8.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["privNavigatorItemCss","PrivNavigatorItem","exports","class_1","prototype","handleKeyDown","ev","key","el","this","preventDefault","keydownOnNavItem","emit","navItem","render","selectedClass","selected","focusedClass","focused","h","class","concat"],"sources":["src/components/wm-navigator/priv-navigator-item/priv-navigator-item.scss?tag=priv-navigator-item&encapsulation=shadow","src/components/wm-navigator/priv-navigator-item/priv-navigator-item.tsx"],"sourcesContent":[":host,\npriv-navigator-item {\n  list-style: none;\n  border-bottom: 1px solid #e0dde4;\n  width: 100%;\n  display: block;\n  cursor: pointer;\n\n  .navoption {\n    color: #404248;\n    padding: 0.9375rem 1.25rem;\n    background: #fff;\n    font-size: rem-calc(14);\n\n    &.selected,\n    &:hover {\n      background: #e5e5e5;\n    }\n\n    &.focused:not(.selected) {\n      background: $background;\n      opacity: 1;\n    }\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n  tag: \"priv-navigator-item\",\n  styleUrl: \"priv-navigator-item.scss\",\n  shadow: true,\n})\nexport class PrivNavigatorItem {\n  @Element() el!: any;\n  @Prop({ mutable: true }) selected: boolean = false;\n  @Prop({ mutable: true }) focused: boolean = false;\n  @Prop({ mutable: true }) link: string = \"\";\n  @Event() keydownOnNavItem!: EventEmitter<{\n    navItem: HTMLPrivNavigatorItemElement;\n    key: string;\n  }>;\n\n  @Listen(\"keydown\")\n  handleKeyDown(ev: KeyboardEvent) {\n    const key = ev.key;\n    const el = this.el;\n    if (key !== \"Tab\") {\n      ev.preventDefault();\n    }\n    this.keydownOnNavItem.emit({ navItem: el, key: key });\n  }\n\n  render() {\n    const selectedClass = this.selected ? \"selected\" : \"\";\n    const focusedClass = this.focused ? \"focused\" : \"\";\n\n    return (\n      <div class={`navoption ${selectedClass} ${focusedClass}`}>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":"0JAAA,IAAMA,EAAuB,4f,ICOhBC,EAAiBC,EAAA,iC,yFAEiB,M,aACD,M,UACJ,E,CAOxCC,EAAAC,UAAAC,cAAA,SAAcC,GACZ,IAAMC,EAAMD,EAAGC,IACf,IAAMC,EAAKC,KAAKD,GAChB,GAAID,IAAQ,MAAO,CACjBD,EAAGI,gB,CAELD,KAAKE,iBAAiBC,KAAK,CAAEC,QAASL,EAAID,IAAKA,G,EAGjDJ,EAAAC,UAAAU,OAAA,WACE,IAAMC,EAAgBN,KAAKO,SAAW,WAAa,GACnD,IAAMC,EAAeR,KAAKS,QAAU,UAAY,GAEhD,OACEC,EAAA,OAAKC,MAAO,aAAAC,OAAaN,EAAa,KAAAM,OAAIJ,IACxCE,EAAA,a,uHA1BsB,I"}

package/dist/ripple/p-8db604d2.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as e,g as r}from"./p-1c23de4a.js";import{a}from"./p-888bec42.js";import{k as o,l as n,i as h}from"./p-c6a0f7e5.js";import{g as l}from"./p-a6d6eae7.js";const p=":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";const c=class{constructor(i){t(this,i);this.wmNavigatorLogout=s(this,"wmNavigatorLogout",7);this.retrievedInfo=!this.loadFromUserinfo;this.parsedProducts=[];this.openRight=false;this.userName=undefined;this.email=undefined;this.authType=1;this.connectionName=undefined;this.logoutUrl=undefined;this.products=undefined;this.loadFromUserinfo=false;this.isOpen=false;this.isTabbing=false;this.itemIndexToFocus=0}async componentWillLoad(){if(!this.userName){console.error("wm-navigator: user-name is a required property.")}await this.parseData();this.setFocusIndex()}async parseData(){if(!!this.loadFromUserinfo){await l("/platform/navigator/userinfo").then((t=>{this.email=t.email;this.currentProductId=t.current_product_id;this.parsedProducts=this.productKeysToCamelCase(t.products);this.logoutUrl=this.logoutUrl?this.logoutUrl:t.logout_url;this.connectionName=this.connectionName?this.connectionName:t.connection_name;if(!!this.email&&!!this.currentProductId){this.retrievedInfo=true}})).catch((t=>{console.error(t)}))}else{this.currentProductId=a(this.el);if(!!this.products){if(typeof this.products==="string"){this.parsedProducts=JSON.parse(this.products)}else{this.parsedProducts=this.products}this.parsedProducts=this.productKeysToCamelCase(this.parsedProducts)}}this.parsedProducts.sort(((t,s)=>t.name<s.name?-1:1))}productKeysToCamelCase(t){t=t.map((t=>{const s=Object.keys(t);let i={};s.forEach((s=>{i[o(s)]=t[s]}));return i}));return t}setFocusIndex(){if(this.parsedProducts.length>1){const t=this.getProduct(this.currentProductId);if(t){this.itemIndexToFocus=this.parsedProducts.indexOf(t)}}}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleKeys(t){switch(t.key){case"Escape":t.preventDefault();this.closeMenu();break;case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen){this.itemIndexToFocus=n(this.itemIndexToFocus,t.key,this.navigatorItems.length);this.openMenu()}break}}handleKeydown(t){const s=t.detail.key;const i=t.detail.navItem;switch(s){case"Tab":this.closeMenu();break;case"Enter":case" ":i.click();break;case"ArrowDown":case"ArrowUp":const t=this.itemIndexToFocus;this.itemIndexToFocus=n(this.itemIndexToFocus,s,this.navigatorItems.length);this.focusItem();this.unfocusItem(t);break}}handleClick(t){const s=t.target===this.el||this.el.contains(t.target);if(!s&&this.isOpen){this.closeMenu()}}handleButtonClick(){this.isOpen?this.closeMenu():this.openMenu()}openMenu(){if(this.wrapperEl){const t=this.wrapperEl.clientWidth;const s=this.el.getBoundingClientRect().left;const i=document.documentElement.clientWidth-this.el.getBoundingClientRect().right;this.openRight=t>s&&i>s}this.isOpen=true;this.focusItem()}closeMenu(){this.isOpen=false;this.buttonFocusHandler();this.unfocusItem(this.itemIndexToFocus);this.setFocusIndex()}focusItem(){const t=this.navigatorItems[this.itemIndexToFocus];t.tabIndex=0;t.focused=true;window.requestAnimationFrame((()=>t.focus()))}unfocusItem(t){const s=this.navigatorItems[t];s.tabIndex=-1;s.focused=false}buttonFocusHandler(){const t=this.el.shadowRoot.querySelector("priv-navigator-button");const s=t.shadowRoot.querySelector("button");window.requestAnimationFrame((()=>s.focus()))}renderUserInfo(){return i("div",{class:"user",id:"wm-nav-user","aria-label":h.formatMessage({id:"navigator.userinfoLabel",defaultMessage:"for {name}, email {email}"},{name:this.userName,email:this.email})},i("p",null,this.userName),i("p",null,this.email))}setAltText(){if(this.parsedProducts.length>1){return h.formatMessage({id:"navigator.userinfoAndProductNavigator",defaultMessage:"User information and product navigator"})}else{return h.formatMessage({id:"navigator.userinfo",defaultMessage:"User information"})}}renderHeading(){return i("h2",null,h.formatMessage({id:"navigator.watermarkApps",defaultMessage:"Watermark Apps",description:"Applications made by Watermark Insights"}))}renderList(){return i("ul",{role:"listbox","aria-label":`${h.formatMessage({id:"navigator.WatermarkAppNavigation",defaultMessage:"Watermark App Navigation",description:"list of applications by Watermark Insights"})}`,"aria-describedby":"wm-nav-user"},this.parsedProducts.length>1&&this.renderProductOptions(),this.renderLogoutOption())}renderProductOptions(){return this.parsedProducts.map((t=>{let s,e,r,a;s=t.name;e=t.iconUrl;a=this.setProductOnClick(t.id);if(!!s&&!!e){r=this.currentProductId===t.id;return i("priv-navigator-item",{selected:r,id:t.id,onClick:a,role:"option","aria-label":s},i("img",{src:e,alt:s}))}}))}setProductOnClick(t){const s=this.getProduct(t);if(this.currentProductId===t){return()=>{}}else if(s){if(!!this.loadFromUserinfo||this.authType===2){return()=>window.location.href=s.linkUrl}else if(this.authType===3){const t=this.connectionName?`/?connection_name=${this.connectionName}`:"";return()=>window.location.href=s.samlLinkUrl+t}}}renderLogoutOption(){return i("priv-navigator-item",{class:"logout",selected:!(this.parsedProducts.length>1),id:"nav-logout",onClick:this.setLogoutOnclick(),role:"option"},i("span",{class:"logout"},h.formatMessage({id:"navigator.logout",defaultMessage:"Log Out"})))}setLogoutOnclick(){return()=>{this.wmNavigatorLogout.emit();if(this.logoutUrl){window.location.href=this.logoutUrl}}}get navigatorItems(){return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"))}getProduct(t){return this.parsedProducts.find((s=>s.id===t))}render(){return this.retrievedInfo?i(e,{class:this.isTabbing?"user-is-tabbing":""},i("priv-navigator-button",{expanded:this.isOpen,altText:this.setAltText(),isTabbing:this.isTabbing}),i("div",{class:`wrapper ${this.isOpen?"":"hide"} ${this.openRight?"right":""}`,ref:t=>this.wrapperEl=t},this.renderUserInfo(),this.parsedProducts.length>1&&this.renderHeading(),this.renderList())):""}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{products:["parseData"]}}};c.style=p;export{c as wm_navigator};
-//# sourceMappingURL=p-8db604d2.entry.js.map

package/dist/ripple/p-8db604d2.entry.js.map

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

package/dist/ripple/p-91deb45f.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmActionMenuCss","ActionMenu","exports","this","openUp","keysSoFar","searchIndex","keyClear","Object","defineProperty","class_1","prototype","el","itemsEl","shouldShiftRight","Array","from","querySelectorAll","tempActionMenuType","actionMenuType","buttonType","handleClickedItem","close","handleKeyUp","ev","moveUp","target","handleKeyDown","moveDown","detail","handleHomeKey","focusFirstItem","handleEndKey","focusLastItem","handleTabKey","isExpanded","handleEscKey","wmButtonEl","focus","handleKey","_this","key","preventDefault","open","window","requestAnimationFrame","handleMenuitemBlur","toElOrChild","relatedTarget","contains","event","CustomEvent","dispatchEvent","handleButtonBlur","stopPropagation","componentWillLoad","uid","id","generateId","console","warn","componentDidLoad","buttonText","error","tooltip","wmActionMenuLoaded","emit","menuLoaded","index","childItems","indexOf","focusItem","length","disabled","shouldOpenUp","classList","remove","returnFocus","forEach","i","focused","setTimeout","add","document","activeElement","tagName","item","map","findAndFocusItem","character","toUpperCase","clearKeysSoFarAfterDelay","nextMatch","findMatchInRange","clearTimeout","bind","list","startIndex","endIndex","n","label","innerText","render","h","Host","onBlur","class","getTextDir","internalButtonType","darkMode","undefined","labelForIdenticalButtons","icon","concat","onClick","ref","tooltipPosition","horizontalPosition","tabindex","role","wmMenuitemCss","Menuitem","descriptionCharLimit","class_2","toggleKeyingOn","isKeying","toggleKeyingOff","handleKeydown","modifierKeyUsed","altKey","ctrlKey","metaKey","isSingleCharacter","test","isCharacterEntry","wmKeyUpPressed","wmKeyDownPressed","click","wmEscKeyPressed","wmHomeKeyPressed","wmEndKeyPressed","wmTabKeyPressed","wmLetterPressed","handleClick","wmMenuitemClicked","handleBlur","wmMenuitemBlurred","setOnClick","onclick","onClickFunc","getIconCodeFromName","description","iconEl","innerHTML"],"sources":["src/components/wm-action-menu/wm-action-menu.scss?tag=wm-action-menu&encapsulation=shadow","src/components/wm-action-menu/wm-action-menu.tsx","src/components/wm-menuitem/wm-menuitem.scss?tag=wm-menuitem&encapsulation=shadow","src/components/wm-menuitem/wm-menuitem.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-block;\n  width: -moz-fit-content;\n  width: fit-content;\n  color: #575195;\n  font-family: inherit;\n\n  .sr-only {\n    @include srOnly;\n  }\n}\n\n:host(:focus) {\n  outline: none;\n}\n\nwm-action-menu:focus {\n  outline: none;\n}\n\n.dropdown {\n  position: absolute;\n  padding: 0;\n  margin: rem-calc(4) 0;\n  border-radius: 3px 3px 3px 3px;\n  min-width: rem-calc(183);\n  @include scale($xVal: 1, $yVal: 0);\n  @include transition(transform 0.25s ease);\n  @include transformOrigin(center top);\n  visibility: hidden;\n\n  &:focus {\n    outline: none;\n  }\n\n  @include box-shadow(0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2));\n  background: #fff;\n  z-index: 10;\n  text-align: left;\n\n  &.open {\n    @include scale($xVal: 1, $yVal: 1);\n    visibility: visible;\n  }\n\n  &.open-up {\n    bottom: 2.5rem;\n    top: auto;\n    @include transformOrigin(center bottom);\n  }\n\n  &.right {\n    // anchoring to left corner means it opens on the right side\n    left: 0;\n  }\n\n  &.left {\n    right: 0;\n  }\n\n  white-space: nowrap;\n}\n","import { h, Component, Element, Listen, Prop, State, Event, EventEmitter, Host } from \"@stencil/core\";\nimport { generateId, getTextDir, shouldOpenUp, shouldShiftRight } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-action-menu\",\n  styleUrl: \"wm-action-menu.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class ActionMenu {\n  @Element() el!: HTMLWmActionMenuElement;\n  private wmButtonEl!: HTMLWmButtonElement;\n  private itemsEl?: HTMLDivElement;\n  private uid!: string;\n  private openUp: boolean = false;\n  get horizontalPosition(): \"right\" | \"left\" {\n    return !!this.el && !!this.itemsEl && shouldShiftRight(this.el, this.itemsEl!) ? \"right\" : \"left\";\n  }\n  get childItems(): HTMLWmMenuitemElement[] {\n    return Array.from(this.el.querySelectorAll(\"wm-menuitem\"));\n  }\n  get internalButtonType(): string {\n    return this.tempActionMenuType === \"icon\" || this.tempActionMenuType === \"text\"\n      ? this.tempActionMenuType + \"only\"\n      : this.tempActionMenuType;\n  }\n\n  @State() isExpanded = false;\n  @Prop() tooltipPosition?:\n    | \"top\"\n    | \"bottom\"\n    | \"left\"\n    | \"right\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"top-right\"\n    | \"top-left\";\n  @Prop() actionMenuType: \"icon\" | \"text\" | \"selector\" | \"selector-primary\" | null = null;\n  @Prop() buttonType: \"icon\" | \"text\" | \"selector\" | null = null; // deprecated in favor of actionMenuType\n  get tempActionMenuType(): \"icon\" | \"text\" | \"selector\" | \"selector-primary\" {\n    // uses of this getter should be replaced with this.actionMenuType when buttonType is fully phased out\n    // don't forget to reset this.actionMenuTypes's default value to icon\n    return this.actionMenuType || this.buttonType || \"icon\";\n  }\n  @Prop() buttonText?: string;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() tooltip?: string;\n  @Prop() labelForIdenticalButtons?: string;\n  @Prop() darkMode?: boolean;\n  @Event({ composed: true, bubbles: true }) wmActionMenuLoaded!: EventEmitter;\n  @Event({ composed: true, bubbles: true }) menuLoaded!: EventEmitter; // deprecated in favor of wmActionMenuLoaded\n\n  private keysSoFar: string = \"\";\n  private searchIndex: number = 0;\n  private keyClear: number | null = null;\n\n  @Listen(\"wmMenuitemClicked\")\n  handleClickedItem() {\n    this.close();\n  }\n\n  @Listen(\"wmKeyUpPressed\")\n  handleKeyUp(ev: CustomEvent) {\n    this.moveUp(ev.target as HTMLWmMenuitemElement);\n  }\n\n  @Listen(\"wmKeyDownPressed\")\n  handleKeyDown(ev: CustomEvent) {\n    this.moveDown(ev.detail);\n  }\n\n  @Listen(\"wmHomeKeyPressed\")\n  handleHomeKey() {\n    this.focusFirstItem();\n  }\n\n  @Listen(\"wmEndKeyPressed\")\n  handleEndKey() {\n    this.focusLastItem();\n  }\n\n  @Listen(\"wmTabKeyPressed\")\n  handleTabKey() {\n    if (this.isExpanded) {\n      this.close();\n    }\n  }\n\n  @Listen(\"wmEscKeyPressed\")\n  handleEscKey() {\n    this.close();\n    this.wmButtonEl.focus();\n  }\n\n  @Listen(\"keydown\")\n  handleKey(ev: KeyboardEvent) {\n    switch (ev.key) {\n      case \"ArrowDown\":\n        if (!this.isExpanded) {\n          ev.preventDefault();\n          this.open();\n          window.requestAnimationFrame(() => this.focusFirstItem());\n        }\n        break;\n      case \"ArrowUp\":\n        if (!this.isExpanded) {\n          ev.preventDefault();\n          this.open();\n          window.requestAnimationFrame(() => this.focusLastItem());\n        }\n        break;\n    }\n  }\n\n  @Listen(\"wmMenuitemBlurred\")\n  handleMenuitemBlur(ev: CustomEvent): void {\n    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget as Node);\n    // if the Menuitem is blurred to something other than the component, emit a blur event with the appropriate relatedTarget\n    // keeps our component's blur events accurate, and closes when focusing browser address bar\n    if (!toElOrChild) {\n      const event = new CustomEvent(\"blur\");\n      // @ts-ignore\n      event.relatedTarget = ev.detail.relatedTarget;\n      this.el.dispatchEvent(event);\n    }\n  }\n\n  handleButtonBlur(ev: FocusEvent) {\n    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget as Node);\n    if (toElOrChild) {\n      // do not emit a blur event when opening the dropdown and focusing the Menuitems\n      ev.stopPropagation();\n    }\n  }\n\n  componentWillLoad() {\n    this.uid = this.el.id ? this.el.id : generateId();\n\n    if (this.buttonType) {\n      console.warn(\n        \"wm-action-menu: button-type has been deprecated as of v3.1.0. Please use action-menu-type instead.\"\n      );\n    }\n  }\n\n  componentDidLoad() {\n    if (this.tempActionMenuType !== \"icon\" && !this.buttonText) {\n      console.error(\n        \"wm-action-menu should have a valid button-text property when action-menu-type is set to 'text' or 'selector'\"\n      );\n    }\n\n    if (this.tempActionMenuType === \"icon\" && !this.tooltip) {\n      console.error(\"wm-action-menu should have a valid tooltip when action-menu-type is set to 'icon'\");\n    }\n\n    this.wmActionMenuLoaded.emit();\n    this.menuLoaded.emit(); // deprecated\n  }\n\n  moveUp(el: HTMLWmMenuitemElement) {\n    const index = this.childItems.indexOf(el);\n    if (index === 0) {\n      this.focusLastItem();\n    } else {\n      this.focusItem(this.childItems[index - 1]);\n    }\n  }\n\n  moveDown(el: HTMLWmMenuitemElement) {\n    const index = this.childItems.indexOf(el);\n    if (index === this.childItems.length - 1) {\n      this.focusFirstItem();\n    } else {\n      this.focusItem(this.childItems[index + 1]);\n    }\n  }\n\n  open() {\n    if (!this.disabled) {\n      this.openUp = shouldOpenUp(this.el, this.itemsEl!);\n      // action menu usually is on the right side of the screen,\n      // so dropdown opens to the left (is anchored on the right corner)\n      // if there is not enough space on the left and enough on the right though,\n      // it will open on the right side\n\n      this.isExpanded = true;\n      this.itemsEl!.classList.remove(\"hidden\");\n      window.requestAnimationFrame(() => this.focusFirstItem());\n    }\n  }\n\n  close(returnFocus: boolean = true) {\n    this.isExpanded = false;\n    this.childItems.forEach((i) => (i.focused = false));\n\n    window.setTimeout(() => {\n      this.itemsEl!.classList.add(\"hidden\");\n    }, 150);\n\n    window.setTimeout(() => {\n      // if dev omits to assign focus after an action is triggered,\n      // the component brings the focus back on the button\n      // Focus will only be lost (and go to the body) once the menuitem\n      // is not visible anymore, so we need to wait for the transition to\n      // finish and the hidden class to be applied.\n      // also checking if focus stayed on the menuitem\n      if (\n        returnFocus &&\n        (document.activeElement!.tagName === \"BODY\" || document.activeElement!.tagName === \"WM-MENUITEM\")\n      ) {\n        this.wmButtonEl.focus();\n      }\n    }, 250);\n  }\n\n  focusItem(item: HTMLWmMenuitemElement) {\n    this.childItems.map((i: HTMLWmMenuitemElement) => (i.focused = i === item));\n    item.focus && item.focus();\n  }\n\n  focusFirstItem() {\n    this.focusItem(this.childItems[0]);\n  }\n\n  focusLastItem() {\n    this.focusItem(this.childItems[this.childItems.length - 1]);\n  }\n\n  @Listen(\"wmLetterPressed\")\n  findAndFocusItem(ev: CustomEvent) {\n    const character = ev.detail.toUpperCase();\n    this.focusFirstItem();\n    if (!this.keysSoFar) {\n      for (var i = 0; i < this.childItems.length; i++) {\n        if (this.childItems[i] === document.activeElement) {\n          this.searchIndex = i;\n        }\n      }\n    }\n\n    this.keysSoFar += character;\n    this.clearKeysSoFarAfterDelay();\n\n    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);\n    if (!nextMatch) {\n      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);\n    }\n    if (nextMatch) {\n      this.focusItem(nextMatch as HTMLWmMenuitemElement);\n    }\n  }\n\n  clearKeysSoFarAfterDelay() {\n    if (this.keyClear) {\n      window.clearTimeout(this.keyClear);\n      this.keyClear = null;\n    }\n    this.keyClear = window.setTimeout(\n      function (this: ActionMenu) {\n        this.keysSoFar = \"\";\n        this.keyClear = null;\n      }.bind(this),\n      500\n    );\n  }\n\n  findMatchInRange(list: HTMLWmMenuitemElement[], startIndex: number, endIndex: number) {\n    // Find the first item starting with the keysSoFar substring, searching in\n    // the specified range of items\n    for (var n = startIndex; n < endIndex; n++) {\n      var label = list[n].innerText;\n      if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {\n        return list[n];\n      }\n    }\n    return null;\n  }\n\n  render() {\n    return (\n      <Host onBlur={() => this.close(false)}>\n        <div class={getTextDir()}>\n          <wm-button\n            button-type={this.internalButtonType}\n            tooltip={this.tooltip}\n            custom-background={this.darkMode ? \"dark\" : undefined}\n            label-for-identical-buttons={this.labelForIdenticalButtons}\n            icon={this.tempActionMenuType === \"icon\" ? \"f1d9\" : \"\"}\n            id={`menubtn-${this.uid}`}\n            onClick={() => (this.isExpanded ? this.close() : this.open())}\n            onBlur={(ev) => this.handleButtonBlur(ev)}\n            disabled={this.disabled}\n            ref={(el) => (this.wmButtonEl = el as HTMLWmButtonElement)}\n            tooltip-position={this.tooltipPosition || this.horizontalPosition}\n            aria-haspopup=\"true\"\n            aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n            aria-controls={`menu-${this.uid}`}\n          >\n            {this.buttonText}\n          </wm-button>\n          <div\n            class={`dropdown ${this.openUp ? \"open-up\" : \"\"} ${this.horizontalPosition} ${\n              this.isExpanded ? \"open\" : \"\"\n            } hidden`}\n            id={`menu-${this.uid}`}\n            tabindex={-1}\n            role=\"menu\"\n            ref={(el) => (this.itemsEl = el)}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host,\nwm-menuitem {\n  contain: content;\n  font-family: inherit;\n\n  .wrapper {\n    display: block;\n    min-width: rem-calc(140);\n    cursor: pointer;\n    padding: rem-calc(20);\n    border-radius: 0px 0px 0px 0px;\n    background: #fff;\n    font-family: inherit;\n    font-weight: 500;\n    list-style: none;\n    border-bottom: 2px solid rgba(#2e1b46, 0.05);\n    color: $button-default-text;\n    font-weight: 700;\n\n    &:focus,\n    &.focus {\n      outline: none;\n      background: #f4f3f6;\n    }\n\n    &:hover {\n      background: #f4f3f6;\n      outline: none;\n    }\n\n    .description {\n      color: $charcoal;\n      font-size: rem-calc(14);\n      padding-top: rem-calc(8);\n      white-space: normal;\n      font-weight: 400;\n    }\n\n    &[aria-disabled=\"true\"] {\n      font-style: italic;\n      color: #6b6b6b;\n    }\n\n    &:not(:last-child) {\n      border-bottom: 2px solid rgba(#2e1b46, 0.05);\n    }\n  }\n\n  ::slotted {\n    font-family: inherit;\n  }\n\n  .mdi {\n    @include mdi-icon;\n    display: inline-block;\n    margin-right: rem-calc(10);\n    pointer-events: none;\n  }\n}\n\n:host(:focus),\nwm-menuitem:focus {\n  outline: none;\n  background: #f4f3f6;\n}\n\n//Set pointer events to none on host and element in shadow dom to disable menuitem\n:host([aria-disabled=\"true\"]),\nwm-menuitem[aria-disabled=\"true\"] {\n  pointer-events: none;\n}\n","import { h, Component, Element, Event, EventEmitter, Listen, Prop, State, Host, Watch } from \"@stencil/core\";\nimport { getIconCodeFromName } from \"../../global/interfaces\";\n\n@Component({\n  tag: \"wm-menuitem\",\n  styleUrl: \"wm-menuitem.scss\",\n  shadow: true,\n})\nexport class Menuitem {\n  @Element() el!: HTMLWmMenuitemElement;\n  private iconEl?: HTMLSpanElement;\n\n  @Prop() disabled = false;\n  @Prop() focused = false;\n  @Prop({ mutable: true }) icon?: string = undefined;\n  @Prop() description?: string = undefined;\n\n  @Event() wmMenuitemClicked!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmKeyUpPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmKeyDownPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmEscKeyPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmEndKeyPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmPageDownItems!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmPageUpItems!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmTabKeyPressed!: EventEmitter<HTMLWmMenuitemElement>;\n  @Event() wmLetterPressed!: EventEmitter;\n  @Event() wmMenuitemBlurred!: EventEmitter<{ relatedTarget: EventTarget | null }>;\n  private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\n  private descriptionCharLimit = 100;\n\n  @State() isKeying: boolean = false;\n\n  @Listen(\"wmUserIsKeying\", { target: \"window\" })\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleKeyingOn() {\n    this.isKeying = true;\n  }\n\n  @Listen(\"wmUserIsNotKeying\", { target: \"window\" })\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleKeyingOff() {\n    this.isKeying = false;\n  }\n\n  @Listen(\"keydown\")\n  handleKeydown(ev: KeyboardEvent) {\n    const modifierKeyUsed = ev.altKey || ev.ctrlKey || ev.metaKey;\n    const isSingleCharacter = /^.$/.test(ev.key);\n    const isCharacterEntry = isSingleCharacter && !modifierKeyUsed;\n    switch (ev.key) {\n      case \"ArrowUp\":\n        ev.preventDefault();\n        this.wmKeyUpPressed.emit(this.el as HTMLWmMenuitemElement);\n        break;\n      case \"ArrowDown\":\n        ev.preventDefault();\n        this.wmKeyDownPressed.emit(this.el as HTMLWmMenuitemElement);\n        break;\n      case \"Enter\":\n        ev.preventDefault();\n        if (!this.disabled) {\n          this.el.click();\n        }\n        break;\n      case \"Escape\":\n        ev.preventDefault();\n        ev.stopPropagation(); // prevents closing of parent modal\n        this.wmEscKeyPressed.emit();\n        break;\n      case \"Home\":\n        ev.preventDefault();\n        this.wmHomeKeyPressed.emit();\n        break;\n      case \"End\":\n        ev.preventDefault();\n        this.wmEndKeyPressed.emit();\n        break;\n      case \"Tab\":\n        this.wmTabKeyPressed.emit();\n        break;\n      default:\n        if (isCharacterEntry) {\n          ev.preventDefault();\n          this.wmLetterPressed.emit(ev.key);\n        }\n    }\n  }\n\n  @Listen(\"click\")\n  handleClick() {\n    if (!this.disabled) {\n      this.wmMenuitemClicked.emit();\n    }\n  }\n\n  @Listen(\"blur\")\n  handleBlur(ev: FocusEvent) {\n    this.wmMenuitemBlurred.emit({ relatedTarget: ev.relatedTarget });\n  }\n\n  @Watch(\"disabled\")\n  setOnClick() {\n    if (this.disabled && this.el.onclick) {\n      this.onClickFunc = this.el.onclick;\n      this.el.onclick = null;\n    } else if (!this.disabled && this.onClickFunc) {\n      this.el.onclick = this.onClickFunc;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.icon) {\n      // in case a name was passed instead of a code, convert it to code (for backwards compatibility)\n      this.icon = getIconCodeFromName(this.icon);\n    }\n\n    if (this.description) {\n      if (this.description.length > this.descriptionCharLimit) {\n        console.error(`wm-menuitem description is above the character limit of ${this.descriptionCharLimit}`);\n      }\n      if (this.icon) {\n        console.error(\"wm-menuitems with descriptions do not support the use of icons\");\n      }\n    }\n\n    this.setOnClick();\n  }\n\n  componentDidLoad() {\n    if (this.icon) {\n      this.iconEl!.classList.add(\"mdi\");\n      this.iconEl!.innerHTML = `&#x${this.icon};`;\n    }\n  }\n\n  render() {\n    return (\n      <Host tabindex={-1} role=\"menuitem\" aria-disabled={this.disabled ? \"true\" : null}>\n        <div\n          class={`wrapper ${this.focused && this.isKeying ? \"focus\" : \"\"}`}\n          aria-disabled={this.disabled ? \"true\" : null}\n        >\n          <span ref={(el) => (this.iconEl = el)} />\n          <slot />\n          {this.description ? <div class=\"description\">{this.description}</div> : \"\"}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}