@watermarkinsights/ripple 3.24.0 → 3.24.1

package/dist/ripple/p-3655a421.system.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["privDatepickerCss","PrivDatepicker","exports","this","popupClicked","buttonClicked","prevClicked","nextClicked","openUp","calendar_months","intl","formatMessage","id","defaultMessage","description","weekdays","renderCalendarDate","date","index","monthOfDate","_this","removeZeroes","String","dayOfDate","isThisMonth","monthInFocus","dateId","isToday","isDateToday","h","role","concat","parentId","class","onClick","ev","handleTriggeredDate","target","onKeyDown","trapFocusEnd","onBlur","stopPropagation","Date","getUTCFullYear","getUTCMonth","getUTCDate","selectedMonth","selectedYear","selectedDay","class_1","prototype","handleKey","key","preventDefault","includes","click","isExpanded","closePopup","backOneMonth","forwardOneMonth","unfocusCell","dayInFocus","forceUpdate","el","getMonthDays","yearInFocus","view","newMonth","getPreviousMonth","month","year","unfocusMonth","monthNumInFocus","getNextMonth","numDaysToSubtract","openPopup","document","activeElement","shadowRoot","classList","contains","focusCell","changeoverDate","activeEl","tagName","focusMonth","toggleTabbingOn","validKeys","isTabbing","toggleTabbingOff","blurHandler","popupBlurred","emit","relatedTarget","handleBlurOnWindow","componentDidUpdate","handleSelectedDate","prevButton","focus","nextButton","componentDidLoad","setDateValuesForView","zeroPad","value","length","padStart","targetLength","padString","repeat","slice","toString","today","todayDateArray","getFullYear","getMonth","getDate","reduce","result","val","togglePopup","returnFocus","popupEl","remove","window","setTimeout","style","visibility","changeView","buttonEl","panelPosition","requestAnimationFrame","add","months30","leapYear","getMonthFirstDay","getDay","prevMonth","prevMonthYear","nextMonth","nextMonthYear","getCalendarDates","monthDays","monthFirstDay","daysFromPrevMonth","daysFromNextMonth","_a","_b","prevMonthDays","prevMonthDates","__spreadArray","Array","fill","map","_","day","thisMonthDates","nextMonthDates","totalDays","updateLiveRegion","cellTriggered","selectedDate","removeAttribute","getCellById","setAttribute","querySelector","cellToUnfocus","tabIndex","maxDays","cellToFocus","monthToUnfocus","monthToFocus","trapFocusLeft","shiftKey","focusCellInView","trapFocusRight","toggleBusyAttribute","state","text","liveRegion","innerHTML","host","getElementById","labelHeight","clientHeight","shouldOpenUp","hasRoomRight","left","right","newView","renderMonths","tabindex","render","dates","disabled","bind","ref","title","i"],"sources":["src/components/wm-datepicker/priv-datepicker/priv-datepicker.scss?tag=priv-datepicker","src/components/wm-datepicker/priv-datepicker/priv-datepicker.tsx"],"sourcesContent":[".toggle {\r\n  all: unset;\r\n  cursor: pointer;\r\n  padding: rem-calc(0px 6px);\r\n  height: rem-calc(38);\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  background-color: $button-default-background;\r\n\r\n  &:disabled {\r\n    pointer-events: none;\r\n    @include box-shadow(none);\r\n    background-color: rgba(74, 74, 74, 0.05);\r\n    .calendar::after {\r\n      color: #7b7b7b;\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    @include box-shadow(none);\r\n    background: mix(black, $button-default-background, 10%);\r\n\r\n    .calendar::after {\r\n      color: $button-default-text;\r\n    }\r\n  }\r\n\r\n  [dir=\"RTL\"] & {\r\n    right: auto;\r\n    left: 0;\r\n  }\r\n\r\n  span::after {\r\n    @include mdi-icon;\r\n    content: \"\\f0ed\";\r\n    font-size: rem-calc(24);\r\n    color: $button-default-text;\r\n    padding: 0;\r\n    line-height: rem-calc(40);\r\n  }\r\n\r\n  &:focus {\r\n    outline: none;\r\n  }\r\n\r\n  &::-moz-focus-inner {\r\n    border: 0;\r\n  }\r\n}\r\n\r\n.user-is-tabbing {\r\n  .toggle:focus {\r\n    @include focus-style;\r\n  }\r\n}\r\n\r\n.popup {\r\n  visibility: hidden;\r\n  font-family: inherit;\r\n  @include border-radius(3px);\r\n  @include box-shadow(0px 4px 15px 0px rgba(0, 0, 0, 0.2));\r\n  width: rem-calc(336);\r\n  z-index: 10;\r\n  //relative to inner wrapper in wm-datepicker, which contains the input and priv-datepicker\r\n  position: absolute;\r\n  left: 0;\r\n  top: 40px;\r\n  min-height: rem-calc(337);\r\n  transition: transform 0.25s ease;\r\n  transform-origin: center top;\r\n  transform: scale(1, 0);\r\n  background-color: $light-background;\r\n\r\n  &.open {\r\n    // display: block;\r\n    transform: scale(1, 1);\r\n  }\r\n\r\n  &.expand-upwards {\r\n    top: auto;\r\n    bottom: rem-calc(38);\r\n    transform-origin: center bottom;\r\n  }\r\n\r\n  .calendar-header {\r\n    @include displayFlex();\r\n    @include justifyContent(space-between);\r\n    position: relative;\r\n    padding: rem-calc(15 4);\r\n\r\n    .title-box {\r\n      height: rem-calc(42);\r\n      @include border-radius(3px);\r\n      border: 1px solid;\r\n      font-weight: 500;\r\n      font-size: rem-calc(14);\r\n      background: transparent;\r\n      cursor: pointer;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: rem-calc(0 6 0 12);\r\n      border-color: $button-default-text;\r\n      color: $button-default-text;\r\n\r\n      &:after {\r\n        @include mdi-icon;\r\n        content: \"\\f140\";\r\n        padding-left: rem-calc(12);\r\n      }\r\n\r\n      &.year:after {\r\n        content: \"\\f143\";\r\n      }\r\n\r\n      &::-moz-focus-inner {\r\n        border: 0;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n\r\n    .arw-btn {\r\n      cursor: pointer;\r\n      @include border-radius(50%);\r\n      width: rem-calc(44);\r\n      height: rem-calc(44);\r\n      border: none;\r\n      color: $button-default-text;\r\n      background: transparent;\r\n      padding: 0;\r\n      @include box-shadow(none);\r\n      line-height: rem-calc(44);\r\n\r\n      .mdi {\r\n        @include mdi-icon;\r\n        font-size: rem-calc(24);\r\n        font-weight: normal;\r\n        line-height: rem-calc(44);\r\n\r\n        &:hover {\r\n          background-color: #efeef1;\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n\r\n      &:active {\r\n        @include scale($xVal: 0.9, $yVal: 0.9);\r\n        background-color: #d7d6d9;\r\n      }\r\n    }\r\n  }\r\n\r\n  .day-view {\r\n    min-width: 100%;\r\n\r\n    .date-grid {\r\n      width: 100%;\r\n      text-align: center;\r\n      border-collapse: collapse;\r\n      margin-bottom: rem-calc(7);\r\n      color: #757575;\r\n\r\n      .date-row:first-child {\r\n        .date-cell {\r\n          margin-top: rem-calc(2);\r\n        }\r\n      }\r\n\r\n      .date-header {\r\n        background-color: rgb(238, 237, 244);\r\n      }\r\n\r\n      .header-cell {\r\n        height: rem-calc(33);\r\n        line-height: rem-calc(33);\r\n        width: rem-calc(44);\r\n        margin: 0 calc((14.28% - 44px) / 2);\r\n        padding: 0;\r\n        display: inline-block;\r\n        font-size: rem-calc(13);\r\n        font-weight: bold;\r\n        color: #4a4a4a;\r\n        border: none;\r\n      }\r\n\r\n      .date-cell {\r\n        cursor: pointer;\r\n        display: inline-block;\r\n        padding: 0;\r\n        @include border-radius(50%);\r\n        height: rem-calc(44);\r\n        width: rem-calc(44);\r\n        margin: 0 calc((14.28% - 44px) / 2);\r\n        font-size: rem-calc(14);\r\n        font-weight: 500;\r\n        line-height: rem-calc(44);\r\n\r\n        &:focus {\r\n          outline: none;\r\n        }\r\n\r\n        &:hover {\r\n          background-color: #efeef1;\r\n        }\r\n\r\n        &:active {\r\n          background-color: $button-primary-background;\r\n          color: #ffffff;\r\n        }\r\n\r\n        &.current-month {\r\n          color: #4a4a4a;\r\n\r\n          &[aria-selected=\"true\"] {\r\n            background-color: $button-primary-background;\r\n            color: #ffffff;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  .month-view {\r\n    .months {\r\n      border-top: 2px solid;\r\n      border-top-color: #eeedf4;\r\n      @include displayFlex();\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .month-row {\r\n      @include displayFlex();\r\n      @include justifyContent(space-between);\r\n      width: 100%;\r\n      border-bottom: 2px solid;\r\n      border-bottom-color: #eeedf4;\r\n    }\r\n\r\n    .month {\r\n      cursor: pointer;\r\n      text-align: center;\r\n      width: 100%;\r\n      height: rem-calc(64);\r\n      line-height: rem-calc(64);\r\n      font-weight: 500;\r\n      color: $button-default-text;\r\n\r\n      &:not(:last-child) {\r\n        border-right: 2px solid;\r\n        border-right-color: #eeedf4;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n\r\n      &:hover {\r\n        background-color: #efeef1;\r\n      }\r\n\r\n      &:active,\r\n      &.selected {\r\n        background-color: #575195;\r\n        color: #ffffff;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.user-is-tabbing {\r\n    button:focus,\r\n    .title-box:focus,\r\n    .date-cell:focus,\r\n    .month:focus {\r\n      @include focus-style;\r\n      border: none;\r\n      z-index: 11;\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n","import { h, Component, Prop, Element, Event, EventEmitter, Listen, State } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { intl, hasRoomRight, shouldOpenUp } from \"../../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"priv-datepicker\",\r\n  styleUrl: \"priv-datepicker.scss\",\r\n})\r\nexport class PrivDatepicker {\r\n  @Element() el!: HTMLPrivDatepickerElement;\r\n\r\n  @Prop() disabled: boolean = false;\r\n  @Prop({ mutable: true, reflect: true }) isExpanded: boolean = false;\r\n  @Prop({ mutable: true, reflect: true }) view: string = \"day\";\r\n  @Prop({ mutable: true, reflect: true }) date: Date = new Date();\r\n  @Prop({ mutable: true }) selectedYear: number = this.date.getUTCFullYear();\r\n  @Prop({ mutable: true }) selectedMonth: number = this.date.getUTCMonth() + 1;\r\n  @Prop({ mutable: true }) selectedDay: number = this.date.getUTCDate();\r\n  @Prop({ mutable: true }) monthInFocus: number = this.selectedMonth;\r\n  @Prop({ mutable: true }) yearInFocus: number = this.selectedYear;\r\n  @Prop({ mutable: true }) dayInFocus: number = this.selectedDay;\r\n  @State() monthNumInFocus: number = this.selectedMonth;\r\n  @Prop({ mutable: true, reflect: true }) parentId: string = \"\";\r\n\r\n  @State() isTabbing: boolean = false;\r\n\r\n  selectedDate!: HTMLTableCellElement;\r\n\r\n  @Event() cellTriggered!: EventEmitter<HTMLElement>;\r\n  @Event() toggleButtonClicked!: EventEmitter<HTMLButtonElement>;\r\n  @Event() popupClosed!: EventEmitter;\r\n  @Event() popupBlurred!: EventEmitter<{ relatedTarget: EventTarget | null }>;\r\n\r\n  private popupEl?: HTMLElement;\r\n  private buttonEl!: HTMLButtonElement;\r\n  private popupClicked: boolean = true;\r\n  private buttonClicked: boolean = true;\r\n  private prevButton!: HTMLButtonElement;\r\n  private nextButton!: HTMLButtonElement;\r\n  private prevClicked: boolean = true;\r\n  private nextClicked: boolean = true;\r\n  private openUp: boolean = false;\r\n\r\n  private calendar_months: Array<string> = [\r\n    intl.formatMessage({\r\n      id: \"date.january\",\r\n      defaultMessage: \"January\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.february\",\r\n      defaultMessage: \"February\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.march\",\r\n      defaultMessage: \"March\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.april\",\r\n      defaultMessage: \"April\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.may\",\r\n      defaultMessage: \"May\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.june\",\r\n      defaultMessage: \"June\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.july\",\r\n      defaultMessage: \"July\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.august\",\r\n      defaultMessage: \"August\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.september\",\r\n      defaultMessage: \"September\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.october\",\r\n      defaultMessage: \"October\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.november\",\r\n      defaultMessage: \"November\",\r\n      description: \"Month of the year\",\r\n    }),\r\n    intl.formatMessage({\r\n      id: \"date.december\",\r\n      defaultMessage: \"December\",\r\n      description: \"Month of the year\",\r\n    }),\r\n  ];\r\n\r\n  private weekdays: Array<string> = [\r\n    intl.formatMessage({ id: \"date.sunday\", defaultMessage: \"Sunday\" }),\r\n    intl.formatMessage({ id: \"date.monday\", defaultMessage: \"Monday\" }),\r\n    intl.formatMessage({ id: \"date.tuesday\", defaultMessage: \"Tuesday\" }),\r\n    intl.formatMessage({ id: \"date.wednesday\", defaultMessage: \"Wednesday\" }),\r\n    intl.formatMessage({ id: \"date.thursday\", defaultMessage: \"Thursday\" }),\r\n    intl.formatMessage({ id: \"date.friday\", defaultMessage: \"Friday\" }),\r\n    intl.formatMessage({ id: \"date.saturday\", defaultMessage: \"Saturday\" }),\r\n  ];\r\n\r\n  @Listen(\"keydown\")\r\n  handleKey(ev: KeyboardEvent): void {\r\n    this.prevClicked = false;\r\n    this.nextClicked = false;\r\n\r\n    switch (ev.key) {\r\n      case \"Enter\":\r\n        ev.preventDefault();\r\n        //Clunky exception for blur validation. Remove when blur reworked.\r\n        !(ev.target as HTMLElement).id.includes(\"popup-title\") && (ev.target as HTMLElement)!.click();\r\n        break;\r\n\r\n      case \"Escape\":\r\n        ev.preventDefault();\r\n        if (this.isExpanded) {\r\n          ev.stopPropagation(); // prevents closing of parent modal\r\n          this.closePopup(true);\r\n        }\r\n        break;\r\n\r\n      case \"PageUp\":\r\n        ev.preventDefault();\r\n        this.backOneMonth();\r\n        break;\r\n\r\n      case \"PageDown\":\r\n        ev.preventDefault();\r\n        this.forwardOneMonth();\r\n        break;\r\n\r\n      case \"Home\":\r\n        ev.preventDefault();\r\n        this.unfocusCell();\r\n        this.dayInFocus = 1;\r\n        forceUpdate(this.el);\r\n        break;\r\n\r\n      case \"End\":\r\n        ev.preventDefault();\r\n        this.unfocusCell();\r\n        this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);\r\n        forceUpdate(this.el);\r\n        break;\r\n\r\n      case \"ArrowLeft\":\r\n        ev.preventDefault();\r\n        if (this.view === \"day\") {\r\n          this.unfocusCell();\r\n          if (this.dayInFocus === 1) {\r\n            const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);\r\n            this.monthInFocus = newMonth.month;\r\n            this.yearInFocus = newMonth.year;\r\n            this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus);\r\n          } else {\r\n            this.dayInFocus -= 1;\r\n          }\r\n        } else {\r\n          this.unfocusMonth();\r\n          if (this.monthNumInFocus === 0) {\r\n            this.monthNumInFocus = 11;\r\n          } else {\r\n            this.monthNumInFocus -= 1;\r\n          }\r\n        }\r\n        break;\r\n\r\n      case \"ArrowRight\":\r\n        ev.preventDefault();\r\n        if (this.view === \"day\") {\r\n          this.unfocusCell();\r\n          if (this.dayInFocus === this.getMonthDays(this.monthInFocus, this.yearInFocus)) {\r\n            const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);\r\n            this.monthInFocus = newMonth.month;\r\n            this.yearInFocus = newMonth.year;\r\n            this.dayInFocus = 1;\r\n          } else {\r\n            this.dayInFocus += 1;\r\n          }\r\n        } else {\r\n          this.unfocusMonth();\r\n          if (this.monthNumInFocus === 11) {\r\n            this.monthNumInFocus = 0;\r\n          } else {\r\n            this.monthNumInFocus += 1;\r\n          }\r\n        }\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        ev.preventDefault();\r\n        if (this.view === \"day\") {\r\n          this.unfocusCell();\r\n          if (this.dayInFocus < 8) {\r\n            const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);\r\n            this.monthInFocus = newMonth.month;\r\n            this.yearInFocus = newMonth.year;\r\n            const numDaysToSubtract = 7 - this.dayInFocus;\r\n            this.dayInFocus = this.getMonthDays(this.monthInFocus, this.yearInFocus) - numDaysToSubtract;\r\n          } else {\r\n            this.dayInFocus -= 7;\r\n          }\r\n        } else {\r\n          this.unfocusMonth();\r\n          if (this.monthNumInFocus < 3) {\r\n            this.monthNumInFocus += 9;\r\n          } else {\r\n            this.monthNumInFocus -= 3;\r\n          }\r\n        }\r\n        break;\r\n\r\n      case \"ArrowDown\":\r\n        ev.preventDefault();\r\n        if (!this.isExpanded) {\r\n          this.openPopup();\r\n        } else {\r\n          if (this.view === \"day\") {\r\n            //If the down arrow is pressed from the month button or the arrow buttons, focus should shift to the current cell in focus\r\n            if (!(document.activeElement!.shadowRoot! || document).activeElement!.classList.contains(\"date-cell\")) {\r\n              this.focusCell();\r\n              break;\r\n            }\r\n\r\n            this.unfocusCell();\r\n            const changeoverDate = this.getMonthDays(this.monthInFocus, this.yearInFocus) - 7;\r\n            if (this.dayInFocus > changeoverDate) {\r\n              const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);\r\n              this.monthInFocus = newMonth.month;\r\n              this.yearInFocus = newMonth.year;\r\n              this.dayInFocus = this.dayInFocus - changeoverDate;\r\n            } else {\r\n              this.dayInFocus += 7;\r\n            }\r\n          } else {\r\n            //If the down arrow is pressed from the arrow buttons or the title box, focus should shift to the current month in focus\r\n            const activeEl = (document.activeElement!.shadowRoot! || document).activeElement!;\r\n            if (activeEl.tagName === \"BUTTON\" || activeEl.id.includes(\"popup-title-year\")) {\r\n              this.focusMonth();\r\n              break;\r\n            }\r\n\r\n            this.unfocusMonth();\r\n            if (this.monthNumInFocus > 8) {\r\n              this.monthNumInFocus -= 9;\r\n            } else {\r\n              this.monthNumInFocus += 3;\r\n            }\r\n          }\r\n        }\r\n        break;\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  toggleTabbingOn(ev: KeyboardEvent) {\r\n    const validKeys = [\"Tab\", \"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\", \"Enter\"];\r\n    if (validKeys.includes(ev.key)) {\r\n      this.isTabbing = true;\r\n    }\r\n  }\r\n\r\n  //Using mousedown prevents this from running when the keydown listener emits \".click()\" for when enter is pressed.\r\n  @Listen(\"mousedown\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  blurHandler(ev: PointerEvent): void {\r\n    if (!this.popupClicked && !this.buttonClicked && this.isExpanded) {\r\n      this.closePopup();\r\n      // in this case, the PointerEvent target is identical to the blur events relatedTarget, and is passed on as such\r\n      this.popupBlurred.emit({ relatedTarget: ev.target });\r\n    }\r\n    this.popupClicked = false;\r\n    this.buttonClicked = false;\r\n  }\r\n\r\n  @Listen(\"blur\", { target: \"window\" })\r\n  handleBlurOnWindow(ev: FocusEvent) {\r\n    // for cases where the user clicks or uses a shortcut to leave the document\r\n    if (this.isExpanded) {\r\n      this.closePopup();\r\n      this.popupBlurred.emit({ relatedTarget: ev.target });\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    this.handleSelectedDate();\r\n    if (this.isExpanded) {\r\n      this.prevClicked\r\n        ? this.prevButton.focus()\r\n        : this.nextClicked\r\n        ? this.nextButton.focus()\r\n        : this.view === \"day\"\r\n        ? this.focusCell()\r\n        : this.focusMonth();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.handleSelectedDate();\r\n    this.setDateValuesForView();\r\n  }\r\n\r\n  zeroPad(value: number | string, length: number) {\r\n    if (!String.prototype.padStart) {\r\n      String.prototype.padStart = function padStart(targetLength, padString) {\r\n        targetLength = targetLength - this.length;\r\n        if (targetLength > padString!.length) {\r\n          padString += padString!.repeat(targetLength / padString!.length);\r\n        }\r\n        return padString!.slice(0, targetLength) + String(this);\r\n      };\r\n    }\r\n    return `${value.toString()}`.padStart(length, \"0\");\r\n  }\r\n\r\n  removeZeroes(date: string): number {\r\n    return +date < 10 ? +date.slice(1) : +date;\r\n  }\r\n\r\n  isDateToday(date: Array<string>): boolean {\r\n    const today = new Date();\r\n    const todayDateArray = [\r\n      today.getFullYear().toString(),\r\n      (today.getMonth() + 1).toString(),\r\n      today.getDate().toString(),\r\n    ];\r\n    //Compare today's date to date and return true if they match\r\n    return todayDateArray.reduce(\r\n      (result: boolean, val: string, index: number) => result && this.removeZeroes(date[index]).toString() === val,\r\n      true\r\n    );\r\n  }\r\n\r\n  togglePopup() {\r\n    this.isExpanded ? this.closePopup() : this.openPopup();\r\n    this.buttonClicked = true;\r\n  }\r\n\r\n  closePopup(returnFocus: boolean = false) {\r\n    this.isExpanded = false;\r\n    this.popupEl!.classList.remove(\"open\");\r\n    window.setTimeout(() => {\r\n      //not using display none in order to get measurements of the popup while hidden\r\n      this.popupEl!.style.visibility = \"hidden\";\r\n    }, 250);\r\n    //Reset values so that menu reopens to day view with selected date in focus\r\n    if (this.view === \"day\") {\r\n      this.unfocusCell();\r\n    }\r\n    this.monthInFocus = this.selectedMonth;\r\n    this.yearInFocus = this.selectedYear;\r\n    this.dayInFocus = this.selectedDay;\r\n    this.changeView(\"day\");\r\n    if (returnFocus) {\r\n      this.buttonEl.focus();\r\n    }\r\n  }\r\n\r\n  openPopup() {\r\n    this.panelPosition();\r\n    this.setDateValuesForView();\r\n    this.prevClicked = false;\r\n    this.nextClicked = false;\r\n    this.popupEl!.style.visibility = \"visible\";\r\n    window.requestAnimationFrame(() => {\r\n      this.popupEl!.classList.add(\"open\");\r\n    });\r\n    this.isExpanded = true;\r\n    this.focusCell();\r\n  }\r\n\r\n  getMonthDays(month: number, year: number) {\r\n    const months30 = [4, 6, 9, 11];\r\n    const leapYear = year % 4 === 0;\r\n\r\n    return month === 2 ? (leapYear ? 29 : 28) : months30.includes(month) ? 30 : 31;\r\n  }\r\n\r\n  // 1 => Sunday, 7 => Saturday\r\n  getMonthFirstDay(month: number, year: number) {\r\n    return +new Date(year, month - 1, 1, 12, 0, 0).getDay() + 1;\r\n  }\r\n\r\n  getPreviousMonth(month: number, year: number) {\r\n    const prevMonth = month > 1 ? month - 1 : 12;\r\n    const prevMonthYear = month > 1 ? year : year - 1;\r\n\r\n    return { month: prevMonth, year: prevMonthYear };\r\n  }\r\n\r\n  getNextMonth(month: number, year: number) {\r\n    const nextMonth = month < 12 ? month + 1 : 1;\r\n    const nextMonthYear = month < 12 ? year : year + 1;\r\n\r\n    return { month: nextMonth, year: nextMonthYear };\r\n  }\r\n\r\n  getCalendarDates(month: number, year: number) {\r\n    // Get number of days in the month and the month's first day\r\n    const monthDays = this.getMonthDays(month, year);\r\n    const monthFirstDay = this.getMonthFirstDay(month, year);\r\n\r\n    // Get number of days to be displayed from previous and next months\r\n    // These ensure a total of 42 days (6 weeks) displayed on the calendar\r\n    const daysFromPrevMonth = monthFirstDay - 1;\r\n    let daysFromNextMonth = 42 - (daysFromPrevMonth + monthDays);\r\n    daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;\r\n\r\n    // Get the previous and next months and years\r\n    const { month: prevMonth, year: prevMonthYear } = this.getPreviousMonth(month, year);\r\n    const { month: nextMonth, year: nextMonthYear } = this.getNextMonth(month, year);\r\n\r\n    // Get number of days in previous month\r\n    const prevMonthDays = this.getMonthDays(prevMonth, prevMonthYear);\r\n\r\n    // Builds dates to be displayed from previous month. The initialized array is \"filled\" with an arbitrary number because IE and Edge won't map over an array with empty values.\r\n    const prevMonthDates = [...new Array(daysFromPrevMonth).fill(\"1\")].map((_, index) => {\r\n      const day = index + 1 + (prevMonthDays - daysFromPrevMonth);\r\n      return [prevMonthYear.toString(), this.zeroPad(prevMonth, 2), this.zeroPad(day, 2)];\r\n    });\r\n\r\n    // Builds dates to be displayed from current month. The initialized array is \"filled\" with an arbitrary number because IE and Edge won't map over an array with empty values.\r\n    const thisMonthDates = [...new Array(monthDays).fill(\"1\")].map((_, index) => {\r\n      const day = index + 1;\r\n      return [year.toString(), this.zeroPad(month, 2), this.zeroPad(day, 2)];\r\n    });\r\n\r\n    // Builds dates to be displayed from next month. The initialized array is \"filled\" with an arbitrary number because IE and Edge won't map over an array with empty values.\r\n    const nextMonthDates = [...new Array(daysFromNextMonth).fill(\"1\")].map((_, index) => {\r\n      const day = index + 1;\r\n      return [nextMonthYear.toString(), this.zeroPad(nextMonth, 2), this.zeroPad(day, 2)];\r\n    });\r\n\r\n    // Combines all dates from previous, current and next months\r\n    return [...prevMonthDates, ...thisMonthDates, ...nextMonthDates];\r\n  }\r\n\r\n  forwardOneMonth() {\r\n    this.unfocusCell();\r\n    const newMonth = this.getNextMonth(this.monthInFocus, this.yearInFocus);\r\n    this.monthInFocus = newMonth.month;\r\n    this.yearInFocus = newMonth.year;\r\n    const totalDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);\r\n    if (this.dayInFocus > this.getMonthDays(this.monthInFocus, this.yearInFocus)) {\r\n      this.dayInFocus = totalDays;\r\n    }\r\n    this.updateLiveRegion(`Displaying ${this.calendar_months[this.monthInFocus - 1]}, ${this.yearInFocus}`);\r\n  }\r\n\r\n  backOneMonth() {\r\n    this.unfocusCell();\r\n    const newMonth = this.getPreviousMonth(this.monthInFocus, this.yearInFocus);\r\n    this.monthInFocus = newMonth.month;\r\n    this.yearInFocus = newMonth.year;\r\n    const totalDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);\r\n    if (this.dayInFocus > this.getMonthDays(this.monthInFocus, this.yearInFocus)) {\r\n      this.dayInFocus = totalDays;\r\n    }\r\n    this.updateLiveRegion(`Viewing ${this.calendar_months[this.monthInFocus - 1]}, ${this.yearInFocus}`);\r\n  }\r\n\r\n  handleTriggeredDate(el: HTMLTableDataCellElement) {\r\n    this.cellTriggered.emit(el as HTMLTableDataCellElement);\r\n    // change of input value will trigger the function updating selectedDate\r\n    this.closePopup(true);\r\n  }\r\n\r\n  handleSelectedDate() {\r\n    //Remove old selection status\r\n    if (this.selectedDate) {\r\n      this.selectedDate.removeAttribute(\"aria-selected\");\r\n    }\r\n    //Update selected date to new date inputted/selected\r\n    this.selectedDate = this.getCellById(this.selectedYear, this.selectedMonth, this.selectedDay);\r\n\r\n    if (this.selectedDate) {\r\n      this.selectedDate.setAttribute(\"aria-selected\", \"true\");\r\n    }\r\n  }\r\n\r\n  getCellById(year: number, month: number, day: number) {\r\n    const id = year + this.zeroPad(month, 2) + this.zeroPad(day, 2);\r\n    return this.el.querySelector(`#cell-${id}-${this.parentId}`) as HTMLTableCellElement;\r\n  }\r\n\r\n  unfocusCell() {\r\n    const cellToUnfocus = this.getCellById(this.yearInFocus, this.monthInFocus, this.dayInFocus);\r\n    cellToUnfocus.tabIndex = -1;\r\n  }\r\n\r\n  focusCell() {\r\n    //These two lines of code prevent an error from happening when the day in focus does not exist in a new month selected, e.g., May 31 is in focus, then the user selects \"November\". It will return focus in the date view to the last day of the month so that focus doesn't fly out of the popup.\r\n    const maxDays = this.getMonthDays(this.monthInFocus, this.yearInFocus);\r\n    this.dayInFocus = this.dayInFocus > maxDays ? maxDays : this.dayInFocus;\r\n\r\n    const cellToFocus = this.getCellById(this.yearInFocus, this.monthInFocus, this.dayInFocus);\r\n    if (cellToFocus) {\r\n      cellToFocus.tabIndex = 0;\r\n      cellToFocus.focus();\r\n    }\r\n  }\r\n\r\n  unfocusMonth() {\r\n    const monthToUnfocus = this.el.querySelector(`#month-${this.monthNumInFocus}-${this.parentId}`) as HTMLDivElement;\r\n    monthToUnfocus.tabIndex = -1;\r\n  }\r\n\r\n  focusMonth() {\r\n    const monthToFocus = this.el.querySelector(`#month-${this.monthNumInFocus}-${this.parentId}`) as HTMLDivElement;\r\n    monthToFocus.tabIndex = 0;\r\n    monthToFocus.focus();\r\n  }\r\n\r\n  trapFocusLeft(ev: KeyboardEvent) {\r\n    if (ev.shiftKey && ev.key === \"Tab\") {\r\n      ev.preventDefault();\r\n      this.focusCellInView();\r\n    }\r\n  }\r\n\r\n  trapFocusEnd(ev: KeyboardEvent) {\r\n    if (!ev.shiftKey && ev.key === \"Tab\") {\r\n      ev.preventDefault();\r\n      this.prevButton.focus();\r\n    }\r\n  }\r\n\r\n  trapFocusRight(ev: KeyboardEvent) {\r\n    if (!ev.shiftKey && ev.key === \"Tab\") {\r\n      ev.preventDefault();\r\n      this.focusCellInView();\r\n    }\r\n  }\r\n\r\n  focusCellInView() {\r\n    if (this.view === \"day\") {\r\n      this.focusCell();\r\n    } else {\r\n      this.focusMonth();\r\n    }\r\n  }\r\n\r\n  toggleBusyAttribute(state: string) {\r\n    (this.el.querySelector(\"#wm-container\") as HTMLElement).setAttribute(\"aria-busy\", state);\r\n  }\r\n\r\n  setDateValuesForView() {\r\n    this.selectedYear = this.date.getUTCFullYear();\r\n    this.selectedMonth = this.date.getUTCMonth() + 1;\r\n    this.selectedDay = this.date.getUTCDate();\r\n    this.monthInFocus = this.selectedMonth;\r\n    this.yearInFocus = this.selectedYear;\r\n    this.dayInFocus = this.selectedDay;\r\n    this.monthNumInFocus = this.selectedMonth - 1;\r\n  }\r\n\r\n  updateLiveRegion(text: string) {\r\n    let liveRegion = this.el.querySelector(\"#live-region\") as HTMLElement;\r\n    liveRegion.innerHTML = text;\r\n  }\r\n\r\n  panelPosition() {\r\n    // getting a ref to the input el (in datepicker.tsx)\r\n    let host = document.getElementById(this.parentId) as HTMLWmDatepickerElement;\r\n\r\n    const labelHeight = host.shadowRoot!.querySelector(\".label-wrapper\")!.clientHeight;\r\n\r\n    this.openUp = shouldOpenUp(host, this.popupEl!, labelHeight);\r\n\r\n    if (hasRoomRight(host, 336)) {\r\n      this.popupEl!.style.left = \"0\";\r\n      this.popupEl!.style.right = \"auto\";\r\n    } else {\r\n      this.popupEl!.style.right = \"0\";\r\n      this.popupEl!.style.left = \"auto\";\r\n    }\r\n  }\r\n\r\n  changeView(newView: string) {\r\n    this.view = newView;\r\n    //Ensure month view always opens to the month last visited in date view\r\n    this.monthNumInFocus = this.monthInFocus - 1;\r\n  }\r\n\r\n  renderCalendarDate = (date: Array<string>, index: number) => {\r\n    let monthOfDate = this.removeZeroes(String(date[1]));\r\n    let dayOfDate = this.removeZeroes(String(date[2]));\r\n    let isThisMonth = monthOfDate === this.monthInFocus ? \"current-month\" : \"\";\r\n    const dateId = date[0] + date[1] + date[2];\r\n    const isToday = this.isDateToday(date);\r\n\r\n    return (\r\n      <div\r\n        role=\"gridcell\"\r\n        id={`cell-${dateId}-${this.parentId}`}\r\n        class={`date-cell ${isThisMonth}`}\r\n        aria-selected={false}\r\n        aria-label={`${\r\n          isToday\r\n            ? `${intl.formatMessage({\r\n                id: \"date.today\",\r\n                defaultMessage: \"today\",\r\n                description: \"calendar button\",\r\n              })}, `\r\n            : \"\"\r\n        }${this.weekdays[index]}, ${this.calendar_months[monthOfDate - 1]} ${dayOfDate}, ${date[0]}`}\r\n        onClick={(ev) => {\r\n          this.handleTriggeredDate(ev.target as HTMLTableDataCellElement);\r\n        }}\r\n        onKeyDown={(ev: KeyboardEvent) => this.trapFocusEnd(ev)}\r\n        data-month={date[1]}\r\n        data-year={date[0]}\r\n        onBlur={(ev: FocusEvent) => ev.stopPropagation()}\r\n      >\r\n        {dayOfDate}\r\n      </div>\r\n    );\r\n  };\r\n\r\n  renderMonths(month: string, index: number) {\r\n    return (\r\n      <div\r\n        id={`month-${index}-${this.parentId}`}\r\n        class={`month ${this.selectedMonth - 1 === index ? \"selected\" : \"\"}`}\r\n        role=\"gridcell\"\r\n        tabindex={index + 1 === this.monthInFocus ? 0 : -1}\r\n        onKeyDown={(ev: KeyboardEvent) => this.trapFocusEnd(ev)}\r\n        onBlur={(ev: FocusEvent) => ev.stopPropagation()}\r\n        onClick={() => {\r\n          this.monthInFocus = index + 1;\r\n          this.changeView(\"day\");\r\n        }}\r\n      >\r\n        {month}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    const dates = this.getCalendarDates(this.monthInFocus, this.yearInFocus);\r\n\r\n    return (\r\n      <div class=\"container\" id=\"wm-container\">\r\n        <button\r\n          disabled={this.disabled}\r\n          onClick={this.togglePopup.bind(this)}\r\n          aria-describedby={`date-input-${this.parentId}`}\r\n          ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\r\n          aria-expanded={`${this.isExpanded}`}\r\n          class=\"toggle\"\r\n          id={`toggle-${this.parentId}`}\r\n        >\r\n          <span\r\n            class=\"calendar\"\r\n            title={intl.formatMessage({\r\n              id: \"date.calendarView\",\r\n              defaultMessage: \"Calendar View\",\r\n              description: \"Calendar button\",\r\n            })}\r\n          />\r\n        </button>\r\n        <div\r\n          class={`popup ${this.view}-view ${this.openUp ? \"expand-upwards\" : \"\"} ${\r\n            this.isTabbing ? \"user-is-tabbing\" : \"\"\r\n          }`}\r\n          id={`popup-${this.parentId}`}\r\n          ref={(el) => (this.popupEl = el as HTMLElement)}\r\n          onClick={() => (this.popupClicked = true)}\r\n          role=\"application\"\r\n          aria-describedby=\"application\"\r\n        >\r\n          {this.view === \"day\" ? (\r\n            <div class=\"day-view\">\r\n              <div class=\"calendar-header\">\r\n                <button\r\n                  onClick={() => {\r\n                    this.prevClicked = true;\r\n                    this.popupClicked = true;\r\n                    this.backOneMonth();\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => this.trapFocusLeft(ev)}\r\n                  ref={(el) => (this.prevButton = el as HTMLButtonElement)}\r\n                  class=\"arw-btn\"\r\n                  aria-label={intl.formatMessage({\r\n                    id: \"date.selectPreviousMonth\",\r\n                    defaultMessage: \"Select previous month\",\r\n                    description: \"Calendar button\",\r\n                  })}\r\n                >\r\n                  <span class=\"mdi\">&#xf141;</span>\r\n                </button>\r\n                <div\r\n                  id={`popup-title-month-${this.parentId}`}\r\n                  class=\"title-box\"\r\n                  tabindex={0}\r\n                  role=\"button\"\r\n                  onKeyDown={(ev: KeyboardEvent) => {\r\n                    if (ev.key === \"Enter\" || ev.key === \" \") {\r\n                      ev.preventDefault();\r\n                      this.changeView(\"month\");\r\n                    }\r\n                  }}\r\n                  onClick={this.changeView.bind(this, \"month\")}\r\n                  aria-label={`${intl.formatMessage({\r\n                    id: \"date.currentMonth\",\r\n                    defaultMessage: \"current month\",\r\n                    description: \"Calendar button\",\r\n                  })}: ${this.calendar_months[this.monthInFocus - 1]}\r\n                  ${this.yearInFocus}.`}\r\n                  aria-describedby=\"month-title\"\r\n                >\r\n                  <span class=\"title\" aria-hidden=\"true\">\r\n                    {this.calendar_months[this.monthInFocus - 1]} {this.yearInFocus}\r\n                  </span>\r\n                </div>\r\n                <button\r\n                  onClick={() => {\r\n                    this.nextClicked = true;\r\n                    this.popupClicked = true;\r\n                    this.forwardOneMonth();\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => this.trapFocusRight(ev)}\r\n                  aria-label={intl.formatMessage({\r\n                    id: \"date.selectNextMonth\",\r\n                    defaultMessage: \"Select next month\",\r\n                    description: \"Calendar button\",\r\n                  })}\r\n                  ref={(el) => (this.nextButton = el as HTMLButtonElement)}\r\n                  class=\"arw-btn\"\r\n                >\r\n                  <span class=\"mdi\">&#xf142;</span>\r\n                </button>\r\n              </div>\r\n              <div aria-labelledby={`popup-title-month-${this.parentId}`} role=\"grid\" class=\"date-grid\">\r\n                <div role=\"rowgroup\" class=\"date-header\">\r\n                  <div role=\"row\" class=\"header-row\">\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.su\",\r\n                          defaultMessage: \"Su\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.mo\",\r\n                          defaultMessage: \"Mo\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.tu\",\r\n                          defaultMessage: \"Tu\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.we\",\r\n                          defaultMessage: \"We\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.th\",\r\n                          defaultMessage: \"Th\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.fr\",\r\n                          defaultMessage: \"Fr\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                    <div role=\"columnheader\" class=\"header-cell\">\r\n                      <span>\r\n                        {intl.formatMessage({\r\n                          id: \"date.sa\",\r\n                          defaultMessage: \"Sa\",\r\n                          description: \"Abbreviated day of the week\",\r\n                        })}\r\n                      </span>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div role=\"rowgroup\">\r\n                  <div role=\"row\" class=\"date-row\">\r\n                    {dates.slice(0, 7).map((date, i) => this.renderCalendarDate(date, i))}\r\n                  </div>\r\n                  <div role=\"row\">{dates.slice(7, 14).map((date, i) => this.renderCalendarDate(date, i))}</div>\r\n                  <div role=\"row\">{dates.slice(14, 21).map((date, i) => this.renderCalendarDate(date, i))}</div>\r\n                  <div role=\"row\">{dates.slice(21, 28).map((date, i) => this.renderCalendarDate(date, i))}</div>\r\n                  <div role=\"row\">{dates.slice(28, 35).map((date, i) => this.renderCalendarDate(date, i))}</div>\r\n                  {dates.length > 35 ? (\r\n                    <div role=\"row\">{dates.slice(35).map((date, i) => this.renderCalendarDate(date, i))}</div>\r\n                  ) : (\r\n                    \"\"\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          ) : (\r\n            <div class=\"month-view\">\r\n              <div class=\"calendar-header\">\r\n                <button\r\n                  onClick={() => {\r\n                    this.prevClicked = true;\r\n                    this.popupClicked = true;\r\n                    this.yearInFocus -= 1;\r\n                    this.updateLiveRegion(`${this.yearInFocus} selected.`);\r\n                  }}\r\n                  onKeyDown={(ev: KeyboardEvent) => this.trapFocusLeft(ev)}\r\n                  aria-label={intl.formatMessage({\r\n                    id: \"date.selectPreviousYear\",\r\n                    defaultMessage: \"Select previous year\",\r\n                    description: \"Calendar button\",\r\n                  })}\r\n                  ref={(el) => (this.prevButton = el as HTMLButtonElement)}\r\n                  class=\"arw-btn\"\r\n                >\r\n                  <span class=\"mdi\">&#xf141;</span>\r\n                </button>\r\n                <div\r\n                  id={`popup-title-year-${this.parentId}`}\r\n                  tabindex={0}\r\n                  class=\"title-box year\"\r\n                  role=\"button\"\r\n                  onClick={this.changeView.bind(this, \"day\")}\r\n                  onKeyDown={(ev: KeyboardEvent) => {\r\n                    if (ev.key === \"Enter\" || ev.key === \" \") {\r\n                      ev.preventDefault();\r\n                      this.changeView(\"day\");\r\n                    }\r\n                  }}\r\n                  aria-labelledby=\"year-title\"\r\n                >\r\n                  <span class=\"title\">{this.yearInFocus}</span>\r\n                </div>\r\n                <button\r\n                  onClick={() => {\r\n                    this.nextClicked = true;\r\n                    this.popupClicked = true;\r\n                    this.yearInFocus += 1;\r\n                    this.updateLiveRegion(`${this.yearInFocus} selected.`);\r\n                  }}\r\n                  aria-label={intl.formatMessage({\r\n                    id: \"date.selectNextYear\",\r\n                    defaultMessage: \"Select next year\",\r\n                    description: \"Calendar button\",\r\n                  })}\r\n                  onKeyDown={(ev: KeyboardEvent) => this.trapFocusRight(ev)}\r\n                  ref={(el) => (this.nextButton = el as HTMLButtonElement)}\r\n                  class=\"arw-btn\"\r\n                >\r\n                  <span class=\"mdi\">&#xf142;</span>\r\n                </button>\r\n              </div>\r\n              <div aria-labelledby={`popup-title-year-${this.parentId}`} role=\"grid\" class=\"months\">\r\n                <div role=\"row\" class=\"month-row\">\r\n                  {this.calendar_months\r\n                    .slice(0, 3)\r\n                    .map((month: string, index: number) => this.renderMonths(month, index))}\r\n                </div>\r\n                <div role=\"row\" class=\"month-row\">\r\n                  {this.calendar_months\r\n                    .slice(3, 6)\r\n                    .map((month: string, index: number) => this.renderMonths(month, index + 3))}\r\n                </div>\r\n                <div role=\"row\" class=\"month-row\">\r\n                  {this.calendar_months\r\n                    .slice(6, 9)\r\n                    .map((month: string, index: number) => this.renderMonths(month, index + 6))}\r\n                </div>\r\n                <div role=\"row\" class=\"month-row\">\r\n                  {this.calendar_months\r\n                    .slice(9)\r\n                    .map((month: string, index: number) => this.renderMonths(month, index + 9))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.isExpanded && <div id=\"live-region\" aria-live=\"polite\" aria-relevant=\"text\" class=\"sr-only\" />}\r\n        <div id=\"month-title\" class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"date.selectMonth\",\r\n            defaultMessage: \"Activate to select a month.\",\r\n            description: \"Calendar button\",\r\n          })}\r\n        </div>\r\n        <div id=\"year-title\" class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"date.selectYear\",\r\n            defaultMessage: \"Activate to select a year.\",\r\n            description: \"Calendar button\",\r\n          })}\r\n        </div>\r\n        <div id=\"application\" class=\"sr-only\">\r\n          {intl.formatMessage({\r\n            id: \"date.instructions\",\r\n            defaultMessage:\r\n              \"Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.\",\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-3759b7af.system.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["privNavigatorButtonCss","PrivNavigatorButton","exports","class_1","prototype","handleClick","this","buttonActivated","emit","render","_a","altText","tabbingClass","isTabbing","h","expanded","toString","class","concat","onClick","bind"],"sources":["src/components/wm-navigator/priv-navigator-button/priv-navigator-button.scss?tag=priv-navigator-button&encapsulation=shadow","src/components/wm-navigator/priv-navigator-button/priv-navigator-button.tsx"],"sourcesContent":[":host,\npriv-navigator-button {\n  * {\n    box-sizing: border-box;\n  }\n\n  .navigator {\n    color: #575195;\n    padding: 0 1.25rem;\n    position: static !important;\n    height: 100%;\n    background: transparent;\n    border: none;\n    min-height: rem-calc(60);\n    cursor: pointer;\n    border-radius: 0; //Edge\n    top: 50%;\n    img {\n      height: rem-calc(36);\n      width: rem-calc(36);\n      vertical-align: middle;\n    }\n\n    &:hover {\n      background: #dcdbde;\n    }\n\n    &:active,\n    &:focus {\n      outline: none;\n    }\n\n    &.user-is-tabbing:focus {\n      @include focus-style;\n    }\n  }\n\n  button:after {\n    vertical-align: middle;\n    height: rem-calc(36);\n    width: rem-calc(36);\n    background-size: 36px;\n    display: inline-block;\n    background-image: url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);\n    content: \"\";\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"priv-navigator-button\",\n  styleUrl: \"priv-navigator-button.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class PrivNavigatorButton {\n  @Element() el!: any;\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Prop() altText: string = \"\";\n  @Prop({ mutable: true }) isTabbing: boolean = false;\n  // @Prop({ attribute: \"mode\", reflect: true, mutable: true })\n  // mode: string = \"planning\";\n  @Event() buttonActivated!: EventEmitter;\n\n  handleClick() {\n    this.buttonActivated.emit();\n  }\n\n  render() {\n    const { handleClick, altText } = this;\n    const tabbingClass = this.isTabbing ? \"user-is-tabbing\" : \"\";\n\n    return (\n      <button\n        aria-expanded={this.expanded.toString()}\n        class={`navigator ${tabbingClass}`}\n        onClick={handleClick.bind(this)}\n        aria-label={altText}\n      ></button>\n    );\n  }\n}\n"],"mappings":"0JAAA,IAAMA,EAAyB,y5C,ICOlBC,EAAmBC,EAAA,mC,uFAEe,M,aACnB,G,eACoB,K,CAK9CC,EAAAC,UAAAC,YAAA,WACEC,KAAKC,gBAAgBC,M,EAGvBL,EAAAC,UAAAK,OAAA,WACQ,IAAAC,EAA2BJ,KAAzBD,EAAWK,EAAAL,YAAEM,EAAOD,EAAAC,QAC5B,IAAMC,EAAeN,KAAKO,UAAY,kBAAoB,GAE1D,OACEC,EAAA,0BACiBR,KAAKS,SAASC,WAC7BC,MAAO,aAAAC,OAAaN,GACpBO,QAASd,EAAYe,KAAKd,MAAK,aACnBK,G,kOAtBY,I"}
+{"version":3,"names":["privNavigatorButtonCss","PrivNavigatorButton","exports","class_1","prototype","handleClick","this","buttonActivated","emit","render","_a","altText","tabbingClass","isTabbing","h","expanded","toString","class","concat","onClick","bind"],"sources":["src/components/wm-navigator/priv-navigator-button/priv-navigator-button.scss?tag=priv-navigator-button&encapsulation=shadow","src/components/wm-navigator/priv-navigator-button/priv-navigator-button.tsx"],"sourcesContent":[":host,\r\npriv-navigator-button {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .navigator {\r\n    color: #575195;\r\n    padding: 0 1.25rem;\r\n    position: static !important;\r\n    height: 100%;\r\n    background: transparent;\r\n    border: none;\r\n    min-height: rem-calc(60);\r\n    cursor: pointer;\r\n    border-radius: 0; //Edge\r\n    top: 50%;\r\n    img {\r\n      height: rem-calc(36);\r\n      width: rem-calc(36);\r\n      vertical-align: middle;\r\n    }\r\n\r\n    &:hover {\r\n      background: #dcdbde;\r\n    }\r\n\r\n    &:active,\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\r\n  button:after {\r\n    vertical-align: middle;\r\n    height: rem-calc(36);\r\n    width: rem-calc(36);\r\n    background-size: 36px;\r\n    display: inline-block;\r\n    background-image: url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);\r\n    content: \"\";\r\n  }\r\n}\r\n","import { Component, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"priv-navigator-button\",\r\n  styleUrl: \"priv-navigator-button.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class PrivNavigatorButton {\r\n  @Element() el!: any;\r\n  @Prop({ mutable: true }) expanded: boolean = false;\r\n  @Prop() altText: string = \"\";\r\n  @Prop({ mutable: true }) isTabbing: boolean = false;\r\n  // @Prop({ attribute: \"mode\", reflect: true, mutable: true })\r\n  // mode: string = \"planning\";\r\n  @Event() buttonActivated!: EventEmitter;\r\n\r\n  handleClick() {\r\n    this.buttonActivated.emit();\r\n  }\r\n\r\n  render() {\r\n    const { handleClick, altText } = this;\r\n    const tabbingClass = this.isTabbing ? \"user-is-tabbing\" : \"\";\r\n\r\n    return (\r\n      <button\r\n        aria-expanded={this.expanded.toString()}\r\n        class={`navigator ${tabbingClass}`}\r\n        onClick={handleClick.bind(this)}\r\n        aria-label={altText}\r\n      ></button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"0JAAA,IAAMA,EAAyB,y5C,ICOlBC,EAAmBC,EAAA,mC,uFAEe,M,aACnB,G,eACoB,K,CAK9CC,EAAAC,UAAAC,YAAA,WACEC,KAAKC,gBAAgBC,M,EAGvBL,EAAAC,UAAAK,OAAA,WACQ,IAAAC,EAA2BJ,KAAzBD,EAAWK,EAAAL,YAAEM,EAAOD,EAAAC,QAC5B,IAAMC,EAAeN,KAAKO,UAAY,kBAAoB,GAE1D,OACEC,EAAA,0BACiBR,KAAKS,SAASC,WAC7BC,MAAO,aAAAC,OAAaN,GACpBO,QAASd,EAAYe,KAAKd,MAAK,aACnBK,G,kOAtBY,I"}

package/dist/ripple/{p-0b31c210.entry.js → p-40cc5375.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as s,g as a,f as o}from"./p-1c23de4a.js";import{d as n,g as r}from"./p-9fd3badc.js";const h=":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host.hide{display:none}";const b=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.keydownOnTabItem=e(this,"keydownOnTabItem",7);this.tabItemLoaded=e(this,"tabItemLoaded",7);this.tabClicked=t=>{t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})};this.tabPressed=t=>{const e=t.key;if(e==="Enter"||e===" "){t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})}else if(e.includes("Arrow")){t.preventDefault();this.keydownOnTabItem.emit({tabItem:this.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}get parentTabList(){return this.el.parentElement}toggleTabbingOn(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")}toggleTabbingOff(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")}componentDidLoad(){this.tabItemLoaded.emit()}render(){let t=this.show?"":"hide ";t+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";let e={};const a=this.parentTabList&&this.parentTabList.customPadding;if(a){const t=parseInt(a,10)*2||0;const i=a.split(/([0-9]+)/).pop();e={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":`calc(100% - ${t}${i}) 3px`}}return i(s,{role:"presentation"},i("li",{class:"tab-item",role:"presentation"},i("a",{class:`tab ${t}`,style:e,role:"tab",ref:t=>this.linkEl=t,onClick:this.tabClicked,id:`tab-link-${this.tabId}`,onKeyDown:t=>this.tabPressed(t),"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},i("slot",null))))}static get delegatesFocus(){return true}get el(){return a(this)}};b.style=h;const l=":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";const d=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.debouncedSetLayout=n((()=>{if(!this.listWidth){this.setListWidth()}o(this.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}get menuLayout(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}}get tabItems(){return Array.from(this.el.querySelectorAll("wm-tab-item"))}get selectedTabItem(){return this.tabItems.filter((t=>t.selected))[0]}getLinkEl(t){return t.shadowRoot.querySelector("a")}get panels(){const t=Array.from(document.querySelectorAll("wm-tab-panel"));const e=this.tabItems.map((t=>t.tabId));return t.filter((t=>e.includes(t.tabId)))}getPanel(t){return this.panels.find((e=>e.tabId===t))}setListWidth(){let t=this.tabItems.reduce(((t,e)=>t+e.offsetWidth),0);this.listWidth=t&&t>0?t:this.listWidth}setSelected(t){this.tabItems.map((e=>e.selected=e.tabId===t));const e=this.panels.length===1&&this.tabItems.length>1;if(e){this.setAttributesOnPanel(this.panels[0],this.selectedTabItem);this.panels[0].active=true}else{this.panels.map((e=>e.active=e.tabId===t))}}showItems(){this.tabItems.map((t=>t.show=true))}hideItems(){this.tabItems.map((t=>t.show=false))}componentWillLoad(){this.el.focus=()=>{this.selectedTabItem&&this.selectedTabItem.focus()}}componentDidLoad(){this.setLayout();const t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)}tabItemLoaded(t){this.setAriaOnPanelAndTab(t.target)}setAriaOnPanelAndTab(t){const e=this.getPanel(t.tabId);if(!e){if(this.panels.length===1){this.setAttributesOnTab(t,this.panels[0])}}else{this.setAttributesOnPanel(e,t);this.setAttributesOnTab(t,e)}}setAttributesOnTab(t,e){const i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href",`#${e.id}`)}}removeAttributesOnTab(t){const e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}}setAttributesOnPanel(t,e){const i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}}handleTabSelected(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}}handleKeydown(t){const e=t.detail.key;const i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}}handleLeftRightArrow(t,e){if(e){t=e==="ArrowLeft"?t-1:t+1}if(t<0){t=this.tabItems.length-1}else if(t===this.tabItems.length){t=0}const i=this.tabItems[t];this.getLinkEl(i).focus()}setLayout(){this.debouncedSetLayout()}renderMenuOrTabs(){if(this.menuLayout){this.hideItems();return i("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();let t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return i("ul",{class:`tabcontainer ${this.customBackground||""}`,style:t,role:"tablist"},i("slot",null))}}renderOptions(){return this.tabItems.map((t=>i("wm-option",{id:`tab-link-${t.tabId}`,selected:t.tabId===this.selectedTab,onClick:e=>{e.preventDefault();this.wmTabSelected.emit({tabId:t.tabId});this.tabSelected.emit({tabId:t.tabId})}},t.textContent)))}render(){return i(s,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{selectedTab:["setSelected"]}}};d.style=l;const c="wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";const p=class{constructor(i){t(this,i);this.tabPanelLoaded=e(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}componentWillLoad(){!this.el.id&&this.el.setAttribute("id",r())}componentDidLoad(){this.tabPanelLoaded.emit({tabId:this.tabId})}toggleTabbingOn(){this.el.classList.add("user-is-tabbing")}toggleTabbingOff(){this.el.classList.remove("user-is-tabbing")}render(){return i(s,{role:"tabpanel",class:{"tab-hidden":!this.active}})}get el(){return a(this)}};p.style=c;export{b as wm_tab_item,d as wm_tab_list,p as wm_tab_panel};
-//# sourceMappingURL=p-0b31c210.entry.js.map
+import{r as t,c as e,h as i,H as s,g as a,f as o}from"./p-1c23de4a.js";import{d as n,g as r}from"./p-edfba0e1.js";const h=":host{font-family:inherit;display:inline-block}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host.hide{display:none}";const b=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.keydownOnTabItem=e(this,"keydownOnTabItem",7);this.tabItemLoaded=e(this,"tabItemLoaded",7);this.tabClicked=t=>{t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})};this.tabPressed=t=>{const e=t.key;if(e==="Enter"||e===" "){t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})}else if(e.includes("Arrow")){t.preventDefault();this.keydownOnTabItem.emit({tabItem:this.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}get parentTabList(){return this.el.parentElement}toggleTabbingOn(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")}toggleTabbingOff(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")}componentDidLoad(){this.tabItemLoaded.emit()}render(){let t=this.show?"":"hide ";t+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";let e={};const a=this.parentTabList&&this.parentTabList.customPadding;if(a){const t=parseInt(a,10)*2||0;const i=a.split(/([0-9]+)/).pop();e={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":`calc(100% - ${t}${i}) 3px`}}return i(s,{role:"presentation"},i("li",{class:"tab-item",role:"presentation"},i("a",{class:`tab ${t}`,style:e,role:"tab",ref:t=>this.linkEl=t,onClick:this.tabClicked,id:`tab-link-${this.tabId}`,onKeyDown:t=>this.tabPressed(t),"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},i("slot",null))))}static get delegatesFocus(){return true}get el(){return a(this)}};b.style=h;const l=":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host *,wm-tab-list *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";const d=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.debouncedSetLayout=n((()=>{if(!this.listWidth){this.setListWidth()}o(this.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}get menuLayout(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}}get tabItems(){return Array.from(this.el.querySelectorAll("wm-tab-item"))}get selectedTabItem(){return this.tabItems.filter((t=>t.selected))[0]}getLinkEl(t){return t.shadowRoot.querySelector("a")}get panels(){const t=Array.from(document.querySelectorAll("wm-tab-panel"));const e=this.tabItems.map((t=>t.tabId));return t.filter((t=>e.includes(t.tabId)))}getPanel(t){return this.panels.find((e=>e.tabId===t))}setListWidth(){let t=this.tabItems.reduce(((t,e)=>t+e.offsetWidth),0);this.listWidth=t&&t>0?t:this.listWidth}setSelected(t){this.tabItems.map((e=>e.selected=e.tabId===t));const e=this.panels.length===1&&this.tabItems.length>1;if(e){this.setAttributesOnPanel(this.panels[0],this.selectedTabItem);this.panels[0].active=true}else{this.panels.map((e=>e.active=e.tabId===t))}}showItems(){this.tabItems.map((t=>t.show=true))}hideItems(){this.tabItems.map((t=>t.show=false))}componentWillLoad(){this.el.focus=()=>{this.selectedTabItem&&this.selectedTabItem.focus()}}componentDidLoad(){this.setLayout();const t=this.selectedTab||this.tabItems[0].tabId;this.setSelected(t)}tabItemLoaded(t){this.setAriaOnPanelAndTab(t.target)}setAriaOnPanelAndTab(t){const e=this.getPanel(t.tabId);if(!e){if(this.panels.length===1){this.setAttributesOnTab(t,this.panels[0])}}else{this.setAttributesOnPanel(e,t);this.setAttributesOnTab(t,e)}}setAttributesOnTab(t,e){const i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href",`#${e.id}`)}}removeAttributesOnTab(t){const e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}}setAttributesOnPanel(t,e){const i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}}handleTabSelected(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}}handleKeydown(t){const e=t.detail.key;const i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"||e==="ArrowRight"){this.handleLeftRightArrow(i,e)}}handleLeftRightArrow(t,e){if(e){t=e==="ArrowLeft"?t-1:t+1}if(t<0){t=this.tabItems.length-1}else if(t===this.tabItems.length){t=0}const i=this.tabItems[t];this.getLinkEl(i).focus()}setLayout(){this.debouncedSetLayout()}renderMenuOrTabs(){if(this.menuLayout){this.hideItems();return i("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();let t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return i("ul",{class:`tabcontainer ${this.customBackground||""}`,style:t,role:"tablist"},i("slot",null))}}renderOptions(){return this.tabItems.map((t=>i("wm-option",{id:`tab-link-${t.tabId}`,selected:t.tabId===this.selectedTab,onClick:e=>{e.preventDefault();this.wmTabSelected.emit({tabId:t.tabId});this.tabSelected.emit({tabId:t.tabId})}},t.textContent)))}render(){return i(s,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{selectedTab:["setSelected"]}}};d.style=l;const c="wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";const p=class{constructor(i){t(this,i);this.tabPanelLoaded=e(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}componentWillLoad(){!this.el.id&&this.el.setAttribute("id",r())}componentDidLoad(){this.tabPanelLoaded.emit({tabId:this.tabId})}toggleTabbingOn(){this.el.classList.add("user-is-tabbing")}toggleTabbingOff(){this.el.classList.remove("user-is-tabbing")}render(){return i(s,{role:"tabpanel",class:{"tab-hidden":!this.active}})}get el(){return a(this)}};p.style=c;export{b as wm_tab_item,d as wm_tab_list,p as wm_tab_panel};
+//# sourceMappingURL=p-40cc5375.entry.js.map

package/dist/ripple/p-40cc5375.entry.js.map

@@ -0,0 +1 @@
+{"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-76830e28.entry.js → p-4370bb17.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as s,H as e,g as n}from"./p-1c23de4a.js";import{o,g as r,m as h,v as a}from"./p-9fd3badc.js";import{g as m}from"./p-888bec42.js";const d=":host{position:relative;display:inline-block;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;color:#575195;font-family:inherit}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host(:focus){outline:none}wm-action-menu:focus{outline:none}.dropdown{position:absolute;padding:0;margin:0.25rem 0;border-radius:3px 3px 3px 3px;min-width:11.4375rem;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;visibility:hidden;-webkit-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);background:#fff;z-index:10;text-align:left;white-space:nowrap}.dropdown:focus{outline:none}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1);visibility:visible}.dropdown.open-up{bottom:2.5rem;top:auto;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.right{left:0}.dropdown.left{right:0}";const l=class{constructor(s){t(this,s);this.wmActionMenuLoaded=i(this,"wmActionMenuLoaded",7);this.menuLoaded=i(this,"menuLoaded",7);this.openUp=false;this.keysSoFar="";this.searchIndex=0;this.keyClear=null;this.isExpanded=false;this.tooltipPosition=undefined;this.actionMenuType=null;this.buttonType=null;this.buttonText=undefined;this.disabled=false;this.tooltip=undefined;this.labelForIdenticalButtons=undefined;this.darkMode=undefined}get horizontalPosition(){return!!this.el&&!!this.itemsEl&&o(this.el,this.itemsEl)?"right":"left"}get childItems(){return Array.from(this.el.querySelectorAll("wm-menuitem"))}get internalButtonType(){return this.tempActionMenuType==="icon"||this.tempActionMenuType==="text"?this.tempActionMenuType+"only":this.tempActionMenuType}get tempActionMenuType(){return this.actionMenuType||this.buttonType||"icon"}handleClickedItem(){this.close()}handleKeyUp(t){this.moveUp(t.target)}handleKeyDown(t){this.moveDown(t.detail)}handleHomeKey(){this.focusFirstItem()}handleEndKey(){this.focusLastItem()}handleTabKey(){if(this.isExpanded){this.close()}}handleEscKey(){this.close();this.wmButtonEl.focus()}handleKey(t){switch(t.key){case"ArrowDown":if(!this.isExpanded){t.preventDefault();this.open();window.requestAnimationFrame((()=>this.focusFirstItem()))}break;case"ArrowUp":if(!this.isExpanded){t.preventDefault();this.open();window.requestAnimationFrame((()=>this.focusLastItem()))}break}}handleMenuitemBlur(t){const i=t.detail.relatedTarget===this.el||this.el.contains(t.detail.relatedTarget);if(!i){const i=new CustomEvent("blur");i.relatedTarget=t.detail.relatedTarget;this.el.dispatchEvent(i)}}handleButtonBlur(t){const i=t.relatedTarget===this.el||this.el.contains(t.relatedTarget);if(i){t.stopPropagation()}}componentWillLoad(){this.uid=this.el.id?this.el.id:r();if(this.buttonType){console.warn("wm-action-menu: button-type has been deprecated as of v3.1.0. Please use action-menu-type instead.")}}componentDidLoad(){if(this.tempActionMenuType!=="icon"&&!this.buttonText){console.error("wm-action-menu should have a valid button-text property when action-menu-type is set to 'text' or 'selector'")}if(this.tempActionMenuType==="icon"&&!this.tooltip){console.error("wm-action-menu should have a valid tooltip when action-menu-type is set to 'icon'")}this.wmActionMenuLoaded.emit();this.menuLoaded.emit()}moveUp(t){const i=this.childItems.indexOf(t);if(i===0){this.focusLastItem()}else{this.focusItem(this.childItems[i-1])}}moveDown(t){const i=this.childItems.indexOf(t);if(i===this.childItems.length-1){this.focusFirstItem()}else{this.focusItem(this.childItems[i+1])}}open(){if(!this.disabled){this.openUp=h(this.el,this.itemsEl);this.isExpanded=true;this.itemsEl.classList.remove("hidden");window.requestAnimationFrame((()=>this.focusFirstItem()))}}close(t=true){this.isExpanded=false;this.childItems.forEach((t=>t.focused=false));window.setTimeout((()=>{this.itemsEl.classList.add("hidden")}),150);window.setTimeout((()=>{if(t&&(document.activeElement.tagName==="BODY"||document.activeElement.tagName==="WM-MENUITEM")){this.wmButtonEl.focus()}}),250)}focusItem(t){this.childItems.map((i=>i.focused=i===t));t.focus&&t.focus()}focusFirstItem(){this.focusItem(this.childItems[0])}focusLastItem(){this.focusItem(this.childItems[this.childItems.length-1])}findAndFocusItem(t){const i=t.detail.toUpperCase();this.focusFirstItem();if(!this.keysSoFar){for(var s=0;s<this.childItems.length;s++){if(this.childItems[s]===document.activeElement){this.searchIndex=s}}}this.keysSoFar+=i;this.clearKeysSoFarAfterDelay();var e=this.findMatchInRange(this.childItems,this.searchIndex+1,this.childItems.length);if(!e){e=this.findMatchInRange(this.childItems,0,this.searchIndex)}if(e){this.focusItem(e)}}clearKeysSoFarAfterDelay(){if(this.keyClear){window.clearTimeout(this.keyClear);this.keyClear=null}this.keyClear=window.setTimeout(function(){this.keysSoFar="";this.keyClear=null}.bind(this),500)}findMatchInRange(t,i,s){for(var e=i;e<s;e++){var n=t[e].innerText;if(n&&n.toUpperCase().indexOf(this.keysSoFar)===0){return t[e]}}return null}render(){return s(e,{onBlur:()=>this.close(false)},s("div",{class:a()},s("wm-button",{"button-type":this.internalButtonType,tooltip:this.tooltip,"custom-background":this.darkMode?"dark":undefined,"label-for-identical-buttons":this.labelForIdenticalButtons,icon:this.tempActionMenuType==="icon"?"f1d9":"",id:`menubtn-${this.uid}`,onClick:()=>this.isExpanded?this.close():this.open(),onBlur:t=>this.handleButtonBlur(t),disabled:this.disabled,ref:t=>this.wmButtonEl=t,"tooltip-position":this.tooltipPosition||this.horizontalPosition,"aria-haspopup":"true","aria-expanded":this.isExpanded?"true":"false","aria-controls":`menu-${this.uid}`},this.buttonText),s("div",{class:`dropdown ${this.openUp?"open-up":""} ${this.horizontalPosition} ${this.isExpanded?"open":""} hidden`,id:`menu-${this.uid}`,tabindex:-1,role:"menu",ref:t=>this.itemsEl=t},s("slot",null))))}static get delegatesFocus(){return true}get el(){return n(this)}};l.style=d;const c=':host,wm-menuitem{contain:content;font-family:inherit}:host .wrapper,wm-menuitem .wrapper{display:block;min-width:8.75rem;cursor:pointer;padding:1.25rem;border-radius:0px 0px 0px 0px;background:#fff;font-family:inherit;font-weight:500;list-style:none;border-bottom:2px solid rgba(46, 27, 70, 0.05);color:#575195;font-weight:700}:host .wrapper:focus,:host .wrapper.focus,wm-menuitem .wrapper:focus,wm-menuitem .wrapper.focus{outline:none;background:#f4f3f6}:host .wrapper:hover,wm-menuitem .wrapper:hover{background:#f4f3f6;outline:none}:host .wrapper .description,wm-menuitem .wrapper .description{color:#4a4a4a;font-size:0.875rem;padding-top:0.5rem;white-space:normal;font-weight:400}:host .wrapper[aria-disabled=true],wm-menuitem .wrapper[aria-disabled=true]{font-style:italic;color:#6b6b6b}:host .wrapper:not(:last-child),wm-menuitem .wrapper:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host ::slotted,wm-menuitem ::slotted{font-family:inherit}:host .mdi,wm-menuitem .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-menuitem:focus{outline:none;background:#f4f3f6}:host([aria-disabled=true]),wm-menuitem[aria-disabled=true]{pointer-events:none}';const p=class{constructor(s){t(this,s);this.wmMenuitemClicked=i(this,"wmMenuitemClicked",7);this.wmKeyUpPressed=i(this,"wmKeyUpPressed",7);this.wmKeyDownPressed=i(this,"wmKeyDownPressed",7);this.wmEscKeyPressed=i(this,"wmEscKeyPressed",7);this.wmHomeKeyPressed=i(this,"wmHomeKeyPressed",7);this.wmEndKeyPressed=i(this,"wmEndKeyPressed",7);this.wmPageDownItems=i(this,"wmPageDownItems",7);this.wmPageUpItems=i(this,"wmPageUpItems",7);this.wmTabKeyPressed=i(this,"wmTabKeyPressed",7);this.wmLetterPressed=i(this,"wmLetterPressed",7);this.wmMenuitemBlurred=i(this,"wmMenuitemBlurred",7);this.descriptionCharLimit=100;this.disabled=false;this.focused=false;this.icon=undefined;this.description=undefined;this.isKeying=false}toggleKeyingOn(){this.isKeying=true}toggleKeyingOff(){this.isKeying=false}handleKeydown(t){const i=t.altKey||t.ctrlKey||t.metaKey;const s=/^.$/.test(t.key);const e=s&&!i;switch(t.key){case"ArrowUp":t.preventDefault();this.wmKeyUpPressed.emit(this.el);break;case"ArrowDown":t.preventDefault();this.wmKeyDownPressed.emit(this.el);break;case"Enter":t.preventDefault();if(!this.disabled){this.el.click()}break;case"Escape":t.preventDefault();t.stopPropagation();this.wmEscKeyPressed.emit();break;case"Home":t.preventDefault();this.wmHomeKeyPressed.emit();break;case"End":t.preventDefault();this.wmEndKeyPressed.emit();break;case"Tab":this.wmTabKeyPressed.emit();break;default:if(e){t.preventDefault();this.wmLetterPressed.emit(t.key)}}}handleClick(){if(!this.disabled){this.wmMenuitemClicked.emit()}}handleBlur(t){this.wmMenuitemBlurred.emit({relatedTarget:t.relatedTarget})}setOnClick(){if(this.disabled&&this.el.onclick){this.onClickFunc=this.el.onclick;this.el.onclick=null}else if(!this.disabled&&this.onClickFunc){this.el.onclick=this.onClickFunc}}componentWillLoad(){if(this.icon){this.icon=m(this.icon)}if(this.description){if(this.description.length>this.descriptionCharLimit){console.error(`wm-menuitem description is above the character limit of ${this.descriptionCharLimit}`)}if(this.icon){console.error("wm-menuitems with descriptions do not support the use of icons")}}this.setOnClick()}componentDidLoad(){if(this.icon){this.iconEl.classList.add("mdi");this.iconEl.innerHTML=`&#x${this.icon};`}}render(){return s(e,{tabindex:-1,role:"menuitem","aria-disabled":this.disabled?"true":null},s("div",{class:`wrapper ${this.focused&&this.isKeying?"focus":""}`,"aria-disabled":this.disabled?"true":null},s("span",{ref:t=>this.iconEl=t}),s("slot",null),this.description?s("div",{class:"description"},this.description):""))}get el(){return n(this)}static get watchers(){return{disabled:["setOnClick"]}}};p.style=c;export{l as wm_action_menu,p as wm_menuitem};
-//# sourceMappingURL=p-76830e28.entry.js.map
+import{r as t,c as i,h as s,H as e,g as n}from"./p-1c23de4a.js";import{o,g as r,m as h,v as a}from"./p-edfba0e1.js";import{g as m}from"./p-43f1298b.js";const d=":host{position:relative;display:inline-block;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;color:#575195;font-family:inherit}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host(:focus){outline:none}wm-action-menu:focus{outline:none}.dropdown{position:absolute;padding:0;margin:0.25rem 0;border-radius:3px 3px 3px 3px;min-width:11.4375rem;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;visibility:hidden;-webkit-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 3px 14px 3px rgba(5, 3, 3, 0.12), 0 4px 15px 0 rgba(0, 0, 0, 0.2);background:#fff;z-index:10;text-align:left;white-space:nowrap}.dropdown:focus{outline:none}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1);visibility:visible}.dropdown.open-up{bottom:2.5rem;top:auto;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.right{left:0}.dropdown.left{right:0}";const l=class{constructor(s){t(this,s);this.wmActionMenuLoaded=i(this,"wmActionMenuLoaded",7);this.menuLoaded=i(this,"menuLoaded",7);this.openUp=false;this.keysSoFar="";this.searchIndex=0;this.keyClear=null;this.isExpanded=false;this.tooltipPosition=undefined;this.actionMenuType=null;this.buttonType=null;this.buttonText=undefined;this.disabled=false;this.tooltip=undefined;this.labelForIdenticalButtons=undefined;this.darkMode=undefined}get horizontalPosition(){return!!this.el&&!!this.itemsEl&&o(this.el,this.itemsEl)?"right":"left"}get childItems(){return Array.from(this.el.querySelectorAll("wm-menuitem"))}get internalButtonType(){return this.tempActionMenuType==="icon"||this.tempActionMenuType==="text"?this.tempActionMenuType+"only":this.tempActionMenuType}get tempActionMenuType(){return this.actionMenuType||this.buttonType||"icon"}handleClickedItem(){this.close()}handleKeyUp(t){this.moveUp(t.target)}handleKeyDown(t){this.moveDown(t.detail)}handleHomeKey(){this.focusFirstItem()}handleEndKey(){this.focusLastItem()}handleTabKey(){if(this.isExpanded){this.close()}}handleEscKey(){this.close();this.wmButtonEl.focus()}handleKey(t){switch(t.key){case"ArrowDown":if(!this.isExpanded){t.preventDefault();this.open();window.requestAnimationFrame((()=>this.focusFirstItem()))}break;case"ArrowUp":if(!this.isExpanded){t.preventDefault();this.open();window.requestAnimationFrame((()=>this.focusLastItem()))}break}}handleMenuitemBlur(t){const i=t.detail.relatedTarget===this.el||this.el.contains(t.detail.relatedTarget);if(!i){const i=new CustomEvent("blur");i.relatedTarget=t.detail.relatedTarget;this.el.dispatchEvent(i)}}handleButtonBlur(t){const i=t.relatedTarget===this.el||this.el.contains(t.relatedTarget);if(i){t.stopPropagation()}}componentWillLoad(){this.uid=this.el.id?this.el.id:r();if(this.buttonType){console.warn("wm-action-menu: button-type has been deprecated as of v3.1.0. Please use action-menu-type instead.")}}componentDidLoad(){if(this.tempActionMenuType!=="icon"&&!this.buttonText){console.error("wm-action-menu should have a valid button-text property when action-menu-type is set to 'text' or 'selector'")}if(this.tempActionMenuType==="icon"&&!this.tooltip){console.error("wm-action-menu should have a valid tooltip when action-menu-type is set to 'icon'")}this.wmActionMenuLoaded.emit();this.menuLoaded.emit()}moveUp(t){const i=this.childItems.indexOf(t);if(i===0){this.focusLastItem()}else{this.focusItem(this.childItems[i-1])}}moveDown(t){const i=this.childItems.indexOf(t);if(i===this.childItems.length-1){this.focusFirstItem()}else{this.focusItem(this.childItems[i+1])}}open(){if(!this.disabled){this.openUp=h(this.el,this.itemsEl);this.isExpanded=true;this.itemsEl.classList.remove("hidden");window.requestAnimationFrame((()=>this.focusFirstItem()))}}close(t=true){this.isExpanded=false;this.childItems.forEach((t=>t.focused=false));window.setTimeout((()=>{this.itemsEl.classList.add("hidden")}),150);window.setTimeout((()=>{if(t&&(document.activeElement.tagName==="BODY"||document.activeElement.tagName==="WM-MENUITEM")){this.wmButtonEl.focus()}}),250)}focusItem(t){this.childItems.map((i=>i.focused=i===t));t.focus&&t.focus()}focusFirstItem(){this.focusItem(this.childItems[0])}focusLastItem(){this.focusItem(this.childItems[this.childItems.length-1])}findAndFocusItem(t){const i=t.detail.toUpperCase();this.focusFirstItem();if(!this.keysSoFar){for(var s=0;s<this.childItems.length;s++){if(this.childItems[s]===document.activeElement){this.searchIndex=s}}}this.keysSoFar+=i;this.clearKeysSoFarAfterDelay();var e=this.findMatchInRange(this.childItems,this.searchIndex+1,this.childItems.length);if(!e){e=this.findMatchInRange(this.childItems,0,this.searchIndex)}if(e){this.focusItem(e)}}clearKeysSoFarAfterDelay(){if(this.keyClear){window.clearTimeout(this.keyClear);this.keyClear=null}this.keyClear=window.setTimeout(function(){this.keysSoFar="";this.keyClear=null}.bind(this),500)}findMatchInRange(t,i,s){for(var e=i;e<s;e++){var n=t[e].innerText;if(n&&n.toUpperCase().indexOf(this.keysSoFar)===0){return t[e]}}return null}render(){return s(e,{onBlur:()=>this.close(false)},s("div",{class:a()},s("wm-button",{"button-type":this.internalButtonType,tooltip:this.tooltip,"custom-background":this.darkMode?"dark":undefined,"label-for-identical-buttons":this.labelForIdenticalButtons,icon:this.tempActionMenuType==="icon"?"f1d9":"",id:`menubtn-${this.uid}`,onClick:()=>this.isExpanded?this.close():this.open(),onBlur:t=>this.handleButtonBlur(t),disabled:this.disabled,ref:t=>this.wmButtonEl=t,"tooltip-position":this.tooltipPosition||this.horizontalPosition,"aria-haspopup":"true","aria-expanded":this.isExpanded?"true":"false","aria-controls":`menu-${this.uid}`},this.buttonText),s("div",{class:`dropdown ${this.openUp?"open-up":""} ${this.horizontalPosition} ${this.isExpanded?"open":""} hidden`,id:`menu-${this.uid}`,tabindex:-1,role:"menu",ref:t=>this.itemsEl=t},s("slot",null))))}static get delegatesFocus(){return true}get el(){return n(this)}};l.style=d;const p=':host,wm-menuitem{contain:content;font-family:inherit}:host .wrapper,wm-menuitem .wrapper{display:block;min-width:8.75rem;cursor:pointer;padding:1.25rem;border-radius:0px 0px 0px 0px;background:#fff;font-family:inherit;font-weight:500;list-style:none;border-bottom:2px solid rgba(46, 27, 70, 0.05);color:#575195;font-weight:700}:host .wrapper:focus,:host .wrapper.focus,wm-menuitem .wrapper:focus,wm-menuitem .wrapper.focus{outline:none;background:#f4f3f6}:host .wrapper:hover,wm-menuitem .wrapper:hover{background:#f4f3f6;outline:none}:host .wrapper .description,wm-menuitem .wrapper .description{color:#4a4a4a;font-size:0.875rem;padding-top:0.5rem;white-space:normal;font-weight:400}:host .wrapper[aria-disabled=true],wm-menuitem .wrapper[aria-disabled=true]{font-style:italic;color:#6b6b6b}:host .wrapper:not(:last-child),wm-menuitem .wrapper:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host ::slotted,wm-menuitem ::slotted{font-family:inherit}:host .mdi,wm-menuitem .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus),wm-menuitem:focus{outline:none;background:#f4f3f6}:host([aria-disabled=true]),wm-menuitem[aria-disabled=true]{pointer-events:none}';const c=class{constructor(s){t(this,s);this.wmMenuitemClicked=i(this,"wmMenuitemClicked",7);this.wmKeyUpPressed=i(this,"wmKeyUpPressed",7);this.wmKeyDownPressed=i(this,"wmKeyDownPressed",7);this.wmEscKeyPressed=i(this,"wmEscKeyPressed",7);this.wmHomeKeyPressed=i(this,"wmHomeKeyPressed",7);this.wmEndKeyPressed=i(this,"wmEndKeyPressed",7);this.wmPageDownItems=i(this,"wmPageDownItems",7);this.wmPageUpItems=i(this,"wmPageUpItems",7);this.wmTabKeyPressed=i(this,"wmTabKeyPressed",7);this.wmLetterPressed=i(this,"wmLetterPressed",7);this.wmMenuitemBlurred=i(this,"wmMenuitemBlurred",7);this.descriptionCharLimit=100;this.disabled=false;this.focused=false;this.icon=undefined;this.description=undefined;this.isKeying=false}toggleKeyingOn(){this.isKeying=true}toggleKeyingOff(){this.isKeying=false}handleKeydown(t){const i=t.altKey||t.ctrlKey||t.metaKey;const s=/^.$/.test(t.key);const e=s&&!i;switch(t.key){case"ArrowUp":t.preventDefault();this.wmKeyUpPressed.emit(this.el);break;case"ArrowDown":t.preventDefault();this.wmKeyDownPressed.emit(this.el);break;case"Enter":t.preventDefault();if(!this.disabled){this.el.click()}break;case"Escape":t.preventDefault();t.stopPropagation();this.wmEscKeyPressed.emit();break;case"Home":t.preventDefault();this.wmHomeKeyPressed.emit();break;case"End":t.preventDefault();this.wmEndKeyPressed.emit();break;case"Tab":this.wmTabKeyPressed.emit();break;default:if(e){t.preventDefault();this.wmLetterPressed.emit(t.key)}}}handleClick(){if(!this.disabled){this.wmMenuitemClicked.emit()}}handleBlur(t){this.wmMenuitemBlurred.emit({relatedTarget:t.relatedTarget})}setOnClick(){if(this.disabled&&this.el.onclick){this.onClickFunc=this.el.onclick;this.el.onclick=null}else if(!this.disabled&&this.onClickFunc){this.el.onclick=this.onClickFunc}}componentWillLoad(){if(this.icon){this.icon=m(this.icon)}if(this.description){if(this.description.length>this.descriptionCharLimit){console.error(`wm-menuitem description is above the character limit of ${this.descriptionCharLimit}`)}if(this.icon){console.error("wm-menuitems with descriptions do not support the use of icons")}}this.setOnClick()}componentDidLoad(){if(this.icon){this.iconEl.classList.add("mdi");this.iconEl.innerHTML=`&#x${this.icon};`}}render(){return s(e,{tabindex:-1,role:"menuitem","aria-disabled":this.disabled?"true":null},s("div",{class:`wrapper ${this.focused&&this.isKeying?"focus":""}`,"aria-disabled":this.disabled?"true":null},s("span",{ref:t=>this.iconEl=t}),s("slot",null),this.description?s("div",{class:"description"},this.description):""))}get el(){return n(this)}static get watchers(){return{disabled:["setOnClick"]}}};c.style=p;export{l as wm_action_menu,c as wm_menuitem};
+//# sourceMappingURL=p-4370bb17.entry.js.map

package/dist/ripple/p-4370bb17.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["wmActionMenuCss","ActionMenu","this","openUp","keysSoFar","searchIndex","keyClear","horizontalPosition","el","itemsEl","shouldShiftRight","childItems","Array","from","querySelectorAll","internalButtonType","tempActionMenuType","actionMenuType","buttonType","handleClickedItem","close","handleKeyUp","ev","moveUp","target","handleKeyDown","moveDown","detail","handleHomeKey","focusFirstItem","handleEndKey","focusLastItem","handleTabKey","isExpanded","handleEscKey","wmButtonEl","focus","handleKey","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","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","darkMode","undefined","labelForIdenticalButtons","icon","onClick","ref","tooltipPosition","tabindex","role","wmMenuitemCss","Menuitem","descriptionCharLimit","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-4391166c.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["privNavigatorButtonCss","PrivNavigatorButton","handleClick","this","buttonActivated","emit","render","altText","tabbingClass","isTabbing","h","expanded","toString","class","onClick","bind"],"sources":["./src/components/wm-navigator/priv-navigator-button/priv-navigator-button.scss?tag=priv-navigator-button&encapsulation=shadow","./src/components/wm-navigator/priv-navigator-button/priv-navigator-button.tsx"],"sourcesContent":[":host,\npriv-navigator-button {\n  * {\n    box-sizing: border-box;\n  }\n\n  .navigator {\n    color: #575195;\n    padding: 0 1.25rem;\n    position: static !important;\n    height: 100%;\n    background: transparent;\n    border: none;\n    min-height: rem-calc(60);\n    cursor: pointer;\n    border-radius: 0; //Edge\n    top: 50%;\n    img {\n      height: rem-calc(36);\n      width: rem-calc(36);\n      vertical-align: middle;\n    }\n\n    &:hover {\n      background: #dcdbde;\n    }\n\n    &:active,\n    &:focus {\n      outline: none;\n    }\n\n    &.user-is-tabbing:focus {\n      @include focus-style;\n    }\n  }\n\n  button:after {\n    vertical-align: middle;\n    height: rem-calc(36);\n    width: rem-calc(36);\n    background-size: 36px;\n    display: inline-block;\n    background-image: url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);\n    content: \"\";\n  }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"priv-navigator-button\",\n  styleUrl: \"priv-navigator-button.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class PrivNavigatorButton {\n  @Element() el!: any;\n  @Prop({ mutable: true }) expanded: boolean = false;\n  @Prop() altText: string = \"\";\n  @Prop({ mutable: true }) isTabbing: boolean = false;\n  // @Prop({ attribute: \"mode\", reflect: true, mutable: true })\n  // mode: string = \"planning\";\n  @Event() buttonActivated!: EventEmitter;\n\n  handleClick() {\n    this.buttonActivated.emit();\n  }\n\n  render() {\n    const { handleClick, altText } = this;\n    const tabbingClass = this.isTabbing ? \"user-is-tabbing\" : \"\";\n\n    return (\n      <button\n        aria-expanded={this.expanded.toString()}\n        class={`navigator ${tabbingClass}`}\n        onClick={handleClick.bind(this)}\n        aria-label={altText}\n      ></button>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,y5C,MCOlBC,EAAmB,M,wFAEe,M,aACnB,G,eACoB,K,CAK9CC,cACEC,KAAKC,gBAAgBC,M,CAGvBC,SACE,MAAMJ,YAAEA,EAAWK,QAAEA,GAAYJ,KACjC,MAAMK,EAAeL,KAAKM,UAAY,kBAAoB,GAE1D,OACEC,EAAA,0BACiBP,KAAKQ,SAASC,WAC7BC,MAAO,aAAaL,IACpBM,QAASZ,EAAYa,KAAKZ,MAAK,aACnBI,G"}
+{"version":3,"names":["privNavigatorButtonCss","PrivNavigatorButton","handleClick","this","buttonActivated","emit","render","altText","tabbingClass","isTabbing","h","expanded","toString","class","onClick","bind"],"sources":["./src/components/wm-navigator/priv-navigator-button/priv-navigator-button.scss?tag=priv-navigator-button&encapsulation=shadow","./src/components/wm-navigator/priv-navigator-button/priv-navigator-button.tsx"],"sourcesContent":[":host,\r\npriv-navigator-button {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .navigator {\r\n    color: #575195;\r\n    padding: 0 1.25rem;\r\n    position: static !important;\r\n    height: 100%;\r\n    background: transparent;\r\n    border: none;\r\n    min-height: rem-calc(60);\r\n    cursor: pointer;\r\n    border-radius: 0; //Edge\r\n    top: 50%;\r\n    img {\r\n      height: rem-calc(36);\r\n      width: rem-calc(36);\r\n      vertical-align: middle;\r\n    }\r\n\r\n    &:hover {\r\n      background: #dcdbde;\r\n    }\r\n\r\n    &:active,\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\r\n  button:after {\r\n    vertical-align: middle;\r\n    height: rem-calc(36);\r\n    width: rem-calc(36);\r\n    background-size: 36px;\r\n    display: inline-block;\r\n    background-image: url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);\r\n    content: \"\";\r\n  }\r\n}\r\n","import { Component, Element, h, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"priv-navigator-button\",\r\n  styleUrl: \"priv-navigator-button.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class PrivNavigatorButton {\r\n  @Element() el!: any;\r\n  @Prop({ mutable: true }) expanded: boolean = false;\r\n  @Prop() altText: string = \"\";\r\n  @Prop({ mutable: true }) isTabbing: boolean = false;\r\n  // @Prop({ attribute: \"mode\", reflect: true, mutable: true })\r\n  // mode: string = \"planning\";\r\n  @Event() buttonActivated!: EventEmitter;\r\n\r\n  handleClick() {\r\n    this.buttonActivated.emit();\r\n  }\r\n\r\n  render() {\r\n    const { handleClick, altText } = this;\r\n    const tabbingClass = this.isTabbing ? \"user-is-tabbing\" : \"\";\r\n\r\n    return (\r\n      <button\r\n        aria-expanded={this.expanded.toString()}\r\n        class={`navigator ${tabbingClass}`}\r\n        onClick={handleClick.bind(this)}\r\n        aria-label={altText}\r\n      ></button>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yDAAA,MAAMA,EAAyB,y5C,MCOlBC,EAAmB,M,wFAEe,M,aACnB,G,eACoB,K,CAK9CC,cACEC,KAAKC,gBAAgBC,M,CAGvBC,SACE,MAAMJ,YAAEA,EAAWK,QAAEA,GAAYJ,KACjC,MAAMK,EAAeL,KAAKM,UAAY,kBAAoB,GAE1D,OACEC,EAAA,0BACiBP,KAAKQ,SAASC,WAC7BC,MAAO,aAAaL,IACpBM,QAASZ,EAAYa,KAAKZ,MAAK,aACnBI,G"}

package/dist/ripple/{p-888bec42.js → p-43f1298b.js}

@@ -1,2 +1,2 @@
 function e(e){return f[e]||e}const f={close:"f156",pencil:"f3eb",cancel:"f739",check:"f12c",delete:"f1c0",magnify:"f349",export:"f207","dots-vertical":"f1d9","arrow-left":"f04d","arrow-right":"f054","chevron-left":"f141","chevron-right":"f142","menu-left":"f35e","menu-down":"f35d","keyboard-backspace":"f30d","file-tree":"f645","sort-alphabetical":"f4bb","checkbox-marked-circle":"f133","account-settings":"f630","backup-restore":"f06f"};const c="planning";const t=e=>e.getAttribute("mode")||document.documentElement.getAttribute("mode")||c;export{t as a,e as g};
-//# sourceMappingURL=p-888bec42.js.map
+//# sourceMappingURL=p-43f1298b.js.map

package/dist/ripple/p-43f1298b.js.map

@@ -0,0 +1 @@
+{"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"}

package/dist/ripple/{p-18e58141.system.entry.js → p-48c8619f.system.entry.js}

@@ -1,2 +1,2 @@
-System.register(["./p-7b2fc615.system.js","./p-e782194d.system.js"],(function(t){"use strict";var o,e,i,r,n,l,p,s,g;return{setters:[function(t){o=t.r;e=t.h;i=t.H;r=t.g},function(t){n=t.i;l=t.m;p=t.n;s=t.o;g=t.p}],execute:function(){var a=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .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}';var h=t("wm_toggletip",function(){function t(t){o(this,t);this.tooltipMessage=n.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}Object.defineProperty(t.prototype,"tempTooltip",{get:function(){return this.tooltip||this.tooltipText},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){var t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error('wm-toggletip: tooltip-position has an invalid value of "'.concat(this.tooltipPosition,'", make sure to use one of the following values: ').concat(t))}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}};t.prototype.handleKeydown=function(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleClick=function(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}};t.prototype.open=function(){this.isOpen=true;this.announceToggletip()};t.prototype.close=function(){this.isOpen=false;this.hideTooltip()};t.prototype.handleBlur=function(){this.hideTooltip();this.liveRegionEl.innerHTML=""};t.prototype.showTooltip=function(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")};t.prototype.hideTooltip=function(){this.tooltipEl.classList.remove("hover")};t.prototype.announceToggletip=function(){var t=this;this.liveRegionEl.innerHTML="";setTimeout((function(){t.liveRegionEl.innerHTML=t.tempTooltip}),10)};t.prototype.setToggletipPosition=function(){if(this.tooltipPosition.includes("bottom")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&g(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return e(i,null,e("button",{class:"button ".concat(this.isTabbing?"user-is-tabbing":""),type:"button","aria-label":this.label,onClick:function(){t.setToggletipPosition();t.open()},onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltip()},onBlur:function(){return t.handleBlur()}}),e("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),e("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),e("div",{ref:function(o){return t.liveRegionEl=o},class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=a}}}));
-//# sourceMappingURL=p-18e58141.system.entry.js.map
+System.register(["./p-7b2fc615.system.js","./p-f08e6a5a.system.js"],(function(t){"use strict";var o,e,i,r,n,l,p,s,g;return{setters:[function(t){o=t.r;e=t.h;i=t.H;r=t.g},function(t){n=t.i;l=t.m;p=t.n;s=t.o;g=t.p}],execute:function(){var a=':host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f2fc";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:"";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .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}';var h=t("wm_toggletip",function(){function t(t){o(this,t);this.tooltipMessage=n.formatMessage({id:"toggletip.moreInformation",defaultMessage:"More information"});this.label=undefined;this.tooltip=undefined;this.tooltipText=undefined;this.tooltipPosition="bottom-right";this.isOpen=false;this.isTabbing=false}Object.defineProperty(t.prototype,"tempTooltip",{get:function(){return this.tooltip||this.tooltipText},enumerable:false,configurable:true});t.prototype.componentWillLoad=function(){var t=["top","right","bottom","left","top-right","top-left","bottom-right","bottom-left"];if(!this.label){console.error("wm-toggletip must have a label property")}if(!this.tempTooltip){console.error("wm-toggletip must have a tooltip property")}if(!t.includes(this.tooltipPosition)){console.error('wm-toggletip: tooltip-position has an invalid value of "'.concat(this.tooltipPosition,'", make sure to use one of the following values: ').concat(t))}if(this.tooltipText){console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.")}};t.prototype.handleKeydown=function(t){switch(t.key){case"Escape":t.preventDefault();if(this.isOpen){t.stopPropagation();this.close()}break;case"Tab":if(this.isOpen){this.close()}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleClick=function(t){if(this.isOpen){if(t.target===this.el||this.el.contains(t.target)){this.announceToggletip()}else{this.close()}}};t.prototype.open=function(){this.isOpen=true;this.announceToggletip()};t.prototype.close=function(){this.isOpen=false;this.hideTooltip()};t.prototype.handleBlur=function(){this.hideTooltip();this.liveRegionEl.innerHTML=""};t.prototype.showTooltip=function(){this.setToggletipPosition();this.tooltipEl.classList.add("hover")};t.prototype.hideTooltip=function(){this.tooltipEl.classList.remove("hover")};t.prototype.announceToggletip=function(){var t=this;this.liveRegionEl.innerHTML="";setTimeout((function(){t.liveRegionEl.innerHTML=t.tempTooltip}),10)};t.prototype.setToggletipPosition=function(){if(this.tooltipPosition.includes("bottom")&&l(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&p(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&s(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&g(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return e(i,null,e("button",{class:"button ".concat(this.isTabbing?"user-is-tabbing":""),type:"button","aria-label":this.label,onClick:function(){t.setToggletipPosition();t.open()},onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltip()},onBlur:function(){return t.handleBlur()}}),e("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),e("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),e("div",{ref:function(o){return t.liveRegionEl=o},class:"live-region sr-only",role:"status","aria-live":"polite","aria-atomic":"true"}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return r(this)},enumerable:false,configurable:true});return t}());h.style=a}}}));
+//# sourceMappingURL=p-48c8619f.system.entry.js.map

package/dist/ripple/p-48c8619f.system.entry.js.map

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