@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/ripple/p-219fbe2b.system.entry.js.map

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

package/dist/ripple/p-21bb563a.system.entry.js.map

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

package/dist/ripple/p-241d4d41.system.entry.js

@@ -1,2 +0,0 @@
-var __awaiter=this&&this.__awaiter||function(e,t,s,i){function r(e){return e instanceof s?e:new s((function(t){t(e)}))}return new(s||(s=Promise))((function(s,n){function o(e){try{l(i.next(e))}catch(e){n(e)}}function a(e){try{l(i["throw"](e))}catch(e){n(e)}}function l(e){e.done?s(e.value):r(e.value).then(o,a)}l((i=i.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var s={label:0,sent:function(){if(n[0]&1)throw n[1];return n[1]},trys:[],ops:[]},i,r,n,o;return o={next:a(0),throw:a(1),return:a(2)},typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function a(e){return function(t){return l([e,t])}}function l(a){if(i)throw new TypeError("Generator is already executing.");while(o&&(o=0,a[0]&&(s=0)),s)try{if(i=1,r&&(n=a[0]&2?r["return"]:a[0]?r["throw"]||((n=r["return"])&&n.call(r),0):r.next)&&!(n=n.call(r,a[1])).done)return n;if(r=0,n)a=[a[0]&2,n.value];switch(a[0]){case 0:case 1:n=a;break;case 4:s.label++;return{value:a[1],done:false};case 5:s.label++;r=a[1];a=[0];continue;case 7:a=s.ops.pop();s.trys.pop();continue;default:if(!(n=s.trys,n=n.length>0&&n[n.length-1])&&(a[0]===6||a[0]===2)){s=0;continue}if(a[0]===3&&(!n||a[1]>n[0]&&a[1]<n[3])){s.label=a[1];break}if(a[0]===6&&s.label<n[1]){s.label=n[1];n=a;break}if(n&&s.label<n[2]){s.label=n[2];s.ops.push(a);break}if(n[2])s.ops.pop();s.trys.pop();continue}a=t.call(e,s)}catch(e){a=[6,e];r=0}finally{i=n=0}if(a[0]&5)throw a[1];return{value:a[0]?a[1]:void 0,done:true}}};System.register(["./p-7b2fc615.system.js","./p-bc28c815.system.js"],(function(e){"use strict";var t,s,i,r,n,o;return{setters:[function(e){t=e.r;s=e.c;i=e.h;r=e.H;n=e.g},function(e){o=e.i}],execute:function(){var a=':host,wm-search{width:100%;font-size:0.875rem}:host *,wm-search *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wm-search-wrapper,wm-search .wm-search-wrapper{border-radius:3px;position:relative;border:1px solid rgba(35, 35, 35, 0.6);display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}:host .wm-search-wrapper .search-icon,wm-search .wm-search-wrapper .search-icon{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;font-size:1.0625rem;position:absolute;left:0.4375rem}:host .wm-search-wrapper input,wm-search .wm-search-wrapper input{border:none;height:40px;padding:0 1.75rem;background:transparent;overflow:visible;width:100%;-ms-flex:1;flex:1;font-family:inherit}:host .wm-search-wrapper input:focus,wm-search .wm-search-wrapper input:focus{outline:none}:host .wm-search-wrapper.focus,wm-search .wm-search-wrapper.focus{-webkit-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;border-color:#20cbd4;border-radius:3px}:host .find,wm-search .find{min-height:3rem}:host .find input,wm-search .find input{padding:16px 8px 16px 28px}:host .find .wm-find-elements,wm-search .find .wm-find-elements{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;padding-right:16px}:host .find .wm-find-elements wm-button+wm-button,wm-search .find .wm-find-elements wm-button+wm-button{margin-left:0.25rem}:host .find .wm-find-elements .results,wm-search .find .wm-find-elements .results{margin-right:0.5rem;font-style:italic}:host .sr-only,wm-search .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}:host .show-for-tabbers,wm-search .show-for-tabbers{all:unset;color:#575195;text-decoration:none;font-weight:500;font-size:0.875rem;margin:10px 0}:host .show-for-tabbers:hover,wm-search .show-for-tabbers:hover{background:-webkit-gradient(linear, left top, left bottom, from(#575195), to(#575195)) no-repeat;background:linear-gradient(#575195, #575195) no-repeat;background-size:100% 1px;background-position:0 1.2em;padding-bottom:0.2em}:host .show-for-tabbers:focus,wm-search .show-for-tabbers:focus{outline:none;background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1.2em;padding-bottom:0.2em}';var l=e("wm_search",function(){function e(e){t(this,e);this.wmSearchBrowseResults=s(this,"wmSearchBrowseResults",7);this.wmBrowseSearchResults=s(this,"wmBrowseSearchResults",7);this.wmSearchValueChanged=s(this,"wmSearchValueChanged",7);this.wrapperEl=null;this.linkEl=null;this.searchType="basic";this.disabled=false;this.placeholder="";this.label="";this.numResults=0;this.value="";this.isTabbing=false;this.highlightedId="";this.highlightedName=null;this.highlightedNum=0;this.previousBlurredValue="";this.parentModal=undefined;this.announcement=""}Object.defineProperty(e.prototype,"resultCount",{get:function(){var e="";var t=o.formatMessage({id:"search.resultsFound",defaultMessage:"{numResults, plural, =0 {No results} one {1 result} other {# results}} found"},{numResults:this.numResults});var s=o.formatMessage({id:"search.xOfYResults",defaultMessage:"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}"},{numResults:this.numResults,current:this.highlightedNum});if(this.searchType==="basic"){e=t}else if(this.searchType==="find"){e=s}return e},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true;this.linkEl&&this.linkEl.classList.remove("sr-only");this.linkEl&&this.linkEl.classList.add("show-for-tabbers")};e.prototype.toggleTabbingOff=function(){this.isTabbing=false;this.linkEl&&this.linkEl.classList.add("sr-only");this.linkEl&&this.linkEl.classList.remove("show-for-tabbers")};e.prototype.componentWillLoad=function(){if(this.placeholder===""){console.error("You must set the placeholder property for the wm-search component.")}if(this.label===""){console.error("You must set the label property for the wm-search component.")}this.hookToModal()};e.prototype.hookToModal=function(){var e=this;var t=this.el;while(!!t){if(t.tagName==="WM-MODAL"){this.parentModal=t}t=t.parentElement}if(this.parentModal){var s=["wmCloseTriggered","wmPrimaryTriggered","wmSecondaryTriggered"];s.map((function(t){e.parentModal.addEventListener(t,(function(){e.updateValue("")}))}))}};e.prototype.updateValue=function(e){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.value=e;this.resetHighlightCountToStart();if(this.value){this.announceChanges()}return[2]}))}))};e.prototype.resetHighlightCountToStart=function(){if(this.searchType==="find"){this.highlightedNum=this.numResults?1:0}};e.prototype.announce=function(e){if(this.resultsLiveRegion.textContent===e){e+=" "}this.announcement=e};e.prototype.announceChanges=function(){var e=this;window.requestAnimationFrame((function(){var t=e.resultCount;if(e.searchType==="find"&&e.highlightedName){t+=", ".concat(e.highlightedName)}e.announce(t)}))};e.prototype.changeHighlightedNum=function(e){if(this.numResults){if(e<1){this.highlightedNum=this.numResults}else if(e>this.numResults){this.highlightedNum=1}else{this.highlightedNum=e}this.wmSearchBrowseResults.emit({position:this.highlightedNum});this.wmBrowseSearchResults.emit({position:this.highlightedNum});this.announceChanges()}};e.prototype.addFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.add("focus")}};e.prototype.removeFocusStyle=function(){if(this.wrapperEl){this.wrapperEl.classList.remove("focus")}};e.prototype.handleBlur=function(){this.removeFocusStyle();if(this.previousBlurredValue!==this.value){this.wmSearchValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value};e.prototype.renderResultsAndBrowseButtons=function(){var e=this;return i("div",{class:"wm-find-elements"},i("div",{id:"results-display",class:"results"},this.resultCount),i("div",{class:"wm-button-collection"},i("wm-button",{"button-type":"icononly",icon:"f05d",tooltip:o.formatMessage({id:"global.previous",description:"button text",defaultMessage:"previous"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum-1)},disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":o.formatMessage({id:"search.previousResult",defaultMessage:"Press to hear previous matching result"})}),i("wm-button",{"button-type":"icononly",icon:"f045",tooltip:o.formatMessage({id:"global.next",description:"button text",defaultMessage:"next"}),"tooltip-position":"bottom",onClick:function(){return e.changeHighlightedNum(e.highlightedNum+1)},disabled:this.disabled||this.numResults<2,"label-for-identical-buttons":o.formatMessage({id:"search.nextResult",defaultMessage:"Press to hear next matching result"})})))};e.prototype.renderJumpToLink=function(){var e=this;if(this.numResults&&this.highlightedId){return i("a",{ref:function(t){return e.linkEl=t},href:"#".concat(this.highlightedId),class:"sr-only"},o.formatMessage({id:"search.jumpToResult",defaultMessage:"Jump to search result in list"}))}else{return null}};e.prototype.render=function(){var e=this;return i(r,null,i("div",{id:"wm-search-wrapper",class:"wm-search-wrapper ".concat(this.searchType),ref:function(t){return e.wrapperEl=t}},i("input",{disabled:this.disabled,id:"wm-search-input",placeholder:this.placeholder,"aria-label":"".concat(this.label?this.label+". ":"").concat(o.formatMessage({id:"search.typeToFilterResults",defaultMessage:"Type to filter the results"})),onInput:function(t){return e.updateValue(t.target.value)},onFocus:function(){return e.addFocusStyle()},onBlur:function(){return e.handleBlur()},"aria-autocomplete":"none",autocomplete:"off",value:this.value}),i("span",{class:"mdi search-icon"},String.fromCodePoint(parseInt("0xf349"))),this.searchType==="find"&&this.renderResultsAndBrowseButtons(),i("div",{id:"wm-search-live",class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:function(t){return e.resultsLiveRegion=t}},this.announcement)),this.searchType==="find"&&this.renderJumpToLink())};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return n(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{numResults:["resetHighlightCountToStart"]}},enumerable:false,configurable:true});return e}());l.style=a}}}));
-//# sourceMappingURL=p-241d4d41.system.entry.js.map

package/dist/ripple/p-241d4d41.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmSearchCss","Search","exports","this","wrapperEl","linkEl","Object","defineProperty","class_1","prototype","message","basicMessage","intl","formatMessage","id","defaultMessage","numResults","findMessage","current","highlightedNum","searchType","toggleTabbingOn","isTabbing","classList","remove","add","toggleTabbingOff","componentWillLoad","placeholder","console","error","label","hookToModal","_this","el","tagName","parentModal","parentElement","events","map","event","addEventListener","updateValue","value","resetHighlightCountToStart","announceChanges","announce","resultsLiveRegion","textContent","announcement","window","requestAnimationFrame","messageToAnnounce","resultCount","highlightedName","concat","changeHighlightedNum","newNum","wmSearchBrowseResults","emit","position","wmBrowseSearchResults","addFocusStyle","removeFocusStyle","handleBlur","previousBlurredValue","wmSearchValueChanged","renderResultsAndBrowseButtons","h","class","icon","tooltip","description","onClick","disabled","renderJumpToLink","highlightedId","ref","href","render","Host","onInput","ev","target","onFocus","onBlur","autocomplete","String","fromCodePoint","parseInt"],"sources":["src/components/wm-search/wm-search.scss?tag=wm-search&encapsulation=shadow","src/components/wm-search/wm-search.tsx"],"sourcesContent":[":host,\r\nwm-search {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n  width: 100%;\r\n  font-size: rem-calc(14);\r\n\r\n  .wm-search-wrapper {\r\n    border-radius: 3px;\r\n    position: relative;\r\n    border: 1px solid rgba(35, 35, 35, 0.6);\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n\r\n    .search-icon {\r\n      @include mdi-icon;\r\n      font-size: rem-calc(17);\r\n      position: absolute;\r\n      left: rem-calc(7);\r\n    }\r\n\r\n    input {\r\n      border: none;\r\n      height: 40px;\r\n      padding: rem-calc(0 28);\r\n      background: transparent;\r\n      overflow: visible;\r\n      width: 100%;\r\n      flex: 1;\r\n      font-family: inherit;\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n\r\n    &.focus {\r\n      box-shadow: 0 0 0 1px #20cbd4;\r\n      border-color: $border-focus-color;\r\n      border-radius: 3px;\r\n    }\r\n  }\r\n\r\n  .find {\r\n    min-height: 3rem;\r\n\r\n    input {\r\n      padding: 16px 8px 16px 28px;\r\n    }\r\n\r\n    .wm-find-elements {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-start;\r\n      padding-right: 16px;\r\n      wm-button + wm-button {\r\n        margin-left: rem-calc(4);\r\n      }\r\n\r\n      .results {\r\n        margin-right: rem-calc(8);\r\n        font-style: italic;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n\r\n  .show-for-tabbers {\r\n    all: unset;\r\n    color: #575195;\r\n    text-decoration: none;\r\n    font-weight: 500;\r\n    font-size: rem-calc(14);\r\n    margin: 10px 0;\r\n\r\n    &:hover {\r\n      background: linear-gradient(#575195, #575195) no-repeat;\r\n      background-size: 100% 1px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n\r\n    &:focus {\r\n      outline: none;\r\n      background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\r\n      background-size: 6px 3px;\r\n      background-position: 0 1.2em;\r\n      padding-bottom: 0.2em;\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-search\",\r\n  styleUrl: \"wm-search.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Search {\r\n  @Element() el!: HTMLWmSearchElement;\r\n  @Prop({ mutable: true }) searchType: \"basic\" | \"find\" = \"basic\";\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n  /**\r\n   * Props required for both variants.\r\n   */\r\n  @Prop() placeholder: string = \"\";\r\n  @Prop() label: string = \"\";\r\n  @Prop({ mutable: true }) numResults: number = 0;\r\n\r\n  /**\r\n   * This exposes the input's value on the host component so that the app can access it.\r\n   */\r\n  @Prop({ mutable: true, reflect: true }) value: string = \"\";\r\n\r\n  /**\r\n   * If the user is tabbing, the search and find variant will display a link to jump to a search result.\r\n   */\r\n  @State() isTabbing: boolean = false;\r\n\r\n  /**\r\n   * Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\r\n   * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\r\n   */\r\n  @Prop() highlightedId: string = \"\";\r\n  @Prop() highlightedName: string | null = null;\r\n\r\n  /**\r\n   * Indicates which of the search results is currently highlighted. It will be displayed as \"[highlightedNum] of [numResults]\" next to the input in the search and find variant.\r\n   * This number updates as the user browses using the buttons.\r\n   */\r\n  @State() highlightedNum: number = 0;\r\n\r\n  @State() previousBlurredValue: string = \"\";\r\n  @State() parentModal?: HTMLWmModalElement;\r\n\r\n  /**\r\n   * Live region announcement\r\n   */\r\n  @State() announcement: string = \"\";\r\n\r\n  get resultCount(): string {\r\n    let message = \"\";\r\n    const basicMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.resultsFound\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\r\n      },\r\n      { numResults: this.numResults }\r\n    );\r\n    const findMessage = intl.formatMessage(\r\n      {\r\n        id: \"search.xOfYResults\",\r\n        defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\r\n      },\r\n      { numResults: this.numResults, current: this.highlightedNum }\r\n    );\r\n\r\n    if (this.searchType === \"basic\") {\r\n      message = basicMessage;\r\n    } else if (this.searchType === \"find\") {\r\n      message = findMessage;\r\n    }\r\n\r\n    return message;\r\n  }\r\n\r\n  /**\r\n   * Emitted when the buttons in the search-and-find variant are pressed.\r\n   */\r\n  @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\r\n  @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\r\n  @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\r\n\r\n  /**\r\n   * Element refs\r\n   */\r\n  private resultsLiveRegion!: HTMLElement;\r\n  private wrapperEl: HTMLElement | null = null;\r\n  private linkEl: HTMLElement | null = null;\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n    this.linkEl && this.linkEl.classList.remove(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n    this.linkEl && this.linkEl.classList.add(\"sr-only\");\r\n    this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.placeholder === \"\") {\r\n      console.error(\"You must set the placeholder property for the wm-search component.\");\r\n    }\r\n\r\n    if (this.label === \"\") {\r\n      console.error(\"You must set the label property for the wm-search component.\");\r\n    }\r\n    this.hookToModal();\r\n  }\r\n\r\n  hookToModal() {\r\n    // if the search is in a modal we want to clear the input when the modal closes\r\n    let el = this.el as any;\r\n    while (!!el) {\r\n      if (el.tagName === \"WM-MODAL\") {\r\n        this.parentModal = el as HTMLWmModalElement;\r\n      }\r\n      el = el.parentElement as HTMLElement;\r\n    }\r\n\r\n    if (this.parentModal) {\r\n      const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\r\n      events.map((event) => {\r\n        this.parentModal!.addEventListener(event, () => {\r\n          this.updateValue(\"\");\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\r\n  @Method()\r\n  async updateValue(value: string) {\r\n    this.value = value;\r\n\r\n    //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\r\n    //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\r\n    this.resetHighlightCountToStart();\r\n\r\n    if (this.value) {\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  @Watch(\"numResults\")\r\n  resetHighlightCountToStart(): void {\r\n    if (this.searchType === \"find\") {\r\n      this.highlightedNum = this.numResults ? 1 : 0;\r\n    }\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.resultsLiveRegion!.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  announceChanges() {\r\n    window.requestAnimationFrame(() => {\r\n      // requestAnimationFrame to allow all changes to occur before announcing results\r\n      let messageToAnnounce = this.resultCount;\r\n\r\n      // if a result is found, also include it after the liveregion message\r\n      if (this.searchType === \"find\" && this.highlightedName) {\r\n        messageToAnnounce += `, ${this.highlightedName}`;\r\n      }\r\n\r\n      this.announce(messageToAnnounce);\r\n    });\r\n  }\r\n\r\n  changeHighlightedNum(newNum: number): void {\r\n    if (this.numResults) {\r\n      if (newNum < 1) {\r\n        // we were on the first item, going down: go to last item\r\n        this.highlightedNum = this.numResults;\r\n      } else if (newNum > this.numResults) {\r\n        // we were on the last item, going up: go to first item\r\n        this.highlightedNum = 1;\r\n      } else {\r\n        this.highlightedNum = newNum;\r\n      }\r\n\r\n      this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\r\n      this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\r\n      this.announceChanges();\r\n    }\r\n  }\r\n\r\n  addFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.add(\"focus\");\r\n    }\r\n  }\r\n\r\n  removeFocusStyle() {\r\n    if (this.wrapperEl) {\r\n      this.wrapperEl.classList.remove(\"focus\");\r\n    }\r\n  }\r\n\r\n  handleBlur() {\r\n    this.removeFocusStyle();\r\n    if (this.previousBlurredValue !== this.value) {\r\n      this.wmSearchValueChanged.emit({ value: this.value });\r\n    }\r\n    this.previousBlurredValue = this.value;\r\n  }\r\n\r\n  /**\r\n   * Functions that return elements specifically for search-and-find.\r\n   */\r\n  renderResultsAndBrowseButtons(): HTMLDivElement {\r\n    return (\r\n      <div class=\"wm-find-elements\">\r\n        <div id=\"results-display\" class=\"results\">\r\n          {this.resultCount}\r\n        </div>\r\n        <div class=\"wm-button-collection\">\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f05d\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.previous\",\r\n              description: \"button text\",\r\n              defaultMessage: \"previous\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.previousResult\",\r\n              defaultMessage: \"Press to hear previous matching result\",\r\n            })}\r\n          />\r\n          <wm-button\r\n            button-type=\"icononly\"\r\n            icon=\"f045\"\r\n            tooltip={intl.formatMessage({\r\n              id: \"global.next\",\r\n              description: \"button text\",\r\n              defaultMessage: \"next\",\r\n            })}\r\n            tooltip-position=\"bottom\"\r\n            onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\r\n            disabled={this.disabled || this.numResults < 2}\r\n            label-for-identical-buttons={intl.formatMessage({\r\n              id: \"search.nextResult\",\r\n              defaultMessage: \"Press to hear next matching result\",\r\n            })}\r\n          />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderJumpToLink(): HTMLAnchorElement | null {\r\n    if (this.numResults && this.highlightedId) {\r\n      return (\r\n        <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"search.jumpToResult\",\r\n            defaultMessage: \"Jump to search result in list\",\r\n          })}\r\n        </a>\r\n      );\r\n    } else {\r\n      return null;\r\n    }\r\n  }\r\n  /**\r\n   * End search and find render helpers\r\n   */\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          id=\"wm-search-wrapper\"\r\n          class={`wm-search-wrapper ${this.searchType}`}\r\n          ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n        >\r\n          <input\r\n            disabled={this.disabled}\r\n            id=\"wm-search-input\"\r\n            placeholder={this.placeholder}\r\n            aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\r\n              id: \"search.typeToFilterResults\",\r\n              defaultMessage: \"Type to filter the results\",\r\n            })}`}\r\n            onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\r\n            onFocus={() => this.addFocusStyle()}\r\n            onBlur={() => this.handleBlur()}\r\n            aria-autocomplete=\"none\"\r\n            autocomplete=\"off\"\r\n            value={this.value}\r\n          />\r\n          <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\r\n          {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\r\n          <div\r\n            id=\"wm-search-live\"\r\n            class=\"sr-only\"\r\n            aria-live=\"polite\"\r\n            aria-atomic=\"true\"\r\n            ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\r\n          >\r\n            {this.announcement}\r\n          </div>\r\n        </div>\r\n        {this.searchType === \"find\" && this.renderJumpToLink()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

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

package/dist/ripple/p-262713b9.entry.js.map

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

package/dist/ripple/p-28c12986.system.entry.js.map

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

package/dist/ripple/p-3f6c7e6c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmDatepickerCss","DatePicker","this","lastCommittedValue","value","parsableEntry","isoEntry","eightDigitsEntry","dateFormats","US","intl","formatMessage","id","defaultMessage","INT","ISO","handleTabbingOn","dpWrapper","classList","add","handleTabbingOff","remove","handleError","errorMessage","generateError","clearError","processInput","handleInput","ev","target","handleBlur","shouldPreventValidation","preventValidation","isRelatedTarget","focusHandler","handlePopupBlurred","detail","relatedTarget","el","event","CustomEvent","dispatchEvent","getActiveElement","checkForFocusableElInShadow","document","activeElement","handleCellTriggered","dateElement","isoDate","getAttribute","textContent","inputEl","reformatDate","dateFormat","isFirstLoad","leftEmpty","requiredField","test","addSlashes","isValidDate","length","lastValidValue","wmDatepickerNewValidValue","emit","toFormat","date","dateArr","replace","split","padStart","join","input","parts","day","parseInt","month","year","monthLength","requiredDateErr","requiredFieldMessage","validDateErr","toLowerCase","displayError","substring","componentWillLoad","label","console","error","uid","generateId","componentDidLoad","render","h","Host","class","invalid","ref","d","labelPosition","htmlFor","title","disabled","type","name","placeholder","onFocus","bind","onInput","onBlur","Date","parentId"],"sources":["./src/components/wm-datepicker/wm-datepicker.scss?tag=wm-datepicker&encapsulation=shadow","./src/components/wm-datepicker/wm-datepicker.tsx"],"sourcesContent":[":host,\r\nwm-datepicker {\r\n  font-family: inherit;\r\n\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  @include label;\r\n\r\n  .wrapper {\r\n    position: relative;\r\n\r\n    .required {\r\n      color: $datepicker-required-input;\r\n    }\r\n\r\n    .inner-wrapper {\r\n      @include displayFlex();\r\n      align-items: center;\r\n      height: rem-calc(40);\r\n      border: 1px solid;\r\n      border-color: $datepicker-input-border-color;\r\n      @include border-radius(3px);\r\n      max-width: 236px; /* input is 200px or smaller, button is 36px */\r\n      justify-content: space-between;\r\n      position: relative;\r\n\r\n      .date-input {\r\n        -moz-border-top-left-radius: 3px;\r\n        -webkit-border-top-left-radius: 3px;\r\n        border-top-left-radius: 3px;\r\n        -moz-border-bottom-left-radius: 3px;\r\n        -webkit-border-bottom-left-radius: 3px;\r\n        border-bottom-left-radius: 3px;\r\n        border: none;\r\n        font-size: rem-calc(14);\r\n        padding: rem-calc(10 15 8);\r\n        min-width: 0;\r\n        height: 100%;\r\n        flex: 1;\r\n        margin: 0;\r\n\r\n        &:disabled {\r\n          background-color: $input-disabled-bg;\r\n          color: $input-disabled-color;\r\n        }\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.invalid {\r\n      .inner-wrapper {\r\n        @include invalidBorder;\r\n      }\r\n\r\n      .error {\r\n        @include errorMessage;\r\n        margin-bottom: 4px;\r\n        top: 100%;\r\n        left: 0;\r\n      }\r\n    }\r\n\r\n    &.focus {\r\n      .inner-wrapper {\r\n        @include field-focus;\r\n      }\r\n    }\r\n  }\r\n\r\n  .user-is-tabbing {\r\n    .toggle:focus {\r\n      &:not(:active) {\r\n        border: none;\r\n        z-index: 11;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Host, Element, Event, EventEmitter, Prop, Listen, Watch, State } from \"@stencil/core\";\r\nimport { generateId, checkForFocusableElInShadow, intl, isRelatedTarget } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-datepicker\",\r\n  styleUrl: \"wm-datepicker.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class DatePicker {\r\n  @Element() el!: HTMLWmDatepickerElement;\r\n  private dpWrapper!: HTMLDivElement;\r\n  private inputEl!: HTMLInputElement;\r\n\r\n  @Prop({ mutable: true }) value?: string = \"\";\r\n  @Prop() disabled: boolean = false;\r\n  @Prop({ mutable: true }) dateFormat: string = \"US\";\r\n  @Prop({ reflect: true }) errorMessage: string = \"\";\r\n  @Prop({ mutable: true }) labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop({ mutable: true }) label: string = \"\";\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop() requiredFieldMessage?: string;\r\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\r\n  @State() displayError: string = \"\";\r\n  @Event() wmDatepickerNewValidValue!: EventEmitter;\r\n\r\n  // we only want to fire the \"change\" event if the value has actually changed (that's\r\n  // how native elements do it), so we need to keep in state the last committed value.\r\n  private lastCommittedValue?: string = this.value;\r\n  private lastValidValue?: string;\r\n  private uid!: string;\r\n\r\n  // 1, 2, or 4 digits, separator, 1 or 2 digits, separator, then 1 or 2 or 4 digits\r\n  private parsableEntry = /^(\\d{1}|\\d{2}|\\d{4})[\\-\\.\\/]\\d{1,2}[\\-\\.\\/](\\d{1}|\\d{2}|\\d{4})$/;\r\n  private isoEntry = /^\\d\\d\\d\\d[-]\\d\\d[-]\\d\\d$/;\r\n  private eightDigitsEntry = /^\\d{8}$/;\r\n\r\n  dateFormats: any = {\r\n    US: intl.formatMessage({\r\n      id: \"date.formatUS\",\r\n      defaultMessage: \"mm/dd/yyyy\",\r\n    }),\r\n    INT: intl.formatMessage({\r\n      id: \"date.formatINT\",\r\n      defaultMessage: \"dd/mm/yyyy\",\r\n    }),\r\n    ISO: intl.formatMessage({\r\n      id: \"date.formatISO\",\r\n      defaultMessage: \"yyyy/mm/dd\",\r\n    }),\r\n  };\r\n\r\n  @Listen(\"keydown\")\r\n  handleTabbingOn() {\r\n    this.dpWrapper && this.dpWrapper.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Listen(\"click\")\r\n  handleTabbingOff() {\r\n    this.dpWrapper && this.dpWrapper.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleError() {\r\n    if (this.errorMessage) {\r\n      this.generateError();\r\n    } else {\r\n      this.clearError();\r\n      this.processInput();\r\n    }\r\n  }\r\n\r\n  handleInput(ev: Event) {\r\n    // keep component's value in sync with input's value\r\n    // validation only happens on blur and initial load,\r\n    // but component's value should reflect user input at any time\r\n    this.value = (ev.target! as HTMLInputElement).value; // same as this.inputEl.value\r\n  }\r\n\r\n  // this is input blur, not component blur\r\n  handleBlur(ev: FocusEvent) {\r\n    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)\r\n    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);\r\n    if (!shouldPreventValidation) {\r\n      this.processInput();\r\n    }\r\n    this.dpWrapper.classList.remove(\"focus\");\r\n  }\r\n\r\n  // this is input focus, not component focus\r\n  focusHandler() {\r\n    this.dpWrapper.classList.add(\"focus\");\r\n  }\r\n\r\n  @Listen(\"popupBlurred\")\r\n  handlePopupBlurred(ev: CustomEvent) {\r\n    // emit blur event when leaving component from priv-datepicker\r\n    if (ev.detail.relatedTarget !== this.el) {\r\n      const event = new CustomEvent(\"blur\");\r\n      // @ts-ignore\r\n      event.relatedTarget = ev.detail.relatedTarget;\r\n      this.el.dispatchEvent(event);\r\n    }\r\n  }\r\n\r\n  getActiveElement() {\r\n    return checkForFocusableElInShadow(document.activeElement as HTMLElement);\r\n  }\r\n\r\n  @Listen(\"cellTriggered\")\r\n  handleCellTriggered(ev: CustomEvent) {\r\n    let dateElement = ev.detail as HTMLTableCellElement;\r\n    let isoDate =\r\n      dateElement.getAttribute(\"data-year\")! +\r\n      \"-\" +\r\n      dateElement.getAttribute(\"data-month\")! +\r\n      \"-\" +\r\n      dateElement.textContent!;\r\n    this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\r\n    this.processInput();\r\n\r\n    // Create event to trigger onInput function on host element, to get the updated value\r\n    // Because there are more ways to input than just typing, we are firing this event upon cellTriggered\r\n    const event = new CustomEvent(\"input\");\r\n    this.el.dispatchEvent(event);\r\n  }\r\n\r\n  processInput(isFirstLoad?: boolean) {\r\n    // The required field error should not display on first load\r\n    const leftEmpty = !isFirstLoad && this.requiredField;\r\n\r\n    let isoDate = this.inputEl.value;\r\n\r\n    //If input is 8 digits, add slashes as a courtesy and process anyway\r\n    if (this.eightDigitsEntry.test(this.inputEl.value)) {\r\n      this.inputEl.value = this.addSlashes(this.inputEl.value);\r\n    }\r\n\r\n    // if we don't have 2 separators we can't reformat so we'll return what was passed in\r\n    if (this.parsableEntry.test(this.inputEl.value)) {\r\n      //ISO format for submission\r\n      isoDate = this.reformatDate(\"ISO\", this.inputEl.value);\r\n\r\n      //User-specific format for display\r\n      this.inputEl.value = this.reformatDate(this.dateFormat, isoDate);\r\n\r\n      if (this.isValidDate(isoDate)) {\r\n        //If there's no errorMessage on state, all errors can be cleared. If there IS an error message, it will clear any internal validation errors by overriding them.\r\n        if (this.errorMessage) {\r\n          this.generateError();\r\n        } else {\r\n          this.clearError();\r\n        }\r\n        //Prevents error from appearing if input field is empty\r\n      } else if (this.inputEl.value.length) {\r\n        this.generateError();\r\n      }\r\n    } else if (this.inputEl.value.length || leftEmpty || this.errorMessage) {\r\n      this.generateError();\r\n    } else if (!this.inputEl.value.length && !leftEmpty) {\r\n      this.clearError();\r\n    }\r\n\r\n    // value is set to the reformated date or whatever the user passed\r\n    this.value = isoDate;\r\n\r\n    if (isoDate !== this.lastCommittedValue) {\r\n      const event = new CustomEvent(\"change\");\r\n      this.el.dispatchEvent(event);\r\n      this.lastCommittedValue = this.value;\r\n    }\r\n\r\n    // event must fire after we set this.value\r\n    // only fire if new valid value is different from the previous one\r\n    if (this.isValidDate(isoDate) && isoDate !== this.lastValidValue) {\r\n      this.wmDatepickerNewValidValue.emit();\r\n      //Update prop passed into calendar to valid date\r\n      this.lastValidValue = isoDate;\r\n    }\r\n  }\r\n\r\n  // this function reformats date strings to/from the storage format ONLY. US -> INT and vice versa is not supported.\r\n  reformatDate(toFormat: string, date?: string): string {\r\n    if (!date) {\r\n      return \"\";\r\n    } else if (!this.parsableEntry.test(date)) {\r\n      return date;\r\n    } else {\r\n      let dateArr = date.replace(/[\\-\\.]/gi, \"/\").split(\"/\");\r\n      switch (toFormat) {\r\n        case \"US\":\r\n        case this.dateFormats[\"US\"]:\r\n          return dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\r\n        case \"INT\":\r\n        case this.dateFormats[\"INT\"]:\r\n          return dateArr[2].padStart(2, \"0\") + \"/\" + dateArr[1].padStart(2, \"0\") + \"/\" + dateArr[0].padStart(4, \"20\");\r\n        case \"ISO\":\r\n        case this.dateFormats[\"ISO\"]:\r\n          if (this.dateFormat === \"US\" || this.dateFormat === this.dateFormats[\"US\"]) {\r\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[0].padStart(2, \"0\") + \"-\" + dateArr[1].padStart(2, \"0\");\r\n          } else if (this.dateFormat === \"INT\" || this.dateFormat === this.dateFormats[\"INT\"]) {\r\n            return dateArr[2].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[0].padStart(2, \"0\");\r\n          } else if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\r\n            return dateArr[0].padStart(4, \"20\") + \"-\" + dateArr[1].padStart(2, \"0\") + \"-\" + dateArr[2].padStart(2, \"0\");\r\n          }\r\n        default:\r\n          return dateArr.join(\"/\");\r\n      }\r\n    }\r\n  }\r\n\r\n  isValidDate(input?: string) {\r\n    // if it's not ISO it's not valid\r\n    if (!input || !this.isoEntry.test(input)) {\r\n      return false;\r\n    } else {\r\n      // Parse the ISO date parts to integers\r\n      let parts = input.split(\"-\");\r\n      let day = parseInt(parts[2], 10);\r\n      let month = parseInt(parts[1], 10);\r\n      let year = parseInt(parts[0], 10);\r\n      // Check the ranges of month and year\r\n      if (year < 1000 || year > 3000 || month == 0 || month > 12) return false;\r\n      let monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];\r\n      // Adjust for leap years\r\n      if (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)) monthLength[1] = 29;\r\n      // Check the range of the day\r\n      return day > 0 && day <= monthLength[month - 1];\r\n    }\r\n  }\r\n\r\n  generateError() {\r\n    const requiredDateErr: string =\r\n      this.requiredFieldMessage ||\r\n      intl.formatMessage({\r\n        id: \"date.requiredDateError\",\r\n        defaultMessage: \"A date is required.\",\r\n      });\r\n    const validDateErr = intl.formatMessage(\r\n      {\r\n        id: \"date.invalidDate\",\r\n        defaultMessage:\r\n          \"Please enter a valid date in the format {dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}.\",\r\n      },\r\n      { dateFormat: this.dateFormat.toLowerCase() }\r\n    );\r\n    if (this.errorMessage) {\r\n      this.displayError = this.errorMessage;\r\n    } else if (this.inputEl.value.length) {\r\n      this.displayError = validDateErr;\r\n    } else if (!this.inputEl.value.length && this.requiredField) {\r\n      this.displayError = requiredDateErr;\r\n    }\r\n  }\r\n\r\n  clearError() {\r\n    this.displayError = \"\";\r\n  }\r\n\r\n  addSlashes(input: string) {\r\n    if (this.dateFormat === \"ISO\" || this.dateFormat === this.dateFormats[\"ISO\"]) {\r\n      return input.substring(0, 4) + \"/\" + input.substring(4, 6) + \"/\" + input.substring(6);\r\n    } else {\r\n      return input.substring(0, 2) + \"/\" + input.substring(2, 4) + \"/\" + input.substring(4);\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.label === \"\") {\r\n      console.error(\r\n        \"You must include a label prop for the datepicker input (for accessibility reasons), even if the label position is none.\"\r\n      );\r\n    }\r\n    if (this.errorMessage) {\r\n      this.generateError();\r\n    }\r\n\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n\r\n    if (this.value && this.isValidDate(this.value)) {\r\n      // update value passed into calendar so that it opens on the specified date\r\n      this.lastValidValue = this.value;\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // convert passed-in starting date from ISO to locale format, update displayed input to proper format\r\n    this.inputEl.value = this.reformatDate(this.dateFormat, this.value);\r\n    this.processInput(true);\r\n  }\r\n\r\n  render() {\r\n    const dateFormat = intl.formatMessage(\r\n      {\r\n        id: \"date.format\",\r\n        defaultMessage: \"{dateFormat, select, us {mm/dd/yyyy} int {dd/mm/yyyy} other {yyyy/mm/dd}}\",\r\n      },\r\n      { dateFormat: this.dateFormat.toLowerCase() }\r\n    );\r\n    return (\r\n      <Host\r\n        id={this.uid}\r\n        aria-busy=\"false\"\r\n        class={`${this.displayError ? \"invalid\" : \"\"}`}\r\n        invalid={this.displayError ? \"true\" : null}\r\n      >\r\n        <div\r\n          ref={(d) => (this.dpWrapper = d as HTMLDivElement)}\r\n          class={`wrapper label-${this.labelPosition} ${this.displayError ? \"invalid\" : \"\"}`}\r\n        >\r\n          <div class=\"label-wrapper\">\r\n            {this.labelPosition !== \"none\" && (\r\n              <label\r\n                id={`datepickerLabel-${this.uid}`}\r\n                htmlFor={`date-input-${this.uid}`}\r\n                class=\"label\"\r\n                title={`${this.label} (${dateFormat})`}\r\n              >\r\n                {this.label}\r\n                {this.requiredField && (\r\n                  <span aria-hidden=\"true\" class=\"required\">\r\n                    *\r\n                  </span>\r\n                )}\r\n              </label>\r\n            )}\r\n          </div>\r\n          <div>\r\n            <div class=\"inner-wrapper\">\r\n              <input\r\n                disabled={this.disabled}\r\n                type=\"text\"\r\n                id={`date-input-${this.uid}`}\r\n                class=\"date-input\"\r\n                name=\"date\"\r\n                placeholder={dateFormat}\r\n                onFocus={this.focusHandler.bind(this)}\r\n                onInput={(ev) => this.handleInput(ev)}\r\n                onBlur={(ev) => this.handleBlur(ev)}\r\n                ref={(input) => (this.inputEl = input as HTMLInputElement)}\r\n                aria-describedby={`error-${this.uid}`}\r\n                aria-controls={`popup-${this.uid}`}\r\n                aria-label={this.label}\r\n                aria-required={this.requiredField ? \"true\" : null}\r\n              />\r\n              <priv-datepicker\r\n                disabled={this.disabled}\r\n                date={this.lastValidValue ? new Date(this.lastValidValue) : new Date()}\r\n                parentId={this.uid}\r\n              />\r\n            </div>\r\n            <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n              {this.displayError}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

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

package/dist/ripple/p-43f1298b.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 = {\r\n  message: string;\r\n  id: string;\r\n  link: string;\r\n  newWindow: boolean;\r\n};\r\n\r\n// Create label for icon-only buttons\r\nexport type label = string | undefined;\r\n\r\nexport type CssClassMap = { [className: string]: boolean };\r\n\r\ninterface IconLabels {\r\n  [index: string]: string;\r\n}\r\n\r\nexport type Product = {\r\n  description?: string;\r\n  samlLinkUrl?: string;\r\n  iconUrl: string;\r\n  id: string;\r\n  linkUrl: string;\r\n  name: string;\r\n};\r\n\r\n// products retrieved from endpoint:\r\nexport type NavigatorPayload = {\r\n  connection_name?: string;\r\n  current_product_id: string;\r\n  email: string;\r\n  logout_url: string;\r\n  products: Product[];\r\n};\r\n\r\nexport type validButtonTypes =\r\n  | \"primary\"\r\n  | \"secondary\"\r\n  | \"textonly\"\r\n  | \"icononly\"\r\n  | \"navigational\"\r\n  | \"selector\"\r\n  | \"selector-primary\"\r\n  | \"pairpositive\"\r\n  | \"pairnegative\";\r\n\r\n//List of icon codes with more indicative descriptors to create labels for icon-only buttons\r\nexport const iconLabels: IconLabels = {\r\n  f156: \"Close\",\r\n  f3eb: \"Edit\",\r\n  f739: \"Cancel\",\r\n  f12c: \"Save\",\r\n  f1c0: \"Delete\",\r\n  f349: \"Search\",\r\n  f207: \"Export info\",\r\n  f1d9: \"Open dropdown\",\r\n  f04d: \"Go back\",\r\n  f054: \"Go forward\",\r\n  f141: \"Left\",\r\n  f142: \"Right\",\r\n  f35e: \"Menu left\",\r\n  f35d: \"Toggle menu down\",\r\n  f30d: \"Backspace\",\r\n  f645: \"Sort hierarchically\",\r\n  f4bb: \"Sort alphabetically\",\r\n};\r\n\r\n// For backwards compatibility, the icon prop accepts the icon name minus mdi- prefix, e.g. \"icon\"\r\n// this function converts the name to the corresponding code or returns what it was passed\r\ninterface IconCodes {\r\n  [index: string]: string;\r\n}\r\nexport function getIconCodeFromName(icon: string): string {\r\n  return iconCodes[icon] || icon;\r\n}\r\n\r\nconst iconCodes: IconCodes = {\r\n  close: \"f156\",\r\n  pencil: \"f3eb\",\r\n  cancel: \"f739\",\r\n  check: \"f12c\",\r\n  delete: \"f1c0\",\r\n  magnify: \"f349\",\r\n  export: \"f207\",\r\n  \"dots-vertical\": \"f1d9\",\r\n  \"arrow-left\": \"f04d\",\r\n  \"arrow-right\": \"f054\",\r\n  \"chevron-left\": \"f141\",\r\n  \"chevron-right\": \"f142\",\r\n  \"menu-left\": \"f35e\",\r\n  \"menu-down\": \"f35d\",\r\n  \"keyboard-backspace\": \"f30d\",\r\n  \"file-tree\": \"f645\",\r\n  \"sort-alphabetical\": \"f4bb\",\r\n  \"checkbox-marked-circle\": \"f133\",\r\n  \"account-settings\": \"f630\",\r\n  \"backup-restore\": \"f06f\",\r\n};\r\n\r\nexport const defaultMode = \"planning\";\r\n\r\nexport const getWmMode = (ref?: any) => {\r\n  return ref.getAttribute(\"mode\") || document.documentElement.getAttribute(\"mode\") || defaultMode;\r\n};\r\n\r\nexport type TooltipPlacement =\r\n  | \"top\"\r\n  | \"bottom\"\r\n  | \"left\"\r\n  | \"right\"\r\n  | \"bottom-left\"\r\n  | \"bottom-right\"\r\n  | \"top-right\"\r\n  | \"top-left\";\r\n\r\nexport type SliceElement = (SVGElement | HTMLElement);\r\n\r\nexport type SliceDetails = {\r\n  amount: number;\r\n  perc: number;\r\n  legend: string | null;\r\n  color: string;\r\n  offset: number;\r\n  id: string;\r\n  title: string | null;\r\n  text: string | null;\r\n  buttonText: string | null;\r\n  sliceRef: Element;\r\n  inSmallCluster: boolean;\r\n  coords?: {x: number, y: number};\r\n};\r\n\r\nexport type ChartDetails = {\r\n  size: number;\r\n  colors: Array<string>;\r\n  thickness?: number;\r\n  padding: number;\r\n  category: \"doughnut\" | \"stackedBar\" | \"simpleBar\";\r\n};\r\n\r\nexport type ChartType =\r\n  // progress monitor types\r\n  | \"doughnut\"\r\n  | \"bar\"\r\n  // chart types\r\n  | \"doughnut1\"\r\n  | \"doughnut2\"\r\n  | \"doughnut2plus\"\r\n  | \"doughnut3\"\r\n  | \"bar2\"\r\n  | \"bar3\"\r\n  | \"bar4\"\r\n  | \"bar5\"\r\n  | \"bar6\"\r\n  | \"bar7\"\r\n  // deprecated\r\n  | \"doughnut0\"\r\n  | \"bar1\";\r\n\r\nexport type LegendItem = { key: string; color: string };\r\n\r\nexport type UploadedFile = {\r\n  name: string;\r\n  id: string;\r\n  type: string;\r\n  lastUpdated: string; // in display format\r\n  progress?: number;\r\n  fileActions?: string;\r\n  size?: string; // in display format\r\n};\r\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"}