@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/esm-es5/wm-timepicker.entry.js.map

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

package/dist/esm-es5/wm-toggletip.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,m as shouldOpenUp,n as shouldOpenDown,o as shouldShiftRight,p as shouldShiftLeft}from"./functions-bb1309d0.js";var wmToggletipCss=':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 Toggletip=function(){function t(t){registerInstance(this,t);this.tooltipMessage=intl.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")&&shouldOpenUp(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&shouldOpenDown(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&shouldShiftRight(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&shouldShiftLeft(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return h(Host,null,h("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()}}),h("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),h("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),h("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 getElement(this)},enumerable:false,configurable:true});return t}();Toggletip.style=wmToggletipCss;export{Toggletip as wm_toggletip};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl,m as shouldOpenUp,n as shouldOpenDown,o as shouldShiftRight,p as shouldShiftLeft}from"./functions-dc9964aa.js";var wmToggletipCss=':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 Toggletip=function(){function t(t){registerInstance(this,t);this.tooltipMessage=intl.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")&&shouldOpenUp(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("bottom","top")}else if(this.tooltipPosition.includes("top")&&shouldOpenDown(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("top","bottom")}if(this.tooltipPosition.includes("left")&&shouldShiftRight(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("left","right")}else if(this.tooltipPosition.includes("right")&&shouldShiftLeft(this.el,this.toggletipEl)){this.tooltipPosition=this.tooltipPosition.replace("right","left")}};t.prototype.render=function(){var t=this;return h(Host,null,h("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()}}),h("div",{ref:function(o){return t.tooltipEl=o},class:"tooltip ".concat(this.tooltipPosition," ").concat(this.isOpen?"hidden":""),"aria-hidden":"true"},this.tooltipMessage),h("div",{ref:function(o){return t.toggletipEl=o},class:"toggletip ".concat(this.isOpen?"":"hidden"," ").concat(this.tooltipPosition)},this.tempTooltip),h("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 getElement(this)},enumerable:false,configurable:true});return t}();Toggletip.style=wmToggletipCss;export{Toggletip as wm_toggletip};
 //# sourceMappingURL=wm-toggletip.entry.js.map

package/dist/esm-es5/wm-toggletip.entry.js.map

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

package/dist/esm-es5/wm-uploader.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,i as intl,v as hasValidType}from"./functions-bb1309d0.js";var wmUploaderCss=':host .wm-button,wm-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi,wm-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-selector:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-uploader .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-uploader .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selector,wm-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:2px solid #575195;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,wm-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,wm-uploader .wm-button.-selector:before,:host .wm-button.-selector-primary:before,wm-uploader .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f140";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:0.875rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,wm-uploader .wm-button.-selector:active,:host .wm-button.-selector-primary:active,wm-uploader .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,wm-uploader .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner,wm-uploader .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,wm-uploader .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol,wm-uploader .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{background:#575195;color:#fff}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-uploader .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selector,wm-uploader .wm-button:disabled.-selector,:host .wm-button.disabled.-selector,wm-uploader .wm-button.disabled.-selector{color:#737373}:host .wm-button:disabled.-selector-primary,wm-uploader .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary,wm-uploader .wm-button.disabled.-selector-primary{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-selector,wm-uploader .wm-button:disabled.dark.-selector,:host .wm-button:disabled.dark.-textonly,wm-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-selector,wm-uploader .wm-button.disabled.dark.-selector,:host .wm-button.disabled.dark.-textonly,wm-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-selector-primary,wm-uploader .wm-button:disabled.dark.-selector-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-selector-primary,wm-uploader .wm-button.disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{display:block;position:relative;max-width:1140px}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-uploader input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important}:host *,wm-uploader *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:#c0392b}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}#label{margin-bottom:0.5rem}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.header .accepted-types{font-size:0.875rem}.header .requirements{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.notif-wrapper .requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.notif,#error{padding-top:0.25rem;font-size:0.875rem;font-style:italic}.notif#error,#error#error{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}.info-wrapper{position:relative;display:-ms-flexbox;display:flex}.list-container{overflow-y:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container:has(.error-list,.inprogress-list,.file-list){margin-top:2.5rem}.list-container ul{padding:0;width:100%;margin:0}.list-container ul wm-file{margin-bottom:0.5rem}.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}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.header.type1,.header.type2{margin-bottom:1rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.notif-wrapper.type1,.notif-wrapper.type2{-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.list-container.type1,.list-container.type2{overflow-y:auto}.list-container.type1 ul,.list-container.type2 ul{margin:revert}.list-container.type1 .file-list li,.list-container.type1 .inprogress-list li,.list-container.type2 .file-list li,.list-container.type2 .inprogress-list li{margin-bottom:1.625rem}.list-container.type1 .error-list li,.list-container.type2 .error-list li{margin-bottom:1.25rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}';var Uploader=function(){function e(e){registerInstance(this,e);this.wmUploaderFilesSelected=createEvent(this,"wmUploaderFilesSelected",7);this.wmFilesSelected=createEvent(this,"wmFilesSelected",7);this.wmUploaderDeleteFile=createEvent(this,"wmUploaderDeleteFile",7);this.wmDeleteFile=createEvent(this,"wmDeleteFile",7);this.wmUploaderDownloadFile=createEvent(this,"wmUploaderDownloadFile",7);this.wmDownloadFile=createEvent(this,"wmDownloadFile",7);this.wmUploaderPreviewFile=createEvent(this,"wmUploaderPreviewFile",7);this.wmFileDelete=createEvent(this,"wmFileDelete",7);this.wmFileDownload=createEvent(this,"wmFileDownload",7);this.wmFilePreview=createEvent(this,"wmFilePreview",7);this.inputId=generateId();this.uploaderType=undefined;this.type=undefined;this.label=undefined;this.buttonText=undefined;this.info=undefined;this.emptyStateText=undefined;this.icon=undefined;this.fileTypes="pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";this.maxSize=undefined;this.maxFiles=undefined;this.sortBy="date";this.showInfo="time";this.errorMessage=undefined;this.requiredField=undefined;this.files=undefined;this.fileList=[];this.filesToUpload=[];this.isTabbing=false;this.rejectedFiles=undefined;this.errorList=[];this.notif=undefined;this.internalErrorMessage=undefined;this.announcement="";this.numFilesInProgress=undefined;this.isCondensed=false}Object.defineProperty(e.prototype,"uploadButtonEl",{get:function(){return this.el.shadowRoot.querySelector("#".concat(this.inputId))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"tempUploaderType",{get:function(){return this.type||this.uploaderType},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"effectiveMaxSize",{get:function(){var e=100;var t=100;return this.maxSize?Math.min(this.maxSize,t):e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"fileLimitReached",{get:function(){return this.maxFiles&&this.fileList.length>=this.maxFiles},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"displayedErrorMessage",{get:function(){return this.errorMessage||this.internalErrorMessage||""},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"fileLimitExceededMessage",{get:function(){return intl.formatMessage({id:"uploader.fileUploadLimitExceeded",defaultMessage:"Upload unsuccessful because file selection would exceed the maximum number of files",description:"Message displayed when trying to upload too many files"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"fileLimitReachedMessage",{get:function(){return intl.formatMessage({id:"uploader.fileUploadLimitReached",defaultMessage:"The maximum number of files has been reached",description:"Message displayed when trying to upload additional files, but the limit has been reached"})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"fileCountMessage",{get:function(){return intl.formatMessage({id:"uploader.fileCount",defaultMessage:"{x} of {y} Files",description:"A count of the number of files currently uploaded"},{x:this.fileList.length,y:this.maxFiles})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"maxSizeMessage",{get:function(){return intl.formatMessage({id:"uploader.maxSize",defaultMessage:"Maximum file size {maxSize}MB",description:"An indicator of the maximum file size the uploader allows"},{maxSize:this.effectiveMaxSize})},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"acceptedFileTypesMessage",{get:function(){var e="."+this.fileTypes.split(" ").join(", .");return intl.formatMessage({id:"uploader.acceptedFileTypes",defaultMessage:"Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}"},{fileTypes:e,amount:this.fileTypes.split(" ").length})},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleUploadProgress=function(e){var t=this;this.fileList.map((function(o){if(o.id===e.detail.id){o.progress=e.detail.progress;forceUpdate(t.el)}}));if(e.detail.progress===100){this.numFilesInProgress-=1}if(!this.srProgress&&this.numFilesInProgress){var o=this.numFilesInProgress;this.srProgress=setInterval((function(){var e=t.fileList.reduce((function(e,t){return t.progress?e+t.progress:e}),0);t.announce(intl.formatMessage({id:"uploader.uploadProgress",defaultMessage:"Upload progress: {percentage}%"},{percentage:Math.floor(e/o)}))}),5e3)}};e.prototype.handleFileErrorCleared=function(e){var t=e.detail.name;this.errorList=this.errorList.filter((function(e){return e.name!=t}));this.uploadButtonEl.focus()};e.prototype.handleFileDeleted=function(e){this.clearErrors();forceUpdate(this.el);this.wmUploaderDeleteFile.emit(e.detail);this.wmFileDelete.emit(e.detail);this.wmDeleteFile.emit(e.detail)};e.prototype.handleFilePreviewed=function(e){this.clearErrors();this.wmUploaderPreviewFile.emit(e.detail);this.wmFilePreview.emit(e.detail)};e.prototype.handleFileDownloaded=function(e){this.clearErrors();this.wmUploaderDownloadFile.emit(e.detail);this.wmFileDownload.emit(e.detail);this.wmDownloadFile.emit(e.detail)};e.prototype.parseFiles=function(){var e=this;if(!!this.files){if(typeof this.files==="string"){var t=JSON.parse(this.files);if(typeof t==="object"){t.forEach((function(t){if(t.size&&(typeof t.size==="number"||t.size.match(/^[0-9]+$/))){var o=e.convertBytes(t.size);t.size="".concat(o.size.toFixed(0)," ").concat(o.unit)}}));this.fileList=t}else{throw new Error("could not parse string passed to files attribute")}}else{throw new Error("Attribute 'files' should be a string")}}};e.prototype.focusAfterRemoval=function(e,t){if(this.isTabbing&&e.length<t.length){var o=e.map((function(e){return e.id}));var r=t.map((function(e){return e.id}));var i=r.filter((function(e){return!o.includes(e)}))[0];if(r.indexOf(i)>0){var n=r[r.indexOf(i)-1];var a=this.el.shadowRoot.querySelector("#file-"+n);var s=a===null||a===void 0?void 0:a.shadowRoot.querySelectorAll("wm-button");if(s&&s.length>0){var l=s[s.length-1];l.focus()}else{this.focusAfterRemoval(e.filter((function(e){return e.id!==n})),t)}}else{this.uploadButtonEl.focus()}}};e.prototype.parseRejectedFiles=function(){if(!!this.rejectedFiles){if(typeof this.files==="string"){var e=JSON.parse(this.rejectedFiles);if(typeof e==="object"){this.errorList=e}else{throw new Error("could not parse string passed to errors attribute")}}else{throw new Error("Attribute 'rejected-files' should be a string")}}};e.prototype.uploadNotifications=function(e,t){var o=this;if(t>0&&e===0){setTimeout((function(){o.notif="";o.internalErrorMessage=""}),20*1e3);var r=intl.formatMessage({id:"uploader.finishedUploading",defaultMessage:"Finished uploading"});this.notif=r;this.announce(r);this.numFilesInProgress=null;clearInterval(this.srProgress);forceUpdate(this.el)}else if(e>0&&e!=t){var i=intl.formatMessage({id:"uploader.filesUploading",defaultMessage:"{num, plural, one {1 file uploading} other {# files uploading}}"},{num:e});this.notif=i;this.announce(i);forceUpdate(this.el)}};e.prototype.handleErrorMessageChange=function(){if(this.errorMessage){this.announce(this.errorMessage)}};e.prototype.isValidSize=function(e){return this.convertBytes(e,"MB").size<=this.effectiveMaxSize};e.prototype.convertBytes=function(e,t){var o=["bytes","KB","MB","GB","TB"];var r=0;var i=typeof e==="number"?e:parseInt(e);if(t){while(o.indexOf(t)>r){i/=1024;r++}}else{while(i>1e3){i/=1024;r++}}return{size:i,unit:o[r]}};e.prototype.isDuplicate=function(e){var t=this.filesToUpload.some((function(t){return t.name===e}));var o=this.fileList.some((function(t){var o=t.type?t.name+"."+t.type:t.name;return o===e}));return t||o};e.prototype.isEmpty=function(){return!this.fileList.length&&!this.errorList.length};Object.defineProperty(e.prototype,"isDisabled",{get:function(){return this.fileLimitReached||this.numFilesInProgress>0},enumerable:false,configurable:true});e.prototype.isItemUploading=function(e){return e.hasOwnProperty("progress")&&e.progress<100};e.prototype.announce=function(e){if(this.liveRegion.textContent===e){e+=" "}this.announcement=e};e.prototype.clearErrors=function(){this.errorList=[];this.notif="";this.internalErrorMessage=""};e.prototype.handleFiles=function(e){var t=this;this.filesToUpload=[];var o=this.fileTypes.split(" ").join(", ");var r=Array.from(e.target.files);if(!!this.maxFiles&&this.fileList.length+r.length>this.maxFiles){this.internalErrorMessage=this.fileLimitExceededMessage;this.announce(this.fileLimitExceededMessage)}else{r&&r.map((function(e){if(!hasValidType(e,t.fileTypes)){var r={name:e.name,message:intl.formatMessage({id:"uploader.invalidFileType",defaultMessage:"The file type is invalid. Accepted types: {validTypes}"},{validTypes:o})};t.errorList.push(r)}else if(e.size===0){var r={name:e.name,message:intl.formatMessage({id:"uploader.zeroFileSize",defaultMessage:"The file must be more than 0 bytes",description:"Error message when user attempts to upload a file of no size"})};t.errorList.push(r)}else if(!t.isValidSize(e.size)){var r={name:e.name,message:intl.formatMessage({id:"uploader.fileTooLarge",defaultMessage:"The selected file is too large. Maximum file size is {size}Mb"},{size:t.effectiveMaxSize})};t.errorList.push(r)}else if(t.isDuplicate(e.name)){var r={name:e.name,message:intl.formatMessage({id:"uploader.duplicateName",defaultMessage:"A file with this name already exists."})};t.errorList.push(r)}else{t.filesToUpload.push(e)}}));if(this.filesToUpload.length>0){this.numFilesInProgress=this.filesToUpload.length;this.wmUploaderFilesSelected.emit(this.filesToUpload);this.wmFilesSelected.emit(this.filesToUpload)}}e.target.value=""};e.prototype.componentWillLoad=function(){if(!this.buttonText){throw new Error("wm-uploader: button-text is a required prop")}if(this.type){console.warn("wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.")}if(this.tempUploaderType==="1"&&!this.emptyStateText){throw new Error("wm-uploader: empty-state-text is a required prop")}this.parseFiles();this.clearErrors();this.parseRejectedFiles()};e.prototype.componentDidLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}};e.prototype.uploadButtonOnClick=function(e){if(this.isDisabled){e.preventDefault();if(this.numFilesInProgress>0){var t=intl.formatMessage({id:"uploader.waitToUpload",defaultMessage:"Please wait for current upload to complete before uploading new files.",description:"Message for screen reader users"});this.announce(t)}else if(this.fileLimitReached){this.internalErrorMessage=this.fileLimitReachedMessage;this.announce(this.fileLimitReachedMessage)}}else{this.clearErrors()}};e.prototype.renderUploadSvg=function(){return h("svg",{class:"upload-file",width:"91",height:"84",viewBox:"0 0 91 84"},h("path",{transform:"rotate(-180.000000) translate(-452, -255.5)",fill:"#eae8ec",d:"M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z"}))};e.prototype.renderIcon=function(){var e=this.icon&&this.icon==="f066";return this.icon&&h("span",{class:"mdi ".concat(e?"rotate":"")},String.fromCodePoint(parseInt("0x".concat(this.icon))))};e.prototype.renderInfo=function(){return this.info&&this.tempUploaderType==="2"?h("span",{class:"info"},this.info):""};e.prototype.renderNotif=function(){return h("div",{class:"notif"},this.notif)};e.prototype.renderError=function(){return h("div",{id:"error"},this.displayedErrorMessage)};e.prototype.renderUploadButton=function(e){var t=this;var o="".concat(this.label&&this.label!==this.buttonText?"".concat(this.label,", "):"").concat(this.buttonText);return h("div",{class:"info-wrapper"},h("input",{name:this.inputId,id:this.inputId,class:"sr-only","aria-label":o,"aria-required":this.requiredField?"true":null,"aria-describedby":"".concat(this.displayedErrorMessage?"error ":"","file-count max-size accepted-types"),type:"file",multiple:true,onClick:function(e){return t.uploadButtonOnClick(e)},onChange:function(e){return t.handleFiles(e)}}),h("label",{htmlFor:this.inputId,class:"wm-button ".concat(e).concat(this.isTabbing?" user-is-tabbing":"")},this.renderIcon(),this.buttonText),this.renderInfo())};e.prototype.renderEmptyState=function(){return h("div",{class:"empty-block"},this.renderUploadSvg(),h("div",{class:"empty-message"},this.emptyStateText),this.renderUploadButton("-primary empty-button"),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())};e.prototype.renderErrorList=function(){var e=this.errorList.reduce((function(e,t){return e+"".concat(t.name,": ").concat(t.message," ")}),"");this.announce(e);return h("ul",{class:"error-list"},this.errorList.map((function(e){return h("wm-file",{file:'{"name": "'.concat(e.name,'"}'),"error-message":e.message})})))};e.prototype.formatTimestamp=function(e){var t=new Date(Date.parse(e));var o=t.getDate();var r=t.getMonth()+1;var i=t.getFullYear();var n=t.toLocaleTimeString("en-us",{hour:"numeric",minute:"2-digit"});var a="".concat(r,"/").concat(o,"/").concat(i," ").concat(n);return a};e.prototype.renderInProgressFileList=function(){var e=this;return h("ul",{class:"inprogress-list"},this.fileList.filter((function(t){return e.isItemUploading(t)})).map((function(t){return h("wm-file",{file:JSON.stringify(t),"show-info":e.showInfo})})))};e.prototype.renderUploadedFileList=function(){var e=this;return h("ul",{class:"file-list"},this.fileList.filter((function(t){return!e.isItemUploading(t)})).map((function(t){t.lastUpdated=e.formatTimestamp(t.lastUpdated);return h("wm-file",{id:"file-".concat(t.id),file:JSON.stringify(t),"show-info":e.showInfo})})))};e.prototype.renderFiles=function(){this.sortBy==="name"?this.fileList.sort((function(e,t){return e.name.localeCompare(t.name)})):this.fileList.sort((function(e,t){return Date.parse(e.lastUpdated)-Date.parse(t.lastUpdated)}));return h("div",null,this.renderInProgressFileList(),this.renderUploadedFileList())};e.prototype.legacyRenderHeader=function(){return h("div",{class:"header ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"slot-wrapper"},h("slot",null),h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},this.renderUploadButton("-secondary ".concat(this.isDisabled?"disabled":"")),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())))};e.prototype.renderHeader=function(){return h("div",{class:"header ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},this.renderUploadButton("-secondary ".concat(this.isDisabled?"disabled":"")),this.renderRequirements()),h("div",{id:"accepted-types",class:"accepted-types"},this.acceptedFileTypesMessage),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())};e.prototype.renderRequirements=function(){return h("div",{class:"requirements"},this.maxFiles&&h("span",{id:"file-count"},this.fileCountMessage),this.maxSize&&h("span",{id:"max-size"},this.maxSizeMessage))};e.prototype.renderFooter=function(){return h("div",{class:"footer"},h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"filecount-wrapper"},h("div",{class:"filecount"},intl.formatMessage({id:"uploader.filesAdded",defaultMessage:"{numFiles, plural, one {1 file added} other {# files added}}"},{numFiles:this.fileList.length})),this.renderUploadButton("-primary ".concat(this.isDisabled?"disabled":""))),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError()))};e.prototype.renderWithItems=function(){var e=this.fileList.filter((function(e){return e.progress===(typeof e.progress==="number"?100:"100")})).length>0;return h("div",null,!this.tempUploaderType&&this.renderHeader(),this.tempUploaderType==="2"&&this.legacyRenderHeader(),h("div",{class:"list-container type".concat(this.tempUploaderType," ").concat(!this.tempUploaderType&&e?"checkmark-spacer":"")},this.errorList.length>0&&this.renderErrorList(),this.fileList.length>0&&this.renderFiles()),this.tempUploaderType==="1"&&this.renderFooter())};e.prototype.renderLabel=function(){return h("div",{class:"wrapper ".concat(this.displayedErrorMessage?"invalid":"")},h("div",{id:"label",class:"label"},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*")))};e.prototype.render=function(){var e=this;return h(Host,null,this.label&&this.renderLabel(),this.isEmpty()&&this.tempUploaderType==="1"?this.renderEmptyState():this.renderWithItems(),h("div",{ref:function(t){return e.liveRegion=t},class:"live-region sr-only","aria-live":"assertive","aria-atomic":"true"},this.announcement))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{files:["parseFiles"],fileList:["focusAfterRemoval"],rejectedFiles:["parseRejectedFiles"],numFilesInProgress:["uploadNotifications"],errorMessage:["handleErrorMessageChange"]}},enumerable:false,configurable:true});return e}();Uploader.style=wmUploaderCss;export{Uploader as wm_uploader};
+import{r as registerInstance,c as createEvent,f as forceUpdate,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,v as hasValidType}from"./functions-dc9964aa.js";import{u as uploaderMessages}from"./intl-4d4826dd.js";var wmUploaderCss=':host .wm-button,wm-uploader .wm-button{-ms-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-moz-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1), border 500ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;width:inherit;border:2px solid #575195;color:#575195;font-family:inherit;font-size:0.75rem;font-weight:700;height:2.75rem;padding:0 1.3333333333em;cursor:pointer;position:relative;background:#fff;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;text-transform:uppercase;letter-spacing:0.01875rem;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button,wm-uploader .wm-button{height:3.3333333333em}}:host .wm-button.nowrap,wm-uploader .wm-button.nowrap{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .wm-button:focus,wm-uploader .wm-button:focus{outline:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button::-moz-focus-inner,wm-uploader .wm-button::-moz-focus-inner{border:0;outline:none}:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) :host .wm-button.-textonly .button-text,:host .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text,wm-uploader .wm-button.user-is-tabbing:focus:not(:disabled):not(.disabled) wm-uploader .wm-button.-textonly .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark){-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner,wm-uploader .wm-button.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled):not(.dark)::-moz-focus-inner{border:0}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled),wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled){background:transparent;border:2px solid #fff;color:#fff}:host .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.dark:not(.-textonly):not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark,wm-uploader .wm-button.dark.user-is-tabbing:focus:not(.-textonly):not(:disabled):not(.disabled).dark{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption),wm-uploader .wm-button:active:not(:disabled):not(.disabled):not(.-textonly):not(.-actionbutton):not(.displayedoption){-ms-transform:scale(0.9, 0.9);-webkit-transform:scale(0.9, 0.9);-moz-transform:scale(0.9, 0.9);transform:scale(0.9, 0.9)}:host .wm-button .mdi,wm-uploader .wm-button .mdi{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button:not(.-icononly):not(.-navigational) .mdi,wm-uploader .wm-button:not(.-icononly):not(.-navigational) .mdi{margin-right:0.3125rem}:host .wm-button[dir=RTL] :not(.-icononly) .mdi,wm-uploader .wm-button[dir=RTL] :not(.-icononly) .mdi{margin-left:0.3125rem;margin-right:0}:host .wm-button.-primary:not(.-textonly),wm-uploader .wm-button.-primary:not(.-textonly){background:#575195;color:#fff}:host .wm-button.-primary:not(.-textonly):not(:focus),wm-uploader .wm-button.-primary:not(.-textonly):not(:focus){-webkit-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 2px 0 rgba(87, 81, 149, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.2)}:host .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly):hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-primary:not(.-textonly).dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-secondary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-secondary:hover:not(:disabled):not(.disabled),:host .wm-button.-selector:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector:hover:not(:disabled):not(.disabled),:host .wm-button.-icononly:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-icononly:hover:not(:disabled):not(.disabled){background:#464177;color:#fff}:host .wm-button.-textonly,wm-uploader .wm-button.-textonly{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:inline-block;letter-spacing:0;text-transform:none;text-align:initial;font-size:0.875rem;border:none;background:transparent;padding-left:0;padding-right:0;height:auto;border-radius:0;line-height:1}:host .wm-button.-textonly+.-textonly,wm-uploader .wm-button.-textonly+.-textonly{margin-left:0.3125rem}:host .wm-button.-textonly:focus,wm-uploader .wm-button.-textonly:focus{outline:none}:host .wm-button.-textonly::-moz-focus-inner,wm-uploader .wm-button.-textonly::-moz-focus-inner{border:0;outline:none}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled) .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #3862e9), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text,wm-uploader .wm-button.-textonly.user-is-tabbing:focus:not(:disabled):not(.disabled).dark .button-text{background:-webkit-gradient(linear, left top, right top, color-stop(66%, #fff), color-stop(0, transparent)) repeat-x;background:linear-gradient(90deg, #fff 66%, transparent 0) repeat-x;background-size:6px 3px;background-position:0 1em;border-radius:0;line-height:normal}:host .wm-button.-textonly.small,wm-uploader .wm-button.-textonly.small{font-size:0.625rem}:host .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete),wm-uploader .wm-button.-textonly:hover:not(:disabled):not(.disabled):not(.-permanentlydelete){text-decoration:underline}:host .wm-button.-textonly.-permanentlydelete,wm-uploader .wm-button.-textonly.-permanentlydelete{color:#c0392b}:host .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-textonly.-permanentlydelete:hover:not(:disabled):not(.disabled):not(.dark){text-decoration:underline;color:#c0392b !important}:host .wm-button.-textonly.dark,wm-uploader .wm-button.-textonly.dark{color:#fff}:host .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-textonly.dark:hover:not(:disabled):not(.disabled){text-decoration:underline;color:#fff !important}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;font-size:1rem;padding:0;height:auto;line-height:1;min-width:2.75rem;min-height:2.75rem;text-align:center;letter-spacing:normal}:host .wm-button.-icononly:not(:focus),wm-uploader .wm-button.-icononly:not(:focus),:host .wm-button.-navigational:not(:focus),wm-uploader .wm-button.-navigational:not(:focus){-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}@media screen and (min-width: 48rem){:host .wm-button.-icononly,wm-uploader .wm-button.-icononly,:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{min-width:2.5rem;min-height:2.5rem}}:host .wm-button.-icononly,wm-uploader .wm-button.-icononly{border-width:1px !important}:host .wm-button.-icononly:before,wm-uploader .wm-button.-icononly:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-navigational,wm-uploader .wm-button.-navigational{border:none !important;background-color:transparent}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled),wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled){color:#575195}:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled):hover,:host .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected,wm-uploader .wm-button.-navigational:not(.dark):not(:disabled):not(.disabled).selected{background-color:#d7d6d9}:host .wm-button.-navigational:before,wm-uploader .wm-button.-navigational:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host .wm-button.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.-permanentlydelete:not(.-textonly){background:#c0392b;border-color:#c0392b;color:#fff}:host .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark),wm-uploader .wm-button.-permanentlydelete:not(.-textonly):hover:not(:disabled):not(.disabled):not(.dark){background:#9a2e22;border-color:#9a2e22}:host .wm-button.-pairnegative,wm-uploader .wm-button.-pairnegative{background:#cc4c3e;border-color:#cc4c3e;color:#fff}:host .wm-button.-pairnegative:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairnegative:hover:not(:disabled):not(.disabled){background:#a33d32;border-color:#a33d32}:host .wm-button.-pairpositive,wm-uploader .wm-button.-pairpositive{background:#15868d;border-color:#15868d;color:#fff}:host .wm-button.-pairpositive:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-pairpositive:hover:not(:disabled):not(.disabled){background:#116b71;border-color:#116b71}:host .wm-button.-selector,wm-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:block;background:transparent;border:2px solid #575195;border-radius:3px;height:2.75rem;min-width:11.4375rem;padding:0 1.875rem 0 0.9375rem;line-height:normal;font-family:inherit;color:#575195;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.01875rem;text-align:left}@media screen and (min-width: 48rem){:host .wm-button.-selector,wm-uploader .wm-button.-selector,:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{height:2.5rem}}:host .wm-button.-selector:before,wm-uploader .wm-button.-selector:before,:host .wm-button.-selector-primary:before,wm-uploader .wm-button.-selector-primary:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f140";position:absolute;right:0.5625rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:0.875rem;font-weight:700;pointer-events:none}:host .wm-button.-selector:active,wm-uploader .wm-button.-selector:active,:host .wm-button.-selector-primary:active,wm-uploader .wm-button.-selector-primary:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}:host .wm-button.-selector::-moz-focus-inner,wm-uploader .wm-button.-selector::-moz-focus-inner,:host .wm-button.-selector-primary::-moz-focus-inner,wm-uploader .wm-button.-selector-primary::-moz-focus-inner{border:0}:host .wm-button.-selector .overflowcontrol,wm-uploader .wm-button.-selector .overflowcontrol,:host .wm-button.-selector-primary .overflowcontrol,wm-uploader .wm-button.-selector-primary .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:visible}:host .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-selector.dark:not(:disabled):not(.disabled):hover,:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover,wm-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled):hover{color:#575195;background:#e6e6e6;border:2px solid #e6e6e6}:host .wm-button.-selector-primary,wm-uploader .wm-button.-selector-primary{background:#575195;color:#fff}:host .wm-button.-selector-primary:hover:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector-primary:hover:not(:disabled):not(.disabled){background:#464177}:host .wm-button.-selector-primary.dark:not(:disabled):not(.disabled),wm-uploader .wm-button.-selector-primary.dark:not(:disabled):not(.disabled){color:#575195;background:#fff;border:2px solid #fff}:host .wm-button:disabled,wm-uploader .wm-button:disabled,:host .wm-button.disabled,wm-uploader .wm-button.disabled{background:inherit;border-color:#737373;color:#737373;cursor:default;pointer-events:none}:host .wm-button:disabled.-primary,wm-uploader .wm-button:disabled.-primary,:host .wm-button:disabled.-permanentlydelete,wm-uploader .wm-button:disabled.-permanentlydelete,:host .wm-button:disabled.-pairnegative,wm-uploader .wm-button:disabled.-pairnegative,:host .wm-button:disabled.-pairpositive,wm-uploader .wm-button:disabled.-pairpositive,:host .wm-button.disabled.-primary,wm-uploader .wm-button.disabled.-primary,:host .wm-button.disabled.-permanentlydelete,wm-uploader .wm-button.disabled.-permanentlydelete,:host .wm-button.disabled.-pairnegative,wm-uploader .wm-button.disabled.-pairnegative,:host .wm-button.disabled.-pairpositive,wm-uploader .wm-button.disabled.-pairpositive{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-secondary,wm-uploader .wm-button:disabled.-secondary,:host .wm-button.disabled.-secondary,wm-uploader .wm-button.disabled.-secondary{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}:host .wm-button:disabled.-selector,wm-uploader .wm-button:disabled.-selector,:host .wm-button.disabled.-selector,wm-uploader .wm-button.disabled.-selector{color:#737373}:host .wm-button:disabled.-selector-primary,wm-uploader .wm-button:disabled.-selector-primary,:host .wm-button.disabled.-selector-primary,wm-uploader .wm-button.disabled.-selector-primary{background:#737373;color:#fff;border-color:#737373}:host .wm-button:disabled.-textonly,wm-uploader .wm-button:disabled.-textonly,:host .wm-button.disabled.-textonly,wm-uploader .wm-button.disabled.-textonly{color:#6b6b6b;background:transparent}:host .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button:disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button:disabled.dark.-selector,wm-uploader .wm-button:disabled.dark.-selector,:host .wm-button:disabled.dark.-textonly,wm-uploader .wm-button:disabled.dark.-textonly,:host .wm-button:disabled.dark.-navigational,wm-uploader .wm-button:disabled.dark.-navigational,:host .wm-button:disabled.dark.-icononly,wm-uploader .wm-button:disabled.dark.-icononly,:host .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),wm-uploader .wm-button.disabled.dark.-secondary:not(.-permanentlydelete),:host .wm-button.disabled.dark.-selector,wm-uploader .wm-button.disabled.dark.-selector,:host .wm-button.disabled.dark.-textonly,wm-uploader .wm-button.disabled.dark.-textonly,:host .wm-button.disabled.dark.-navigational,wm-uploader .wm-button.disabled.dark.-navigational,:host .wm-button.disabled.dark.-icononly,wm-uploader .wm-button.disabled.dark.-icononly{color:#b5b5b5;border-color:#b5b5b5}:host .wm-button:disabled.dark.-primary,wm-uploader .wm-button:disabled.dark.-primary,:host .wm-button:disabled.dark.-selector-primary,wm-uploader .wm-button:disabled.dark.-selector-primary,:host .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button:disabled.dark.-permanentlydelete:not(.-textonly),:host .wm-button.disabled.dark.-primary,wm-uploader .wm-button.disabled.dark.-primary,:host .wm-button.disabled.dark.-selector-primary,wm-uploader .wm-button.disabled.dark.-selector-primary,:host .wm-button.disabled.dark.-permanentlydelete:not(.-textonly),wm-uploader .wm-button.disabled.dark.-permanentlydelete:not(.-textonly){background:#a6a6a6;border-color:#a6a6a6;color:#353b48}:host a.wm-button,wm-uploader a.wm-button,:host label.wm-button,wm-uploader label.wm-button{height:auto;padding-top:0.75rem;padding-bottom:0.75rem}:host,wm-uploader{display:block;position:relative;max-width:1140px}:host[dir=RTL] .mdi,wm-uploader[dir=RTL] .mdi{margin-left:0.3125rem;margin-right:0}:host input:focus+.wm-button.user-is-tabbing,wm-uploader input:focus+.wm-button.user-is-tabbing{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important}:host *,wm-uploader *{-webkit-box-sizing:border-box;box-sizing:border-box}.wm-button.disabled{pointer-events:initial !important}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:#c0392b}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:#c0392b}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f026";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}#label{margin-bottom:0.5rem}.header .info-wrapper{-ms-flex-align:center;align-items:center}.header .info-wrapper .info{font-size:0.875rem;margin-left:1rem}.header .accepted-types{font-size:0.875rem}.header .requirements{font-size:0.875rem;margin-left:1rem}.footer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:end;align-items:flex-end;padding:0.9375rem 1.875rem}.footer .notif-wrapper{-ms-flex-align:end;align-items:flex-end}.footer .filecount-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.footer .filecount-wrapper .filecount{font-size:0.875rem;margin-right:1rem}.notif-wrapper{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-bottom:0.75rem}.notif-wrapper .requirements{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.notif,#error{padding-top:0.25rem;font-size:0.875rem;font-style:italic}.notif#error,#error#error{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem}.info-wrapper{position:relative;display:-ms-flexbox;display:flex}.list-container{overflow-y:unset}.list-container.checkmark-spacer{margin-right:2.75rem}.list-container:has(.error-list,.inprogress-list,.file-list){margin-top:2.5rem}.list-container ul{padding:0;width:100%;margin:0}.list-container ul wm-file{margin-bottom:0.5rem}.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}.empty-block{margin:5rem auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}.empty-block .upload-file{margin-bottom:1.875rem}.empty-block .empty-message{font-size:0.875rem;margin-bottom:0.4375rem}.empty-block .empty-message.large{font-size:1.5rem}.empty-block .info-wrapper{-ms-flex-pack:center;justify-content:center;width:100%}.empty-block .info-wrapper .wm-button{width:auto}.header.type1,.header.type2{margin-bottom:1rem}.header .slot-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:start;align-items:flex-start}.notif-wrapper.type1,.notif-wrapper.type2{-ms-flex-direction:column;flex-direction:column;margin-bottom:1rem}.list-container.type1,.list-container.type2{overflow-y:auto}.list-container.type1 ul,.list-container.type2 ul{margin:revert}.list-container.type1 .file-list li,.list-container.type1 .inprogress-list li,.list-container.type2 .file-list li,.list-container.type2 .inprogress-list li{margin-bottom:1.625rem}.list-container.type1 .error-list li,.list-container.type2 .error-list li{margin-bottom:1.25rem}.list-container.type1{padding:0 1.875rem;height:16.25rem}';var Uploader=function(){function e(e){registerInstance(this,e);this.wmUploaderFilesSelected=createEvent(this,"wmUploaderFilesSelected",7);this.wmFilesSelected=createEvent(this,"wmFilesSelected",7);this.wmUploaderDeleteFile=createEvent(this,"wmUploaderDeleteFile",7);this.wmDeleteFile=createEvent(this,"wmDeleteFile",7);this.wmUploaderDownloadFile=createEvent(this,"wmUploaderDownloadFile",7);this.wmDownloadFile=createEvent(this,"wmDownloadFile",7);this.wmUploaderPreviewFile=createEvent(this,"wmUploaderPreviewFile",7);this.wmFileDelete=createEvent(this,"wmFileDelete",7);this.wmFileDownload=createEvent(this,"wmFileDownload",7);this.wmFilePreview=createEvent(this,"wmFilePreview",7);this.inputId=generateId();this.uploaderType=undefined;this.type=undefined;this.label=undefined;this.buttonText=undefined;this.info=undefined;this.emptyStateText=undefined;this.icon=undefined;this.fileTypes="pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv";this.maxSize=undefined;this.maxFiles=undefined;this.sortBy="date";this.showInfo="time";this.errorMessage=undefined;this.requiredField=undefined;this.files=undefined;this.fileList=[];this.filesToUpload=[];this.isTabbing=false;this.rejectedFiles=undefined;this.errorList=[];this.notif=undefined;this.internalErrorMessage=undefined;this.announcement="";this.numFilesInProgress=undefined;this.isCondensed=false}Object.defineProperty(e.prototype,"uploadButtonEl",{get:function(){return this.el.shadowRoot.querySelector("#".concat(this.inputId))},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"tempUploaderType",{get:function(){return this.type||this.uploaderType},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"effectiveMaxSize",{get:function(){var e=100;var t=100;return this.maxSize?Math.min(this.maxSize,t):e},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"fileLimitReached",{get:function(){return this.maxFiles&&this.fileList.length>=this.maxFiles},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"displayedErrorMessage",{get:function(){return this.errorMessage||this.internalErrorMessage||""},enumerable:false,configurable:true});e.prototype.toggleTabbingOn=function(){this.isTabbing=true};e.prototype.toggleTabbingOff=function(){this.isTabbing=false};e.prototype.handleUploadProgress=function(e){var t=this;this.fileList.map((function(o){if(o.id===e.detail.id){o.progress=e.detail.progress;forceUpdate(t.el)}}));if(e.detail.progress===100){this.numFilesInProgress-=1}if(!this.srProgress&&this.numFilesInProgress){var o=this.numFilesInProgress;this.srProgress=setInterval((function(){var e=t.fileList.reduce((function(e,t){return t.progress?e+t.progress:e}),0);t.announce(uploaderMessages.getUploadProgress(Math.floor(e/o)))}),5e3)}};e.prototype.handleFileErrorCleared=function(e){var t=e.detail.name;this.errorList=this.errorList.filter((function(e){return e.name!=t}));this.uploadButtonEl.focus()};e.prototype.handleFileDeleted=function(e){this.clearErrors();forceUpdate(this.el);this.wmUploaderDeleteFile.emit(e.detail);this.wmFileDelete.emit(e.detail);this.wmDeleteFile.emit(e.detail)};e.prototype.handleFilePreviewed=function(e){this.clearErrors();this.wmUploaderPreviewFile.emit(e.detail);this.wmFilePreview.emit(e.detail)};e.prototype.handleFileDownloaded=function(e){this.clearErrors();this.wmUploaderDownloadFile.emit(e.detail);this.wmFileDownload.emit(e.detail);this.wmDownloadFile.emit(e.detail)};e.prototype.parseFiles=function(){var e=this;if(!!this.files){if(typeof this.files==="string"){var t=JSON.parse(this.files);if(typeof t==="object"){t.forEach((function(t){if(t.size&&(typeof t.size==="number"||t.size.match(/^[0-9]+$/))){var o=e.convertBytes(t.size);t.size="".concat(o.size.toFixed(0)," ").concat(o.unit)}}));this.fileList=t}else{throw new Error("could not parse string passed to files attribute")}}else{throw new Error("Attribute 'files' should be a string")}}};e.prototype.focusAfterRemoval=function(e,t){if(this.isTabbing&&e.length<t.length){var o=e.map((function(e){return e.id}));var r=t.map((function(e){return e.id}));var n=r.filter((function(e){return!o.includes(e)}))[0];if(r.indexOf(n)>0){var i=r[r.indexOf(n)-1];var a=this.el.shadowRoot.querySelector("#file-"+i);var s=a===null||a===void 0?void 0:a.shadowRoot.querySelectorAll("wm-button");if(s&&s.length>0){var l=s[s.length-1];l.focus()}else{this.focusAfterRemoval(e.filter((function(e){return e.id!==i})),t)}}else{this.uploadButtonEl.focus()}}};e.prototype.parseRejectedFiles=function(){if(!!this.rejectedFiles){if(typeof this.files==="string"){var e=JSON.parse(this.rejectedFiles);if(typeof e==="object"){this.errorList=e}else{throw new Error("could not parse string passed to errors attribute")}}else{throw new Error("Attribute 'rejected-files' should be a string")}}};e.prototype.uploadNotifications=function(e,t){var o=this;if(t>0&&e===0){setTimeout((function(){o.notif="";o.internalErrorMessage=""}),20*1e3);this.notif=uploaderMessages.finishedUploading;this.announce(uploaderMessages.finishedUploading);this.numFilesInProgress=null;clearInterval(this.srProgress);forceUpdate(this.el)}else if(e>0&&e!=t){this.notif=uploaderMessages.getFilesUploading(e);this.announce(uploaderMessages.getFilesUploading(e));forceUpdate(this.el)}};e.prototype.handleErrorMessageChange=function(){if(this.errorMessage){this.announce(this.errorMessage)}};e.prototype.isValidSize=function(e){return this.convertBytes(e,"MB").size<=this.effectiveMaxSize};e.prototype.convertBytes=function(e,t){var o=["bytes","KB","MB","GB","TB"];var r=0;var n=typeof e==="number"?e:parseInt(e);if(t){while(o.indexOf(t)>r){n/=1024;r++}}else{while(n>1e3){n/=1024;r++}}return{size:n,unit:o[r]}};e.prototype.isDuplicate=function(e){var t=this.filesToUpload.some((function(t){return t.name===e}));var o=this.fileList.some((function(t){var o=t.type?t.name+"."+t.type:t.name;return o===e}));return t||o};e.prototype.isEmpty=function(){return!this.fileList.length&&!this.errorList.length};Object.defineProperty(e.prototype,"isDisabled",{get:function(){return this.fileLimitReached||this.numFilesInProgress>0},enumerable:false,configurable:true});e.prototype.isItemUploading=function(e){return e.hasOwnProperty("progress")&&e.progress<100};e.prototype.announce=function(e){if(this.liveRegion.textContent===e){e+=" "}this.announcement=e};e.prototype.clearErrors=function(){this.errorList=[];this.notif="";this.internalErrorMessage=""};e.prototype.handleFiles=function(e){var t=this;this.filesToUpload=[];var o=Array.from(e.target.files);var r=this.fileTypes.split(" ").join(", ");if(!!this.maxFiles&&this.fileList.length+o.length>this.maxFiles){this.internalErrorMessage=uploaderMessages.fileLimitExceeded;this.announce(uploaderMessages.fileLimitExceeded)}else{o&&o.map((function(e){if(!hasValidType(e,t.fileTypes)){var o={name:e.name,message:uploaderMessages.getInvalidFileType(r)};t.errorList.push(o)}else if(e.size===0){var o={name:e.name,message:uploaderMessages.zeroFileSize};t.errorList.push(o)}else if(!t.isValidSize(e.size)){var o={name:e.name,message:uploaderMessages.getFileTooLarge(t.effectiveMaxSize)};t.errorList.push(o)}else if(t.isDuplicate(e.name)){var o={name:e.name,message:uploaderMessages.duplicateName};t.errorList.push(o)}else{t.filesToUpload.push(e)}}));if(this.filesToUpload.length>0){this.numFilesInProgress=this.filesToUpload.length;this.wmUploaderFilesSelected.emit(this.filesToUpload);this.wmFilesSelected.emit(this.filesToUpload)}}e.target.value=""};e.prototype.componentWillLoad=function(){if(!this.buttonText){throw new Error("wm-uploader: button-text is a required prop")}if(this.type){console.warn("wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.")}if(this.tempUploaderType==="1"&&!this.emptyStateText){throw new Error("wm-uploader: empty-state-text is a required prop")}this.parseFiles();this.clearErrors();this.parseRejectedFiles()};e.prototype.componentDidLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}};e.prototype.uploadButtonOnClick=function(e){if(this.isDisabled){e.preventDefault();if(this.numFilesInProgress>0){var t=uploaderMessages.waitToUpload;this.announce(t)}else if(this.fileLimitReached){this.internalErrorMessage=uploaderMessages.fileLimitReached;this.announce(uploaderMessages.fileLimitReached)}}else{this.clearErrors()}};e.prototype.renderUploadSvg=function(){return h("svg",{class:"upload-file",width:"91",height:"84",viewBox:"0 0 91 84"},h("path",{transform:"rotate(-180.000000) translate(-452, -255.5)",fill:"#eae8ec",d:"M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z"}))};e.prototype.renderIcon=function(){var e=this.icon&&this.icon==="f066";return this.icon&&h("span",{class:"mdi ".concat(e?"rotate":"")},String.fromCodePoint(parseInt("0x".concat(this.icon))))};e.prototype.renderInfo=function(){return this.info&&this.tempUploaderType==="2"?h("span",{class:"info"},this.info):""};e.prototype.renderNotif=function(){return h("div",{class:"notif"},this.notif)};e.prototype.renderError=function(){return h("div",{id:"error"},this.displayedErrorMessage)};e.prototype.renderUploadButton=function(e){var t=this;var o="".concat(this.label&&this.label!==this.buttonText?"".concat(this.label,", "):"").concat(this.buttonText);return h("div",{class:"info-wrapper"},h("input",{name:this.inputId,id:this.inputId,class:"sr-only","aria-label":o,"aria-required":this.requiredField?"true":null,"aria-describedby":"".concat(this.displayedErrorMessage?"error ":"","file-count max-size accepted-types"),type:"file",multiple:true,onClick:function(e){return t.uploadButtonOnClick(e)},onChange:function(e){return t.handleFiles(e)}}),h("label",{htmlFor:this.inputId,class:"wm-button ".concat(e).concat(this.isTabbing?" user-is-tabbing":"")},this.renderIcon(),this.buttonText),this.renderInfo())};e.prototype.renderEmptyState=function(){return h("div",{class:"empty-block"},this.renderUploadSvg(),h("div",{class:"empty-message"},this.emptyStateText),this.renderUploadButton("-primary empty-button"),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())};e.prototype.renderErrorList=function(){var e=this.errorList.reduce((function(e,t){return e+"".concat(t.name,": ").concat(t.message," ")}),"");this.announce(e);return h("ul",{class:"error-list"},this.errorList.map((function(e){return h("wm-file",{file:'{"name": "'.concat(e.name,'"}'),"error-message":e.message})})))};e.prototype.formatTimestamp=function(e){var t=new Date(Date.parse(e));var o=t.getDate();var r=t.getMonth()+1;var n=t.getFullYear();var i=t.toLocaleTimeString("en-us",{hour:"numeric",minute:"2-digit"});var a="".concat(r,"/").concat(o,"/").concat(n," ").concat(i);return a};e.prototype.renderInProgressFileList=function(){var e=this;return h("ul",{class:"inprogress-list"},this.fileList.filter((function(t){return e.isItemUploading(t)})).map((function(t){return h("wm-file",{file:JSON.stringify(t),"show-info":e.showInfo})})))};e.prototype.renderUploadedFileList=function(){var e=this;return h("ul",{class:"file-list"},this.fileList.filter((function(t){return!e.isItemUploading(t)})).map((function(t){t.lastUpdated=e.formatTimestamp(t.lastUpdated);return h("wm-file",{id:"file-".concat(t.id),file:JSON.stringify(t),"show-info":e.showInfo})})))};e.prototype.renderFiles=function(){this.sortBy==="name"?this.fileList.sort((function(e,t){return e.name.localeCompare(t.name)})):this.fileList.sort((function(e,t){return Date.parse(e.lastUpdated)-Date.parse(t.lastUpdated)}));return h("div",null,this.renderInProgressFileList(),this.renderUploadedFileList())};e.prototype.legacyRenderHeader=function(){return h("div",{class:"header ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"slot-wrapper"},h("slot",null),h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},this.renderUploadButton("-secondary ".concat(this.isDisabled?"disabled":"")),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())))};e.prototype.renderHeader=function(){var e="."+this.fileTypes.split(" ").join(", .");return h("div",{class:"header ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},this.renderUploadButton("-secondary ".concat(this.isDisabled?"disabled":"")),this.renderRequirements()),h("div",{id:"accepted-types",class:"accepted-types"},uploaderMessages.getAcceptedFileTypes(e,this.fileTypes.split(" ").length)),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())};e.prototype.renderRequirements=function(){return h("div",{class:"requirements"},this.maxFiles&&h("span",{id:"file-count"},uploaderMessages.getFileCount(this.fileList.length,this.maxFiles)),this.maxSize&&h("span",{id:"max-size"},uploaderMessages.getMaxSize(this.effectiveMaxSize)))};e.prototype.renderFooter=function(){return h("div",{class:"footer"},h("div",{class:"notif-wrapper ".concat(this.tempUploaderType?"type".concat(this.tempUploaderType):"")},h("div",{class:"filecount-wrapper"},h("div",{class:"filecount"},uploaderMessages.getFilesAdded(this.fileList.length)),this.renderUploadButton("-primary ".concat(this.isDisabled?"disabled":""))),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError()))};e.prototype.renderWithItems=function(){var e=this.fileList.filter((function(e){return e.progress===(typeof e.progress==="number"?100:"100")})).length>0;return h("div",null,!this.tempUploaderType&&this.renderHeader(),this.tempUploaderType==="2"&&this.legacyRenderHeader(),h("div",{class:"list-container type".concat(this.tempUploaderType," ").concat(!this.tempUploaderType&&e?"checkmark-spacer":"")},this.errorList.length>0&&this.renderErrorList(),this.fileList.length>0&&this.renderFiles()),this.tempUploaderType==="1"&&this.renderFooter())};e.prototype.renderLabel=function(){return h("div",{class:"wrapper ".concat(this.displayedErrorMessage?"invalid":"")},h("div",{id:"label",class:"label"},this.label,this.requiredField&&h("span",{class:"required","aria-hidden":"true"},"*")))};e.prototype.render=function(){var e=this;return h(Host,null,this.label&&this.renderLabel(),this.isEmpty()&&this.tempUploaderType==="1"?this.renderEmptyState():this.renderWithItems(),h("div",{ref:function(t){return e.liveRegion=t},class:"live-region sr-only","aria-live":"assertive","aria-atomic":"true"},this.announcement))};Object.defineProperty(e,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{files:["parseFiles"],fileList:["focusAfterRemoval"],rejectedFiles:["parseRejectedFiles"],numFilesInProgress:["uploadNotifications"],errorMessage:["handleErrorMessageChange"]}},enumerable:false,configurable:true});return e}();Uploader.style=wmUploaderCss;export{Uploader as wm_uploader};
 //# sourceMappingURL=wm-uploader.entry.js.map