@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/ripple/p-d0f5773a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmInputCss","Input","this","uid","previousBlurredValue","numberErrorMessage","intl","formatMessage","id","defaultMessage","charCount","value","length","componentWillLoad","el","generateId","label","console","error","componentDidLoad","inputEl","handleErrorMessage","newValue","displayedErrorMessage","handleKeyDown","ev","isModifierKey","ctrlKey","metaKey","altKey","isCharacter","test","key","hasReachedCharacterLimit","characterLimit","announce","generateCharacterLimitWarning","handleBlur","wmInputValueChanged","emit","shouldPreventValidation","preventValidation","isRelatedTarget","validate","inputWrapperEl","classList","remove","handleInput","target","handleFocus","add","validationRules","validateNumber","bind","validateRequired","errorMessage","reduce","prev","current","reqMsg","requiredFieldMessage","requiredField","type","validity","badInput","message","liveRegionEl","textContent","announcement","charLimit","charactersEnteredMessage","description","x","y","characterLimitReachedMessage","generateCharacterLimitLabel","limit","renderErrorMessage","render","h","Host","class","labelPosition","ref","htmlFor","disabled","onInput","onKeyDown","onBlur","onFocus","placeholder","autocomplete","maxLength","undefined","step","max","min","info"],"sources":["./src/components/wm-input/wm-input.scss?tag=wm-input&encapsulation=shadow","./src/components/wm-input/wm-input.tsx"],"sourcesContent":[":host,\r\nwm-input {\r\n  font-family: inherit;\r\n  width: 100%;\r\n\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  @include label;\r\n\r\n  .wrapper {\r\n    .inner-wrapper {\r\n      width: 100%;\r\n    }\r\n\r\n    .inputfield-wrapper {\r\n      height: rem-calc(40);\r\n      border: 1px solid $input-border-color;\r\n      @include border-radius(3px);\r\n      display: flex;\r\n    }\r\n\r\n    .character-count {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: rem-calc(80);\r\n      background-color: rgba($charcoal, 0.05);\r\n      font-size: rem-calc(14);\r\n      font-weight: 500;\r\n      align-self: stretch;\r\n    }\r\n\r\n    input {\r\n      @include border-radius(3px);\r\n      border: none;\r\n      font-family: inherit;\r\n      font-size: rem-calc(14);\r\n      height: 100%;\r\n      flex: 1;\r\n      padding: rem-calc(12 16);\r\n      width: 100%;\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    .info {\r\n      font-style: italic;\r\n      line-height: 100%;\r\n      margin: 4px 0;\r\n    }\r\n\r\n    &.invalid {\r\n      & .inputfield-wrapper {\r\n        @include invalidBorder;\r\n      }\r\n\r\n      .error-message {\r\n        @include errorMessage;\r\n        line-height: 100%;\r\n      }\r\n    }\r\n\r\n    &:focus,\r\n    &.focus {\r\n      .inputfield-wrapper {\r\n        @include field-focus;\r\n      }\r\n    }\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n  }\r\n}\r\n","import { h, Component, Element, Event, EventEmitter, Host, Prop, State, Watch } from \"@stencil/core\";\r\nimport { intl, generateId, isRelatedTarget } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-input\",\r\n  styleUrl: \"wm-input.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Input {\r\n  @Element() el!: HTMLWmInputElement;\r\n  private inputEl!: HTMLInputElement;\r\n  private inputWrapperEl!: HTMLDivElement;\r\n  private liveRegionEl!: HTMLDivElement;\r\n\r\n  @Prop() label!: string;\r\n  @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\r\n  @Prop({ reflect: true, mutable: true }) value: string = \"\";\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  @Prop() info?: string;\r\n  @Prop() placeholder: string = \"\";\r\n  @Prop() requiredField: boolean = false;\r\n  @Prop() requiredFieldMessage?: string;\r\n  @Prop() errorMessage?: string;\r\n  @Prop() characterLimit?: number;\r\n  @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\r\n  @Prop() type: \"number\" | \"text\" = \"text\";\r\n  @Prop() step?: number = 1;\r\n  @Prop() min?: number;\r\n  @Prop() max?: number;\r\n\r\n  get charCount(): number {\r\n    return this.value.length;\r\n  }\r\n\r\n  @State() announcement: string = \"\";\r\n\r\n  @Event() wmInputValueChanged!: EventEmitter<{ value: string }>;\r\n  @State() displayedErrorMessage: string = \"\";\r\n\r\n  private uid: string = \"\";\r\n  private previousBlurredValue: string = \"\";\r\n  private numberErrorMessage = intl.formatMessage({\r\n    id: \"input.numberError\",\r\n    defaultMessage: \"Please enter a valid number.\",\r\n  });\r\n\r\n  componentWillLoad() {\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n\r\n    if (!this.label) {\r\n      console.error(\"wm-input requires the label property\");\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.value) {\r\n      this.inputEl.value = this.value;\r\n      this.previousBlurredValue = this.inputEl.value;\r\n    }\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleErrorMessage(newValue: string) {\r\n    this.displayedErrorMessage = newValue;\r\n  }\r\n\r\n  handleKeyDown(ev: KeyboardEvent) {\r\n    // in most browsers, onInput doesn't fire if the input's maxLength is reached\r\n    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used\r\n    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;\r\n    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;\r\n    const hasReachedCharacterLimit =\r\n      isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;\r\n\r\n    if (hasReachedCharacterLimit) {\r\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit!));\r\n    }\r\n  }\r\n\r\n  handleBlur(ev: FocusEvent) {\r\n    if (this.value !== this.previousBlurredValue) {\r\n      this.wmInputValueChanged.emit({ value: this.value });\r\n    }\r\n    this.previousBlurredValue = this.value;\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.displayedErrorMessage = this.validate();\r\n    }\r\n    this.inputWrapperEl.classList.remove(\"focus\");\r\n  }\r\n\r\n  handleInput(ev: Event) {\r\n    this.value = (ev.target as HTMLInputElement).value;\r\n    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {\r\n      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));\r\n    }\r\n  }\r\n\r\n  handleFocus() {\r\n    this.inputWrapperEl.classList.add(\"focus\");\r\n  }\r\n\r\n  validate() {\r\n    // These rules are in priority order\r\n    // i.e. an input that is triggering both required and number errors will only show the number one but it's first\r\n    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];\r\n\r\n    if (this.errorMessage) {\r\n      return this.errorMessage;\r\n    } else {\r\n      // sets newError to first rule that returns an error\r\n      return validationRules.reduce((prev, current) => (prev ? prev : current()), \"\");\r\n    }\r\n  }\r\n\r\n  validateRequired(): string {\r\n    const reqMsg =\r\n      this.requiredFieldMessage ||\r\n      intl.formatMessage({\r\n        id: \"global.requiredError\",\r\n        defaultMessage: \"This field is required.\",\r\n      });\r\n    return this.requiredField && this.value === \"\" ? reqMsg : \"\";\r\n  }\r\n\r\n  validateNumber(): string {\r\n    return this.type === \"number\" && this.inputEl.validity.badInput ? this.numberErrorMessage : \"\";\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.liveRegionEl.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  generateCharacterLimitWarning(charCount: number, charLimit: number): string {\r\n    const charactersEnteredMessage = intl.formatMessage(\r\n      {\r\n        id: \"global.charactersEntered\",\r\n        defaultMessage: \"{x, number} of {y, number} characters entered.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { x: charCount, y: charLimit }\r\n    );\r\n\r\n    const characterLimitReachedMessage = intl.formatMessage({\r\n      id: \"global.characterLimitReached\",\r\n      defaultMessage: \"No additional characters will be entered.\",\r\n      description: \"for screen readers\",\r\n    });\r\n\r\n    return `${charactersEnteredMessage}${charCount >= charLimit ? \" \" + characterLimitReachedMessage : \"\"}`;\r\n  }\r\n\r\n  generateCharacterLimitLabel(characterLimit: number): string {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"global.characterLimit\",\r\n        defaultMessage: \"{limit, number} characters allowed.\",\r\n        description: \"for screen readers\",\r\n      },\r\n      { limit: characterLimit }\r\n    );\r\n  }\r\n\r\n  renderErrorMessage() {\r\n    return this.errorMessage || this.displayedErrorMessage;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host id={this.uid}>\r\n        <div\r\n          class={`wrapper label-${this.labelPosition} ${\r\n            this.errorMessage || this.displayedErrorMessage ? \"invalid\" : \"\"\r\n          }`}\r\n          ref={(el) => (this.inputWrapperEl = el as HTMLDivElement)}\r\n        >\r\n          <div class=\"label-wrapper\">\r\n            {this.labelPosition !== \"none\" && (\r\n              <label htmlFor={`inputfield-${this.uid}`} class=\"label\">\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 class=\"inner-wrapper\">\r\n            <div class=\"inputfield-wrapper\">\r\n              <input\r\n                ref={(el) => (this.inputEl = el as HTMLInputElement)}\r\n                id={`inputfield-${this.uid}`}\r\n                disabled={this.disabled}\r\n                aria-label={`${this.label}${\r\n                  this.characterLimit ? \" \" + this.generateCharacterLimitLabel(this.characterLimit) : \"\"\r\n                }`}\r\n                aria-describedby={`info-${this.uid} error-${this.uid}`}\r\n                onInput={(ev) => this.handleInput(ev)}\r\n                onKeyDown={(ev) => this.handleKeyDown(ev)}\r\n                onBlur={(ev) => this.handleBlur(ev)}\r\n                onFocus={this.handleFocus.bind(this)}\r\n                placeholder={this.placeholder}\r\n                autocomplete=\"off\"\r\n                aria-required={this.requiredField ? \"true\" : null}\r\n                maxLength={this.characterLimit || undefined}\r\n                type={this.type}\r\n                step={this.step}\r\n                max={this.max}\r\n                min={this.min}\r\n              />\r\n              {this.characterLimit && typeof this.characterLimit === \"number\" ? (\r\n                <div class=\"character-count\">\r\n                  {this.charCount}/{this.characterLimit}\r\n                </div>\r\n              ) : (\r\n                \"\"\r\n              )}\r\n            </div>\r\n            {this.info && (\r\n              <div id={`info-${this.uid}`} class=\"info\">\r\n                {this.info}\r\n              </div>\r\n            )}\r\n            <div id={`error-${this.uid}`} aria-live=\"assertive\" class=\"error-message\" aria-atomic=\"true\">\r\n              {this.renderErrorMessage()}\r\n            </div>\r\n            <div\r\n              class=\"sr-only\"\r\n              aria-live=\"polite\"\r\n              aria-atomic=\"true\"\r\n              ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\r\n            >\r\n              {this.announcement}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-d5b0809e.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmModalCss","Modal","this","bodyFocusListener","redirectFocusFromBody","tempOpen","open","isOpen","tempModalType","modalType","isTypeDialog","focusOnOpenEl","customElementToFocus","elementToFocus","el","querySelector","uid","console","warn","closeButtonEl","toggleModal","showModal","hideModal","handleClick","ev","target","overlayEl","focus","closeModalOnEscape","key","stopPropagation","wmModalCloseTriggered","emit","wmCloseTriggered","setAriaDescribedbyOnModal","setElToFocusOnClose","document","body","style","overflow","tabIndex","removeEventListener","addEventListener","window","requestAnimationFrame","focusOnCloseEl","componentWillLoad","id","error","generateId","componentDidLoad","async","wmModalPrimaryTriggered","wmPrimaryTriggered","wmModalSecondaryTriggered","wmSecondaryTriggered","modalBody","getElementById","setAttribute","elToFocus","activeElement","tagName","parentElement","checkForActiveElInShadow","render","h","Host","class","role","tabindex","onFocus","focusLastElement","ref","focusFirstElement"],"sources":["./src/components/wm-modal/wm-modal.scss?tag=wm-modal","./src/components/wm-modal/wm-modal.tsx"],"sourcesContent":["wm-modal {\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n  @include displayFlex();\r\n  @include justifyContent(center);\r\n  @include alignItems(center);\r\n\r\n  flex-direction: column;\r\n  position: fixed;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n  z-index: 2001;\r\n  width: 80vw;\r\n  max-width: 750px;\r\n  max-height: 80vh;\r\n  @include box-shadow(\r\n    0px 11px 15px 0px rgba(0, 0, 0, 0.2),\r\n    0px 9px 46px 8px rgba(0, 0, 0, 0.12),\r\n    0px 24px 38px 3px rgba(0, 0, 0, 0.14)\r\n  );\r\n\r\n  > * {\r\n    width: 80vw;\r\n    max-width: 750px;\r\n    background: $light-background;\r\n\r\n    &:focus {\r\n      outline: none;\r\n    }\r\n  }\r\n\r\n  wm-modal-header,\r\n  wm-modal-footer {\r\n    padding: rem-calc(20 30);\r\n  }\r\n\r\n  wm-modal-header {\r\n    z-index: 2003;\r\n  }\r\n\r\n  wm-modal-footer {\r\n    z-index: 2003;\r\n  }\r\n\r\n  > :not(wm-modal-header):not(wm-modal-footer) {\r\n    max-height: calc(80vh - 166px);\r\n    z-index: 2002;\r\n  }\r\n\r\n  &.wm-modal {\r\n    wm-modal-header {\r\n      border-bottom: 1px solid rgb(244, 243, 246);\r\n    }\r\n\r\n    wm-modal-footer {\r\n      border-top: 1px solid rgb(244, 243, 246);\r\n    }\r\n\r\n    @media only screen and (max-width: 768px) {\r\n      height: 100%;\r\n      max-height: none;\r\n      max-width: none;\r\n      width: 100vw;\r\n\r\n      > * {\r\n        max-width: none;\r\n        width: 100vw;\r\n      }\r\n\r\n      > *:not(wm-modal-header):not(wm-modal-footer) {\r\n        max-height: none;\r\n        height: calc(100vh - 166px);\r\n      }\r\n    }\r\n  }\r\n\r\n  &.wm-dialog {\r\n    > :not(wm-modal-header):not(wm-modal-footer) {\r\n      padding: rem-calc(0 30 20 30);\r\n      font-size: rem-calc(14px);\r\n      border: none;\r\n    }\r\n  }\r\n\r\n  .overlay {\r\n    width: 100vw;\r\n    height: 100vh;\r\n    max-width: none;\r\n    max-height: none;\r\n    position: fixed !important;\r\n    top: -1;\r\n    bottom: 1;\r\n    left: -1;\r\n    right: 1;\r\n    transform: translate(0%, 0%);\r\n    background-color: rgba(25, 25, 25, 0.4);\r\n    @include transition(opacity 0.5s ease-out);\r\n    z-index: 2000;\r\n  }\r\n\r\n  &.hide {\r\n    visibility: hidden;\r\n  }\r\n\r\n  .sr-only {\r\n    @include srOnly;\r\n    top: 0;\r\n    left: 0;\r\n  }\r\n}\r\n","import { h, Component, Element, Listen, Host, Prop, Watch, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport { checkForActiveElInShadow } from \"../../global/functions\";\r\nimport { generateId } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-modal\",\r\n  styleUrl: \"wm-modal.scss\",\r\n})\r\nexport class Modal {\r\n  @Element() el!: HTMLWmModalElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n  @Prop({ reflect: true, mutable: true }) isOpen: boolean = false; // DEPRECATED in favor of open\r\n  get tempOpen() {\r\n    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out\r\n    return this.open || this.isOpen;\r\n  }\r\n  @Prop({ mutable: true }) elementToFocus: \"primary\" | \"secondary\" | string = \"\"; // primary and secondary point to the corresponding buttons, otherwise focus based on element id\r\n  @Prop({ reflect: true }) modalType: \"modal\" | \"dialog\" | null = null;\r\n  @Prop({ reflect: true }) isTypeDialog: boolean | null = null;\r\n  get tempModalType() {\r\n    return this.modalType ? this.modalType : this.isTypeDialog ? \"dialog\" : \"modal\";\r\n  }\r\n  @Prop({ mutable: true, reflect: true }) uid!: string;\r\n  private focusOnCloseEl!: HTMLElement;\r\n  private overlayEl!: HTMLDivElement;\r\n  private bodyFocusListener: () => void = () => this.redirectFocusFromBody();\r\n\r\n  @Event({ bubbles: false }) focusLastElement!: EventEmitter;\r\n  @Event({ bubbles: false }) focusFirstElement!: EventEmitter;\r\n  // wmModalCloseTriggered does not bubble, prevent nested modals from closing all at once\r\n  @Event({ bubbles: false }) wmModalCloseTriggered!: EventEmitter;\r\n  @Event() wmCloseTriggered!: EventEmitter; // deprecated in favor of wmModalCloseTriggered\r\n  @Event() wmModalPrimaryTriggered!: EventEmitter;\r\n  @Event() wmPrimaryTriggered!: EventEmitter; // deprecated in favor of wmModalPrimaryTriggered\r\n  @Event() wmModalSecondaryTriggered!: EventEmitter;\r\n  @Event() wmSecondaryTriggered!: EventEmitter; // deprecated in favor of wmModalSecondaryTriggered\r\n\r\n  get focusOnOpenEl(): HTMLElement {\r\n    let customElementToFocus: HTMLElement | null = null;\r\n\r\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\r\n      customElementToFocus = this.el.querySelector<HTMLElement>(`#wm-${this.elementToFocus}-${this.uid}`);\r\n    } else if (this.elementToFocus) {\r\n      customElementToFocus = this.el.querySelector<HTMLElement>(\"#\" + this.elementToFocus);\r\n      !customElementToFocus &&\r\n        console.warn(\r\n          \"Ripple Component Library: The modal component couldn't find an element matching the id you passed for 'elementToFocus'. It will fall back to the default and focus the close button when the modal opens.\"\r\n        );\r\n    }\r\n\r\n    const closeButtonEl = this.el.querySelector<HTMLElement>(`#wm-modal-close-${this.uid}`)!;\r\n    return customElementToFocus ? customElementToFocus : closeButtonEl;\r\n  }\r\n\r\n  //App can open modal by toggling the prop\r\n  @Watch(\"open\")\r\n  @Watch(\"isOpen\")\r\n  toggleModal() {\r\n    this.tempOpen ? this.showModal() : this.hideModal();\r\n  }\r\n\r\n  //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:\r\n  //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.\r\n  // @Listen(\"wmShowModal\", { target: \"window\" })\r\n  // doesEventMatchId(ev: CustomEvent) {\r\n  //   ev.detail === this.uid && this.showModal();\r\n  // }\r\n\r\n  @Listen(\"click\")\r\n  handleClick(ev: MouseEvent & { target: HTMLElement }) {\r\n    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpenEl.focus();\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  closeModalOnEscape(ev: KeyboardEvent) {\r\n    if (ev.key === \"Escape\") {\r\n      // stops propagation prevents nested modal from closing all at once\r\n      ev.stopPropagation();\r\n      this.wmModalCloseTriggered.emit();\r\n      this.wmCloseTriggered.emit(); // deprecated\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  showModal() {\r\n    this.setAriaDescribedbyOnModal();\r\n    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes\r\n    document.body.style.overflow = \"hidden\"; //Keeps the page below the modal from scrolling\r\n\r\n    //Focus listeners as a general catch for keeping focus in case of errors in finding element with id passed in by dev (element is removed from DOM, etc.) or other scenarios\r\n    document.body.tabIndex = 0;\r\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\r\n    document.body.addEventListener(\"focus\", this.bodyFocusListener, true);\r\n\r\n    window.requestAnimationFrame(() => {\r\n      // nested requestAnimationFrames allow all elements to become visible on page before assigning focus\r\n      window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal\r\n    });\r\n  }\r\n\r\n  //Close the modal and focus the triggering element when the modal buttons emit their events\r\n  hideModal() {\r\n    document.body.style.overflow = \"visible\";\r\n    document.body.tabIndex = -1;\r\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\r\n    window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.isOpen) {\r\n      console.warn(\"wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.\");\r\n    }\r\n    if (this.isTypeDialog) {\r\n      console.warn(\"wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.\");\r\n    }\r\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\r\n      if (!this.el.id) {\r\n        console.error(\r\n          \"You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.\"\r\n        );\r\n      }\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      this.focusOnOpenEl.focus();\r\n    };\r\n\r\n    this.uid = this.el.id ? this.el.id : generateId();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.tempOpen) {\r\n      this.showModal();\r\n    }\r\n  }\r\n\r\n  @Method()\r\n  async emitCloseEvent() {\r\n    this.wmModalCloseTriggered.emit();\r\n    this.wmCloseTriggered.emit(); // deprecated\r\n  }\r\n\r\n  @Method()\r\n  async emitPrimaryEvent() {\r\n    this.wmModalPrimaryTriggered.emit();\r\n    this.wmPrimaryTriggered.emit(); // deprecated\r\n  }\r\n\r\n  @Method()\r\n  async emitSecondaryEvent() {\r\n    this.wmModalSecondaryTriggered.emit();\r\n    this.wmSecondaryTriggered.emit(); // deprecated\r\n  }\r\n\r\n  setAriaDescribedbyOnModal() {\r\n    const modalBody = document.getElementById(`content-${this.uid}`);\r\n\r\n    if (!modalBody) {\r\n      console.warn(\r\n        \"Ripple Component Library: The element containing the body of the modal must include an id in the format 'content-[id of modal]' for accessibility purposes.\"\r\n      );\r\n    } else {\r\n      this.el.setAttribute(\"aria-describedby\", `wm-modal-heading-text-${this.uid} content-${this.uid}`);\r\n    }\r\n  }\r\n\r\n  setElToFocusOnClose() {\r\n    const elToFocus = document.activeElement as HTMLElement;\r\n    if (elToFocus.tagName === \"WM-MENUITEM\") {\r\n      this.focusOnCloseEl = elToFocus.parentElement!;\r\n    } else {\r\n      this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);\r\n    }\r\n  }\r\n\r\n  redirectFocusFromBody() {\r\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\") {\r\n      this.focusOnOpenEl.focus();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        class={`${this.tempOpen ? \"\" : \"hide \"}${\"wm-\" + this.tempModalType}`}\r\n        role=\"dialog\"\r\n        aria-describedby={`wm-modal-heading-text-${this.uid}`}\r\n        aria-modal=\"true\"\r\n        tabindex={this.tempOpen ? 0 : null}\r\n        onFocus={() => {\r\n          this.focusLastElement.emit();\r\n        }}\r\n      >\r\n        <div class=\"overlay\" ref={(el) => (this.overlayEl = el as HTMLDivElement)} />\r\n        <div\r\n          class=\"sr-only\"\r\n          tabIndex={0}\r\n          onFocus={() => {\r\n            this.focusFirstElement.emit();\r\n          }}\r\n        />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-d7b946ed.entry.js.map

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

package/dist/ripple/p-d7c55ce1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmProgressIndicatorCss","ProgressIndicator","this","uid","generateId","slicesDetails","barLabelsWidth","el","parentElement","popoverEl","shadowRoot","querySelector","sliceEls","Array","from","querySelectorAll","chartDetails","mode","allChartsDetails","undefined","ariaLabelText","text","label","subinfo","chartRoleDescription","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","call","componentWillLoad","console","error","children","length","warn","addEventListener","detail","async","getDetails","forceUpdate","handleModeUpdate","renderBarOrDoughnut","total","renderStackedBar","renderDoughnut","render","h","Host","onBlur","exitChart","ref","componentWrapperEl","class","userIsNavigating","role","tabindex","style","htmlFor","renderLegend","renderCompletionMessage","renderInstructionsText","wmProgressMonitorCss","ProgressMonitor","doughnutWidth","modeInitialized","debouncedUpdate","debounce","parsedBreakpoint","asNumber","parseToNum","breakpoint","asPixels","clientWidth","resizeObserver","ResizeObserver","observe","componentDidLoad","wmProgressMonitorModeChange","emit","componentWillUpdate","prevMode","num","asString","toString","withoutPx","replace","parseInt","keys","csvToArray","groupLegend","colors","bar","map","key","idx","legendItem","color","renderLegendItem","ProgressSlice","componentDidUpdate","wmProgressSliceUpdated"],"sources":["./src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","./src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","./src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","./src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\r\nwm-progress-indicator {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\r\nimport { ChartDetails } from \"../../../global/interfaces\";\r\nimport { generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-indicator\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-indicator.scss\",\r\n})\r\nexport class ProgressIndicator {\r\n  @Element() el!: HTMLWmProgressIndicatorElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() showLegend: boolean = true;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() mode?: \"doughnut\" | \"bar\";\r\n  @State() userIsNavigating: boolean = false;\r\n\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\r\n  private slicesDetails: SliceDetails[] = [];\r\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\r\n  }\r\n  get chartDetails(): ChartDetails | undefined {\r\n    return this.mode ? allChartsDetails[this.mode] : undefined;\r\n  }\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n\r\n    if (this.el.children.length !== 2) {\r\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\r\n    }\r\n\r\n    // Listen to parent for initial mode, and future changes\r\n    this.el.parentElement!.addEventListener(\r\n      \"wmProgressMonitorModeChange\",\r\n      (ev) => (this.mode = (ev as CustomEvent).detail)\r\n    );\r\n  }\r\n\r\n  @Listen(\"wmProgressSliceUpdated\")\r\n  async handleSliceUpdate() {\r\n    await getDetails.call(this, this.mode!);\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Watch(\"mode\")\r\n  handleModeUpdate() {\r\n    if (this.mode) {\r\n      getDetails.call(this, this.mode);\r\n    }\r\n  }\r\n\r\n  renderBarOrDoughnut() {\r\n    if (this.total > 0 && this.mode === \"bar\") {\r\n      return renderStackedBar.call(this, this.mode!);\r\n    } else {\r\n      return renderDoughnut.call(this, this.mode!);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex=\"0\"\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby={`chart-instructions`}\r\n        >\r\n          <label\r\n            id={`label-${this.uid}`}\r\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\r\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\r\n            htmlFor={`graphic-${this.uid}`}\r\n          >\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.mode && this.renderBarOrDoughnut()}\r\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host,\r\nwm-progress-monitor {\r\n  display: flex;\r\n\r\n  .legend-wrapper {\r\n    @extend %chart-legend-styles;\r\n    align-items: flex-start;\r\n    padding: 0 1.25rem;\r\n  }\r\n}\r\n\r\n:host(.row) {\r\n  flex-direction: row;\r\n}\r\n\r\n:host(.column) {\r\n  flex-direction: column;\r\n}\r\n","import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\r\nimport { csvToArray, debounce } from \"../../../global/functions\";\r\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\r\nimport { LegendItem } from \"../../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-progress-monitor\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-monitor.scss\",\r\n})\r\nexport class ProgressMonitor {\r\n  @Element() el!: HTMLWmProgressMonitorElement;\r\n  @Prop() breakpoint?: number | string;\r\n  @Prop() groupLegend?: string;\r\n  @Prop() barLabelsWidth?: string;\r\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\r\n  private doughnutWidth = 300;\r\n  private prevMode?: string;\r\n  private modeInitialized: boolean = false;\r\n\r\n  get parsedBreakpoint() {\r\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\r\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\r\n    // e.g. 4 -> 1200px, while 768 -> 768 px\r\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\r\n    return asPixels;\r\n  }\r\n\r\n  get mode(): \"doughnut\" | \"bar\" {\r\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // rerender on resize in case layout needs to change\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\r\n    this.wmProgressMonitorModeChange.emit(this.mode);\r\n    this.modeInitialized = true;\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    // store prevMode before every render except first to determine when it has changed\r\n    if (this.prevMode !== this.mode) {\r\n      this.wmProgressMonitorModeChange.emit(this.mode);\r\n    }\r\n    this.prevMode = this.mode;\r\n  }\r\n\r\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\r\n\r\n  parseToNum(num: string | number): number {\r\n    const asString = num.toString();\r\n    const withoutPx = asString.replace(\"px\", \"\");\r\n    return parseInt(withoutPx);\r\n  }\r\n\r\n  renderLegend() {\r\n    const keys = csvToArray(this.groupLegend!);\r\n    const colors = allChartsDetails.bar.colors;\r\n\r\n    return (\r\n      <div class=\"legend-wrapper\">\r\n        <div class=\"legend\">\r\n          {keys.map((key, idx) => {\r\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\r\n            return renderLegendItem(legendItem);\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\r\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\r\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\r\n        {this.modeInitialized && <slot />}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n","import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-slice\",\r\n  shadow: true,\r\n})\r\nexport class ProgressSlice {\r\n  @Prop() legend?: string;\r\n  @Prop() amount?: string;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() popoverButtonText?: string;\r\n\r\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\r\n  componentDidUpdate() {\r\n    this.wmProgressSliceUpdated.emit();\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-d7ffac2f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmToggletipCss","Toggletip","this","tooltipMessage","intl","formatMessage","id","defaultMessage","tempTooltip","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","includes","tooltipPosition","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","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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"}

package/dist/ripple/p-dbf657c5.js

@@ -1,2 +0,0 @@
-import{i as e}from"./p-05e0f901.js";const o=e.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});export{o as c};
-//# sourceMappingURL=p-dbf657c5.js.map

package/dist/ripple/p-dbf657c5.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["closeVerb","intl","formatMessage","id","defaultMessage","description"],"sources":["./src/global/intl.ts"],"sourcesContent":["import { intl } from \"./functions\";\r\n\r\nexport const closeVerb: string = intl.formatMessage({\r\n  id: \"global.closeVerb\",\r\n  defaultMessage: \"Close\",\r\n  description: \"For a button, to close a user interface element\",\r\n});\r\n"],"mappings":"0CAEaA,EAAoBC,EAAKC,cAAc,CAClDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,2D"}

package/dist/ripple/p-e1b812ed.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,f as o,h as i,H as n,g as r}from"./p-1c23de4a.js";import{g as s,i as a,v as l}from"./p-05e0f901.js";const d=':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}';const m=class{constructor(o){t(this,o);this.wmUploaderFilesSelected=e(this,"wmUploaderFilesSelected",7);this.wmFilesSelected=e(this,"wmFilesSelected",7);this.wmUploaderDeleteFile=e(this,"wmUploaderDeleteFile",7);this.wmDeleteFile=e(this,"wmDeleteFile",7);this.wmUploaderDownloadFile=e(this,"wmUploaderDownloadFile",7);this.wmDownloadFile=e(this,"wmDownloadFile",7);this.wmUploaderPreviewFile=e(this,"wmUploaderPreviewFile",7);this.wmFileDelete=e(this,"wmFileDelete",7);this.wmFileDownload=e(this,"wmFileDownload",7);this.wmFilePreview=e(this,"wmFilePreview",7);this.inputId=s();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}get uploadButtonEl(){return this.el.shadowRoot.querySelector(`#${this.inputId}`)}get tempUploaderType(){return this.type||this.uploaderType}get effectiveMaxSize(){const t=100;const e=100;return this.maxSize?Math.min(this.maxSize,e):t}get fileLimitReached(){return this.maxFiles&&this.fileList.length>=this.maxFiles}get displayedErrorMessage(){return this.errorMessage||this.internalErrorMessage||""}get fileLimitExceededMessage(){return a.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"})}get fileLimitReachedMessage(){return a.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"})}get fileCountMessage(){return a.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})}get maxSizeMessage(){return a.formatMessage({id:"uploader.maxSize",defaultMessage:"Maximum file size {maxSize}MB",description:"An indicator of the maximum file size the uploader allows"},{maxSize:this.effectiveMaxSize})}get acceptedFileTypesMessage(){const t="."+this.fileTypes.split(" ").join(", .");return a.formatMessage({id:"uploader.acceptedFileTypes",defaultMessage:"Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}"},{fileTypes:t,amount:this.fileTypes.split(" ").length})}toggleTabbingOn(){this.isTabbing=true}toggleTabbingOff(){this.isTabbing=false}handleUploadProgress(t){this.fileList.map((e=>{if(e.id===t.detail.id){e.progress=t.detail.progress;o(this.el)}}));if(t.detail.progress===100){this.numFilesInProgress-=1}if(!this.srProgress&&this.numFilesInProgress){const t=this.numFilesInProgress;this.srProgress=setInterval((()=>{const e=this.fileList.reduce(((t,e)=>e.progress?t+e.progress:t),0);this.announce(a.formatMessage({id:"uploader.uploadProgress",defaultMessage:"Upload progress: {percentage}%"},{percentage:Math.floor(e/t)}))}),5e3)}}handleFileErrorCleared(t){const e=t.detail.name;this.errorList=this.errorList.filter((t=>t.name!=e));this.uploadButtonEl.focus()}handleFileDeleted(t){this.clearErrors();o(this.el);this.wmUploaderDeleteFile.emit(t.detail);this.wmFileDelete.emit(t.detail);this.wmDeleteFile.emit(t.detail)}handleFilePreviewed(t){this.clearErrors();this.wmUploaderPreviewFile.emit(t.detail);this.wmFilePreview.emit(t.detail)}handleFileDownloaded(t){this.clearErrors();this.wmUploaderDownloadFile.emit(t.detail);this.wmFileDownload.emit(t.detail);this.wmDownloadFile.emit(t.detail)}parseFiles(){if(!!this.files){if(typeof this.files==="string"){let t=JSON.parse(this.files);if(typeof t==="object"){t.forEach((t=>{if(t.size&&(typeof t.size==="number"||t.size.match(/^[0-9]+$/))){const e=this.convertBytes(t.size);t.size=`${e.size.toFixed(0)} ${e.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")}}}focusAfterRemoval(t,e){if(this.isTabbing&&t.length<e.length){const o=t.map((t=>t.id));const i=e.map((t=>t.id));const n=i.filter((t=>!o.includes(t)))[0];if(i.indexOf(n)>0){const o=i[i.indexOf(n)-1];const r=this.el.shadowRoot.querySelector("#file-"+o);const s=r===null||r===void 0?void 0:r.shadowRoot.querySelectorAll("wm-button");if(s&&s.length>0){const t=s[s.length-1];t.focus()}else{this.focusAfterRemoval(t.filter((t=>t.id!==o)),e)}}else{this.uploadButtonEl.focus()}}}parseRejectedFiles(){if(!!this.rejectedFiles){if(typeof this.files==="string"){const t=JSON.parse(this.rejectedFiles);if(typeof t==="object"){this.errorList=t}else{throw new Error("could not parse string passed to errors attribute")}}else{throw new Error("Attribute 'rejected-files' should be a string")}}}uploadNotifications(t,e){if(e>0&&t===0){setTimeout((()=>{this.notif="";this.internalErrorMessage=""}),20*1e3);const t=a.formatMessage({id:"uploader.finishedUploading",defaultMessage:"Finished uploading"});this.notif=t;this.announce(t);this.numFilesInProgress=null;clearInterval(this.srProgress);o(this.el)}else if(t>0&&t!=e){const e=a.formatMessage({id:"uploader.filesUploading",defaultMessage:"{num, plural, one {1 file uploading} other {# files uploading}}"},{num:t});this.notif=e;this.announce(e);o(this.el)}}handleErrorMessageChange(){if(this.errorMessage){this.announce(this.errorMessage)}}isValidSize(t){return this.convertBytes(t,"MB").size<=this.effectiveMaxSize}convertBytes(t,e){const o=["bytes","KB","MB","GB","TB"];let i=0;let n=typeof t==="number"?t:parseInt(t);if(e){while(o.indexOf(e)>i){n/=1024;i++}}else{while(n>1e3){n/=1024;i++}}return{size:n,unit:o[i]}}isDuplicate(t){const e=this.filesToUpload.some((e=>e.name===t));const o=this.fileList.some((e=>{const o=e.type?e.name+"."+e.type:e.name;return o===t}));return e||o}isEmpty(){return!this.fileList.length&&!this.errorList.length}get isDisabled(){return this.fileLimitReached||this.numFilesInProgress>0}isItemUploading(t){return t.hasOwnProperty("progress")&&t.progress<100}announce(t){if(this.liveRegion.textContent===t){t+=" "}this.announcement=t}clearErrors(){this.errorList=[];this.notif="";this.internalErrorMessage=""}handleFiles(t){this.filesToUpload=[];const e=this.fileTypes.split(" ").join(", ");const o=Array.from(t.target.files);if(!!this.maxFiles&&this.fileList.length+o.length>this.maxFiles){this.internalErrorMessage=this.fileLimitExceededMessage;this.announce(this.fileLimitExceededMessage)}else{o&&o.map((t=>{if(!l(t,this.fileTypes)){const o={name:t.name,message:a.formatMessage({id:"uploader.invalidFileType",defaultMessage:"The file type is invalid. Accepted types: {validTypes}"},{validTypes:e})};this.errorList.push(o)}else if(t.size===0){const e={name:t.name,message:a.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"})};this.errorList.push(e)}else if(!this.isValidSize(t.size)){const e={name:t.name,message:a.formatMessage({id:"uploader.fileTooLarge",defaultMessage:"The selected file is too large. Maximum file size is {size}Mb"},{size:this.effectiveMaxSize})};this.errorList.push(e)}else if(this.isDuplicate(t.name)){const e={name:t.name,message:a.formatMessage({id:"uploader.duplicateName",defaultMessage:"A file with this name already exists."})};this.errorList.push(e)}else{this.filesToUpload.push(t)}}));if(this.filesToUpload.length>0){this.numFilesInProgress=this.filesToUpload.length;this.wmUploaderFilesSelected.emit(this.filesToUpload);this.wmFilesSelected.emit(this.filesToUpload)}}t.target.value=""}componentWillLoad(){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()}componentDidLoad(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}}uploadButtonOnClick(t){if(this.isDisabled){t.preventDefault();if(this.numFilesInProgress>0){const t=a.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()}}renderUploadSvg(){return i("svg",{class:"upload-file",width:"91",height:"84",viewBox:"0 0 91 84"},i("path",{transform:"rotate(-180.000000) translate(-452, -255.5)",fill:"#eae8ec",d:"M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z"}))}renderIcon(){const t=this.icon&&this.icon==="f066";return this.icon&&i("span",{class:`mdi ${t?"rotate":""}`},String.fromCodePoint(parseInt(`0x${this.icon}`)))}renderInfo(){return this.info&&this.tempUploaderType==="2"?i("span",{class:"info"},this.info):""}renderNotif(){return i("div",{class:"notif"},this.notif)}renderError(){return i("div",{id:"error"},this.displayedErrorMessage)}renderUploadButton(t){let e=`${this.label&&this.label!==this.buttonText?`${this.label}, `:""}${this.buttonText}`;return i("div",{class:"info-wrapper"},i("input",{name:this.inputId,id:this.inputId,class:"sr-only","aria-label":e,"aria-required":this.requiredField?"true":null,"aria-describedby":`${this.displayedErrorMessage?"error ":""}file-count max-size accepted-types`,type:"file",multiple:true,onClick:t=>this.uploadButtonOnClick(t),onChange:t=>this.handleFiles(t)}),i("label",{htmlFor:this.inputId,class:`wm-button ${t}${this.isTabbing?" user-is-tabbing":""}`},this.renderIcon(),this.buttonText),this.renderInfo())}renderEmptyState(){return i("div",{class:"empty-block"},this.renderUploadSvg(),i("div",{class:`empty-message`},this.emptyStateText),this.renderUploadButton("-primary empty-button"),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())}renderErrorList(){let t=this.errorList.reduce((function(t,e){return t+`${e.name}: ${e.message} `}),"");this.announce(t);return i("ul",{class:"error-list"},this.errorList.map((t=>i("wm-file",{file:`{"name": "${t.name}"}`,"error-message":t.message}))))}formatTimestamp(t){const e=new Date(Date.parse(t));const o=e.getDate();const i=e.getMonth()+1;const n=e.getFullYear();const r=e.toLocaleTimeString("en-us",{hour:"numeric",minute:"2-digit"});const s=`${i}/${o}/${n} ${r}`;return s}renderInProgressFileList(){return i("ul",{class:"inprogress-list"},this.fileList.filter((t=>this.isItemUploading(t))).map((t=>i("wm-file",{file:JSON.stringify(t),"show-info":this.showInfo}))))}renderUploadedFileList(){return i("ul",{class:"file-list"},this.fileList.filter((t=>!this.isItemUploading(t))).map((t=>{t.lastUpdated=this.formatTimestamp(t.lastUpdated);return i("wm-file",{id:`file-${t.id}`,file:JSON.stringify(t),"show-info":this.showInfo})})))}renderFiles(){this.sortBy==="name"?this.fileList.sort(((t,e)=>t.name.localeCompare(e.name))):this.fileList.sort(((t,e)=>Date.parse(t.lastUpdated)-Date.parse(e.lastUpdated)));return i("div",null,this.renderInProgressFileList(),this.renderUploadedFileList())}legacyRenderHeader(){return i("div",{class:`header ${this.tempUploaderType?`type${this.tempUploaderType}`:""}`},i("div",{class:"slot-wrapper"},i("slot",null),i("div",{class:`notif-wrapper ${this.tempUploaderType?`type${this.tempUploaderType}`:""}`},this.renderUploadButton(`-secondary ${this.isDisabled?"disabled":""}`),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())))}renderHeader(){return i("div",{class:`header ${this.tempUploaderType?`type${this.tempUploaderType}`:""}`},i("div",{class:`notif-wrapper ${this.tempUploaderType?`type${this.tempUploaderType}`:""}`},this.renderUploadButton(`-secondary ${this.isDisabled?"disabled":""}`),this.renderRequirements()),i("div",{id:"accepted-types",class:"accepted-types"},this.acceptedFileTypesMessage),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError())}renderRequirements(){return i("div",{class:"requirements"},this.maxFiles&&i("span",{id:"file-count"},this.fileCountMessage),this.maxSize&&i("span",{id:"max-size"},this.maxSizeMessage))}renderFooter(){return i("div",{class:"footer"},i("div",{class:`notif-wrapper ${this.tempUploaderType?`type${this.tempUploaderType}`:""}`},i("div",{class:"filecount-wrapper"},i("div",{class:"filecount"},a.formatMessage({id:"uploader.filesAdded",defaultMessage:"{numFiles, plural, one {1 file added} other {# files added}}"},{numFiles:this.fileList.length})),this.renderUploadButton(`-primary ${this.isDisabled?"disabled":""}`)),this.notif&&this.renderNotif(),this.displayedErrorMessage&&this.renderError()))}renderWithItems(){const t=this.fileList.filter((t=>t.progress===(typeof t.progress==="number"?100:"100"))).length>0;return i("div",null,!this.tempUploaderType&&this.renderHeader(),this.tempUploaderType==="2"&&this.legacyRenderHeader(),i("div",{class:`list-container type${this.tempUploaderType} ${!this.tempUploaderType&&t?"checkmark-spacer":""}`},this.errorList.length>0&&this.renderErrorList(),this.fileList.length>0&&this.renderFiles()),this.tempUploaderType==="1"&&this.renderFooter())}renderLabel(){return i("div",{class:`wrapper ${this.displayedErrorMessage?"invalid":""}`},i("div",{id:"label",class:`label`},this.label,this.requiredField&&i("span",{class:"required","aria-hidden":"true"},"*")))}render(){return i(n,null,this.label&&this.renderLabel(),this.isEmpty()&&this.tempUploaderType==="1"?this.renderEmptyState():this.renderWithItems(),i("div",{ref:t=>this.liveRegion=t,class:"live-region sr-only","aria-live":"assertive","aria-atomic":"true"},this.announcement))}static get delegatesFocus(){return true}get el(){return r(this)}static get watchers(){return{files:["parseFiles"],fileList:["focusAfterRemoval"],rejectedFiles:["parseRejectedFiles"],numFilesInProgress:["uploadNotifications"],errorMessage:["handleErrorMessageChange"]}}};m.style=d;export{m as wm_uploader};
-//# sourceMappingURL=p-e1b812ed.entry.js.map

package/dist/ripple/p-e1b812ed.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmUploaderCss","Uploader","this","inputId","generateId","uploadButtonEl","el","shadowRoot","querySelector","tempUploaderType","type","uploaderType","effectiveMaxSize","defaultMaxSize","maxSizeLimit","maxSize","Math","min","fileLimitReached","maxFiles","fileList","length","displayedErrorMessage","errorMessage","internalErrorMessage","fileLimitExceededMessage","intl","formatMessage","id","defaultMessage","description","fileLimitReachedMessage","fileCountMessage","x","y","maxSizeMessage","acceptedFileTypesMessage","validTypes","fileTypes","split","join","amount","toggleTabbingOn","isTabbing","toggleTabbingOff","handleUploadProgress","ev","map","i","detail","progress","forceUpdate","numFilesInProgress","srProgress","total","setInterval","aggregate","reduce","avg","item","announce","percentage","floor","handleFileErrorCleared","filename","name","errorList","filter","error","focus","handleFileDeleted","clearErrors","wmUploaderDeleteFile","emit","wmFileDelete","wmDeleteFile","handleFilePreviewed","wmUploaderPreviewFile","wmFilePreview","handleFileDownloaded","wmUploaderDownloadFile","wmFileDownload","wmDownloadFile","parseFiles","files","list","JSON","parse","forEach","size","match","convertedSize","convertBytes","toFixed","unit","Error","focusAfterRemoval","newFiles","oldFiles","newFileIds","file","oldFileIds","removedFileId","includes","indexOf","fileIdPrecedingRemoved","fileElPrecedingRemoved","focusedElementsButtons","querySelectorAll","lastButtonInFile","parseRejectedFiles","rejectedFiles","uploadNotifications","newNum","oldNum","setTimeout","notif","finishedMessage","clearInterval","filesUploadingMessage","num","handleErrorMessageChange","isValidSize","bytes","unitOrder","unitIndex","result","parseInt","isDuplicate","hasDuplicateUploadingFile","filesToUpload","some","fileToUpload","hasDuplicateUploadedFile","f","isEmpty","isDisabled","isItemUploading","hasOwnProperty","message","liveRegion","textContent","announcement","handleFiles","Array","from","target","hasValidType","push","wmUploaderFilesSelected","wmFilesSelected","value","componentWillLoad","buttonText","console","warn","emptyStateText","componentDidLoad","document","body","classList","contains","uploadButtonOnClick","preventDefault","srMsg","renderUploadSvg","h","class","width","height","viewBox","transform","fill","d","renderIcon","rotate","icon","String","fromCodePoint","renderInfo","info","renderNotif","renderError","renderUploadButton","classes","accessibleLabel","label","requiredField","multiple","onClick","onChange","htmlFor","renderEmptyState","renderErrorList","srMessage","acc","err","formatTimestamp","timestamp","uploadDate","Date","day","getDate","month","getMonth","year","getFullYear","time","toLocaleTimeString","hour","minute","formattedDate","renderInProgressFileList","stringify","showInfo","renderUploadedFileList","lastUpdated","renderFiles","sortBy","sort","a","b","localeCompare","legacyRenderHeader","renderHeader","renderRequirements","renderFooter","numFiles","renderWithItems","hasNewlyUploadedFiles","renderLabel","render","Host","ref"],"sources":["./src/components/wm-uploader/wm-uploader.scss?tag=wm-uploader&encapsulation=shadow","./src/components/wm-uploader/wm-uploader.tsx"],"sourcesContent":[":host,\r\nwm-uploader {\r\n  display: block;\r\n  position: relative;\r\n  max-width: 1140px;\r\n\r\n  &[dir=\"RTL\"] {\r\n    .mdi {\r\n      margin-left: rem-calc(5);\r\n      margin-right: 0;\r\n    }\r\n  }\r\n  @extend %wm-button;\r\n\r\n  input:focus + .wm-button.user-is-tabbing {\r\n    -webkit-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\r\n    -moz-box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\r\n    box-shadow: 0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e !important;\r\n  }\r\n}\r\n\r\n:host *,\r\nwm-uploader * {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.wm-button.disabled {\r\n  // override the %wm-button rule\r\n  // we want a pointer event when disabled,\r\n  // to trigger a SR message\r\n  pointer-events: initial !important;\r\n}\r\n\r\n@include label;\r\n#label {\r\n  margin-bottom: rem-calc(8);\r\n}\r\n\r\n.header {\r\n  .info-wrapper {\r\n    align-items: center;\r\n    .info {\r\n      font-size: rem-calc(14);\r\n      margin-left: 1rem;\r\n    }\r\n  }\r\n\r\n  .accepted-types {\r\n    font-size: rem-calc(14);\r\n  }\r\n\r\n  .requirements {\r\n    font-size: rem-calc(14);\r\n    margin-left: rem-calc(16);\r\n  }\r\n}\r\n\r\n.footer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: flex-end;\r\n  padding: rem-calc(15 30);\r\n\r\n  .notif-wrapper {\r\n    align-items: flex-end;\r\n  }\r\n\r\n  .filecount-wrapper {\r\n    display: flex;\r\n    align-items: center;\r\n    .filecount {\r\n      font-size: 0.875rem;\r\n      margin-right: 1rem;\r\n    }\r\n  }\r\n}\r\n\r\n.notif-wrapper {\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  margin-bottom: rem-calc(12);\r\n\r\n  .requirements {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n}\r\n\r\n.notif,\r\n#error {\r\n  padding-top: rem-calc(4);\r\n  font-size: 0.875rem;\r\n  font-style: italic;\r\n\r\n  &#error {\r\n    @include errorMessage;\r\n  }\r\n}\r\n\r\n.info-wrapper {\r\n  position: relative; // for .info\r\n  display: flex;\r\n}\r\n\r\n.list-container {\r\n  overflow-y: unset;\r\n\r\n  &.checkmark-spacer {\r\n    margin-right: rem-calc(44);\r\n  }\r\n\r\n  &:has(.error-list, .inprogress-list, .file-list) {\r\n    margin-top: rem-calc(40);\r\n  }\r\n\r\n  ul {\r\n    padding: 0;\r\n    width: 100%;\r\n    margin: 0;\r\n\r\n    wm-file {\r\n      margin-bottom: rem-calc(8);\r\n    }\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include srOnly;\r\n}\r\n\r\n/// FOR DEPRECATED TYPES ///////////////////////////////////////\r\n.empty-block {\r\n  margin: 5rem auto;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n\r\n  .upload-file {\r\n    margin-bottom: rem-calc(30);\r\n  }\r\n\r\n  .empty-message {\r\n    font-size: 0.875rem;\r\n    &.large {\r\n      font-size: 1.5rem;\r\n    }\r\n    margin-bottom: rem-calc(7);\r\n  }\r\n\r\n  .info-wrapper {\r\n    justify-content: center;\r\n    width: 100%; // for .notif\r\n\r\n    .wm-button {\r\n      // Removing the width inherit here to prevent a 100% width\r\n      // from the info-wrapper. Future proofing a day when\r\n      // we might want a long notif to wrap.\r\n      width: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.header {\r\n  &.type1,\r\n  &.type2 {\r\n    margin-bottom: 1rem;\r\n  }\r\n  .slot-wrapper {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: flex-start;\r\n  }\r\n}\r\n\r\n.notif-wrapper {\r\n  &.type1,\r\n  &.type2 {\r\n    flex-direction: column;\r\n    margin-bottom: rem-calc(16);\r\n  }\r\n}\r\n\r\n.list-container {\r\n  &.type1,\r\n  &.type2 {\r\n    overflow-y: auto;\r\n    ul {\r\n      margin: revert;\r\n    }\r\n    .file-list li,\r\n    .inprogress-list li {\r\n      // margin-bottom also on the last element, otherwise tooltip on dl and delete btns triggers a scrollbar\r\n      margin-bottom: rem-calc(26);\r\n    }\r\n    .error-list li {\r\n      margin-bottom: rem-calc(20);\r\n    }\r\n  }\r\n\r\n  &.type1 {\r\n    padding: rem-calc(0 30);\r\n    height: rem-calc(260);\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Listen, Watch } from \"@stencil/core\";\r\nimport { forceUpdate } from \"@stencil/core\";\r\nimport { generateId, hasValidType, intl } from \"../../global/functions\";\r\nimport { UploadedFile } from \"../../global/interfaces\";\r\ninterface ErrorFile {\r\n  name: string;\r\n  message: string;\r\n}\r\n\r\n@Component({\r\n  tag: \"wm-uploader\",\r\n  styleUrl: \"wm-uploader.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Uploader {\r\n  @Element() el!: HTMLWmUploaderElement;\r\n  private liveRegion!: HTMLDivElement;\r\n  get uploadButtonEl(): HTMLElement {\r\n    return this.el.shadowRoot!.querySelector(`#${this.inputId}`) as HTMLElement;\r\n  }\r\n\r\n  @Prop({ mutable: true }) uploaderType?: \"1\" | \"2\"; // only mutable for the deprecation transition\r\n  @Prop() type?: \"1\" | \"2\"; // DEPRECATED in favor of uploaderType\r\n  get tempUploaderType() {\r\n    // replace instances of this.tempUploaderType with this.uploaderType once type is fully phased out\r\n    return this.type || this.uploaderType;\r\n  }\r\n  @Prop() label?: string;\r\n  @Prop() buttonText!: string;\r\n  @Prop() info?: string;\r\n  @Prop() emptyStateText!: string;\r\n  @Prop() icon!: string;\r\n  @Prop() fileTypes: string = \"pdf txt log xml doc docx xls xlsx ppt pptx gif jpg jpeg png csv\";\r\n  @Prop() maxSize?: number | null; // in Mb\r\n  @Prop() maxFiles?: number;\r\n  @Prop() sortBy: \"name\" | \"date\" = \"date\"; // name is descending (a -> z), date is ascending (earlier -> later)\r\n  @Prop() showInfo: \"time\" | \"size\" | \"none\" = \"time\";\r\n  @Prop() errorMessage?: string;\r\n  @Prop() requiredField?: boolean;\r\n\r\n  @Prop() files?: string; // String representation of an array of files (the files retrieved from the server)\r\n  @State() fileList: UploadedFile[] = []; // the string above transformed into the actual array\r\n  @Prop({ mutable: true }) filesToUpload: File[] = []; // input.files that passed validation\r\n\r\n  @State() isTabbing: boolean = false;\r\n\r\n  @Prop() rejectedFiles?: string; // String representation of an array of errors to add to errorList, allows devs to display server-side errors\r\n  @State() errorList: ErrorFile[] = []; // for errors on a particular file\r\n  @State() notif?: string | null; // for upload notifications\r\n  @State() internalErrorMessage?: string;\r\n  @State() announcement: string = \"\";\r\n  @State() numFilesInProgress?: number | null; // null when not uploading != 0 (when all files are done uploading) != undefined (original state)\r\n  @State() isCondensed: boolean = false;\r\n  private srProgress?: any; // setInterval for SR to announce the aggregate progress percentage when things take a long time. stored here so it can be stopped when upload is finished.\r\n  private inputId = generateId();\r\n\r\n  @Event() wmUploaderFilesSelected!: EventEmitter;\r\n  @Event() wmFilesSelected!: EventEmitter; // deprecated in favor of wmUploaderFilesSelected\r\n  @Event() wmUploaderDeleteFile!: EventEmitter;\r\n  @Event() wmDeleteFile!: EventEmitter; // deprecated in favor of wmUploaderDeleteFile\r\n  @Event() wmUploaderDownloadFile!: EventEmitter;\r\n  @Event() wmDownloadFile!: EventEmitter; // deprecated in favor of wmUploaderDownloadFile\r\n  @Event() wmUploaderPreviewFile!: EventEmitter;\r\n\r\n  @Event() wmFileDelete!: EventEmitter<string>;\r\n  @Event() wmFileDownload!: EventEmitter<string>;\r\n  @Event() wmFilePreview!: EventEmitter<string>;\r\n\r\n  get effectiveMaxSize() {\r\n    const defaultMaxSize = 100;\r\n    // maxsize cannot be set to over 100Mb\r\n    const maxSizeLimit = 100;\r\n\r\n    return this.maxSize ? Math.min(this.maxSize, maxSizeLimit) : defaultMaxSize;\r\n  }\r\n\r\n  get fileLimitReached() {\r\n    return this.maxFiles && this.fileList.length >= this.maxFiles;\r\n  }\r\n\r\n  get displayedErrorMessage(): string {\r\n    return this.errorMessage || this.internalErrorMessage || \"\";\r\n  }\r\n\r\n  get fileLimitExceededMessage() {\r\n    return intl.formatMessage({\r\n      id: \"uploader.fileUploadLimitExceeded\",\r\n      defaultMessage: \"Upload unsuccessful because file selection would exceed the maximum number of files\",\r\n      description: \"Message displayed when trying to upload too many files\",\r\n    });\r\n  }\r\n\r\n  get fileLimitReachedMessage() {\r\n    return intl.formatMessage({\r\n      id: \"uploader.fileUploadLimitReached\",\r\n      defaultMessage: \"The maximum number of files has been reached\",\r\n      description: \"Message displayed when trying to upload additional files, but the limit has been reached\",\r\n    });\r\n  }\r\n\r\n  get fileCountMessage() {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"uploader.fileCount\",\r\n        defaultMessage: \"{x} of {y} Files\",\r\n        description: \"A count of the number of files currently uploaded\",\r\n      },\r\n      { x: this.fileList.length, y: this.maxFiles }\r\n    );\r\n  }\r\n\r\n  get maxSizeMessage() {\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"uploader.maxSize\",\r\n        defaultMessage: \"Maximum file size {maxSize}MB\",\r\n        description: \"An indicator of the maximum file size the uploader allows\",\r\n      },\r\n      {\r\n        maxSize: this.effectiveMaxSize,\r\n      }\r\n    );\r\n  }\r\n\r\n  get acceptedFileTypesMessage() {\r\n    const validTypes = \".\" + this.fileTypes.split(\" \").join(\", .\");\r\n    return intl.formatMessage(\r\n      {\r\n        id: \"uploader.acceptedFileTypes\",\r\n        defaultMessage: \"Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}\",\r\n      },\r\n      {\r\n        fileTypes: validTypes,\r\n        amount: this.fileTypes.split(\" \").length,\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(\"wmUploadProgress\")\r\n  handleUploadProgress(ev: CustomEvent) {\r\n    this.fileList.map((i) => {\r\n      if (i.id === ev.detail.id) {\r\n        i.progress = ev.detail.progress;\r\n        forceUpdate(this.el);\r\n      }\r\n    });\r\n\r\n    if (ev.detail.progress === 100) {\r\n      // inProgressList is not a perfect reflection of how many files are uploading\r\n      // because even after progress reached 100% the item should remain in the array\r\n      // (should only be removed once it appears in fileList)\r\n      this.numFilesInProgress! -= 1;\r\n    }\r\n\r\n    // aggregate the percentages for SR to announce progress\r\n    if (!this.srProgress && this.numFilesInProgress) {\r\n      const total = this.numFilesInProgress; // if we don't reassign this number changes when a file is done and the percentage becomes wrong\r\n      this.srProgress = setInterval(() => {\r\n        const aggregate = this.fileList.reduce((avg, item) => (item.progress ? avg + item.progress : avg), 0);\r\n        this.announce(\r\n          intl.formatMessage(\r\n            {\r\n              id: \"uploader.uploadProgress\",\r\n              defaultMessage: \"Upload progress: {percentage}%\",\r\n            },\r\n            { percentage: Math.floor(aggregate / total) }\r\n          )\r\n        );\r\n      }, 5000);\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmFileClearErrorClicked\")\r\n  handleFileErrorCleared(ev: CustomEvent) {\r\n    const filename = ev.detail.name;\r\n    this.errorList = this.errorList.filter((error) => error.name != filename);\r\n    this.uploadButtonEl.focus();\r\n  }\r\n\r\n  @Listen(\"wmIntFileDeleted\")\r\n  handleFileDeleted(ev: CustomEvent) {\r\n    this.clearErrors();\r\n    forceUpdate(this.el); // for the button to stop being disabled if num files become < max-files\r\n    this.wmUploaderDeleteFile.emit(ev.detail);\r\n    this.wmFileDelete.emit(ev.detail);\r\n    this.wmDeleteFile.emit(ev.detail); // deprecated\r\n  }\r\n\r\n  @Listen(\"wmIntFilePreviewed\")\r\n  handleFilePreviewed(ev: CustomEvent) {\r\n    this.clearErrors();\r\n    this.wmUploaderPreviewFile.emit(ev.detail);\r\n    this.wmFilePreview.emit(ev.detail);\r\n  }\r\n\r\n  @Listen(\"wmIntFileDownloaded\")\r\n  handleFileDownloaded(ev: CustomEvent) {\r\n    this.clearErrors();\r\n    this.wmUploaderDownloadFile.emit(ev.detail);\r\n    this.wmFileDownload.emit(ev.detail);\r\n    this.wmDownloadFile.emit(ev.detail); // deprecated\r\n  }\r\n\r\n  @Watch(\"files\")\r\n  parseFiles() {\r\n    if (!!this.files) {\r\n      if (typeof this.files === \"string\") {\r\n        let list = JSON.parse(this.files);\r\n        if (typeof list === \"object\") {\r\n          // if size is in byte format, convert to display format\r\n          list.forEach((item: any) => {\r\n            if (item.size && (typeof item.size === \"number\" || item.size.match(/^[0-9]+$/))) {\r\n              const convertedSize = this.convertBytes(item.size);\r\n              item.size = `${convertedSize.size.toFixed(0)} ${convertedSize.unit}`;\r\n            }\r\n          });\r\n          this.fileList = list;\r\n        } else {\r\n          throw new Error(\"could not parse string passed to files attribute\");\r\n        }\r\n      } else {\r\n        throw new Error(\"Attribute 'files' should be a string\");\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch(\"fileList\")\r\n  focusAfterRemoval(newFiles: UploadedFile[], oldFiles: UploadedFile[]) {\r\n    if (this.isTabbing && newFiles.length < oldFiles.length) {\r\n      const newFileIds = newFiles.map((file: UploadedFile) => file.id);\r\n      const oldFileIds = oldFiles.map((file: UploadedFile) => file.id);\r\n      // even in the case that multiple files have been removed at once, work off of the first in that group\r\n      const removedFileId = oldFileIds.filter((id: string) => !newFileIds.includes(id))[0];\r\n\r\n      if (oldFileIds.indexOf(removedFileId) > 0) {\r\n        const fileIdPrecedingRemoved = oldFileIds[oldFileIds.indexOf(removedFileId) - 1];\r\n        const fileElPrecedingRemoved = this.el.shadowRoot!.querySelector(\"#file-\" + fileIdPrecedingRemoved);\r\n        const focusedElementsButtons = fileElPrecedingRemoved?.shadowRoot!.querySelectorAll(\"wm-button\");\r\n\r\n        if (focusedElementsButtons && focusedElementsButtons.length > 0) {\r\n          const lastButtonInFile = focusedElementsButtons[focusedElementsButtons.length - 1];\r\n          lastButtonInFile.focus();\r\n        } else {\r\n          // if preceding file has no file action buttons, rerun function with adjusted params\r\n          // by removing the fileElPrecedingRemoved from the newFiles list, it is now considered the removedFile and looks to focus it's preceding file\r\n          // if it continues to cannot find an appropriate preceding file and becomes the first file in the list, it focuses the upload button\r\n          this.focusAfterRemoval(\r\n            newFiles.filter((file: UploadedFile) => file.id !== fileIdPrecedingRemoved),\r\n            oldFiles\r\n          );\r\n        }\r\n      } else {\r\n        this.uploadButtonEl.focus();\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch(\"rejectedFiles\")\r\n  parseRejectedFiles() {\r\n    if (!!this.rejectedFiles) {\r\n      if (typeof this.files === \"string\") {\r\n        const list = JSON.parse(this.rejectedFiles);\r\n        if (typeof list === \"object\") {\r\n          this.errorList = list;\r\n        } else {\r\n          throw new Error(\"could not parse string passed to errors attribute\");\r\n        }\r\n      } else {\r\n        throw new Error(\"Attribute 'rejected-files' should be a string\");\r\n      }\r\n    }\r\n  }\r\n\r\n  @Watch(\"numFilesInProgress\")\r\n  uploadNotifications(newNum: number, oldNum: number) {\r\n    if (oldNum > 0 && newNum === 0) {\r\n      setTimeout(() => {\r\n        this.notif = \"\";\r\n        this.internalErrorMessage = \"\";\r\n      }, 20 * 1000);\r\n      const finishedMessage = intl.formatMessage({\r\n        id: \"uploader.finishedUploading\",\r\n        defaultMessage: \"Finished uploading\",\r\n      });\r\n      this.notif = finishedMessage;\r\n      this.announce(finishedMessage);\r\n      this.numFilesInProgress = null;\r\n      clearInterval(this.srProgress);\r\n      forceUpdate(this.el);\r\n    } else if (newNum > 0 && newNum != oldNum) {\r\n      const filesUploadingMessage = intl.formatMessage(\r\n        {\r\n          id: \"uploader.filesUploading\",\r\n          defaultMessage: \"{num, plural, one {1 file uploading} other {# files uploading}}\",\r\n        },\r\n        { num: newNum }\r\n      );\r\n      this.notif = filesUploadingMessage;\r\n      this.announce(filesUploadingMessage);\r\n      forceUpdate(this.el);\r\n    }\r\n  }\r\n\r\n  @Watch(\"errorMessage\")\r\n  handleErrorMessageChange() {\r\n    if (this.errorMessage) {\r\n      this.announce(this.errorMessage);\r\n    }\r\n  }\r\n\r\n  isValidSize(size: number) {\r\n    return this.convertBytes(size, \"MB\").size <= this.effectiveMaxSize;\r\n  }\r\n\r\n  convertBytes(bytes: number, unit?: \"KB\" | \"MB\" | \"GB\" | \"TB\") {\r\n    // https://stackoverflow.com/questions/2365100/converting-bytes-to-megabytes\r\n    const unitOrder = [\"bytes\", \"KB\", \"MB\", \"GB\", \"TB\"];\r\n    let unitIndex = 0;\r\n    let result = typeof bytes === \"number\" ? bytes : parseInt(bytes);\r\n\r\n    if (unit) {\r\n      // convert until result matches desired unit\r\n      while (unitOrder.indexOf(unit) > unitIndex) {\r\n        result /= 1024;\r\n        unitIndex++;\r\n      }\r\n    } else {\r\n      // convert until result is appropriate unit (value is under 1000)\r\n      while (result > 1000) {\r\n        result /= 1024;\r\n        unitIndex++;\r\n      }\r\n    }\r\n    return { size: result, unit: unitOrder[unitIndex] };\r\n  }\r\n\r\n  isDuplicate(name: string) {\r\n    const hasDuplicateUploadingFile = this.filesToUpload.some((fileToUpload: File) => fileToUpload.name === name);\r\n    const hasDuplicateUploadedFile = this.fileList.some((f) => {\r\n      const filename: string = f.type ? f.name + \".\" + f.type : f.name;\r\n      return filename === name;\r\n    });\r\n\r\n    return hasDuplicateUploadingFile || hasDuplicateUploadedFile;\r\n  }\r\n\r\n  isEmpty() {\r\n    return !this.fileList.length && !this.errorList.length;\r\n  }\r\n\r\n  get isDisabled() {\r\n    // disable if is the uploader is maxed out or if something is uploading\r\n    return this.fileLimitReached || this.numFilesInProgress! > 0;\r\n  }\r\n\r\n  isItemUploading(item: UploadedFile) {\r\n    return item.hasOwnProperty(\"progress\") && item.progress! < 100;\r\n  }\r\n\r\n  announce(message: string) {\r\n    if (this.liveRegion.textContent === message) {\r\n      message += \"\\u00A0\";\r\n    }\r\n    this.announcement = message;\r\n  }\r\n\r\n  clearErrors() {\r\n    this.errorList = [];\r\n    this.notif = \"\";\r\n    this.internalErrorMessage = \"\";\r\n  }\r\n\r\n  handleFiles(ev: Event) {\r\n    this.filesToUpload = [];\r\n    const validTypes = this.fileTypes.split(\" \").join(\", \");\r\n    const files = Array.from((ev.target! as HTMLInputElement).files!);\r\n\r\n    if (!!this.maxFiles && this.fileList.length + files.length > this.maxFiles) {\r\n      this.internalErrorMessage = this.fileLimitExceededMessage;\r\n      this.announce(this.fileLimitExceededMessage);\r\n    } else {\r\n      files &&\r\n        files.map((file) => {\r\n          if (!hasValidType(file, this.fileTypes)) {\r\n            const error = {\r\n              name: file.name,\r\n              message: intl.formatMessage(\r\n                {\r\n                  id: \"uploader.invalidFileType\",\r\n                  defaultMessage: \"The file type is invalid. Accepted types: {validTypes}\",\r\n                },\r\n                { validTypes }\r\n              ),\r\n            };\r\n            this.errorList.push(error);\r\n          } else if (file.size === 0) {\r\n            const error = {\r\n              name: file.name,\r\n              message: intl.formatMessage({\r\n                id: \"uploader.zeroFileSize\",\r\n                defaultMessage: \"The file must be more than 0 bytes\",\r\n                description: \"Error message when user attempts to upload a file of no size\",\r\n              }),\r\n            };\r\n            this.errorList.push(error);\r\n          } else if (!this.isValidSize(file.size)) {\r\n            const error = {\r\n              name: file.name,\r\n              message: intl.formatMessage(\r\n                {\r\n                  id: \"uploader.fileTooLarge\",\r\n                  defaultMessage: \"The selected file is too large. Maximum file size is {size}Mb\",\r\n                },\r\n                { size: this.effectiveMaxSize }\r\n              ),\r\n            };\r\n            this.errorList.push(error);\r\n          } else if (this.isDuplicate(file.name)) {\r\n            const error = {\r\n              name: file.name,\r\n              message: intl.formatMessage({\r\n                id: \"uploader.duplicateName\",\r\n                defaultMessage: \"A file with this name already exists.\",\r\n              }),\r\n            };\r\n            this.errorList.push(error);\r\n          } else {\r\n            this.filesToUpload.push(file);\r\n          }\r\n        });\r\n\r\n      if (this.filesToUpload.length > 0) {\r\n        this.numFilesInProgress = this.filesToUpload.length;\r\n        this.wmUploaderFilesSelected.emit(this.filesToUpload);\r\n        this.wmFilesSelected.emit(this.filesToUpload); // deprecated\r\n      }\r\n    }\r\n    (ev.target! as HTMLInputElement).value = \"\"; // reset to ensure that onChange is triggered when the same file is selected a second time\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.buttonText) {\r\n      throw new Error(\"wm-uploader: button-text is a required prop\");\r\n    }\r\n\r\n    if (this.type) {\r\n      console.warn(\"wm-uploader: type has been deprecated as of v3.1.0. Please use uploader-type instead.\");\r\n    }\r\n\r\n    if (this.tempUploaderType === \"1\" && !this.emptyStateText) {\r\n      throw new Error(\"wm-uploader: empty-state-text is a required prop\");\r\n    }\r\n\r\n    this.parseFiles();\r\n    this.clearErrors();\r\n    this.parseRejectedFiles();\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  uploadButtonOnClick(ev: Event) {\r\n    if (this.isDisabled) {\r\n      // this is a temporary fix.\r\n      // we need the disabled button to be programmatically focusable\r\n      // to allow return focus after closing the browser file panel\r\n      // since it's focusable the button should respond when activated\r\n      // it looks disabled, and announces the reason why the action cannot\r\n      // be taken when activated.\r\n      ev.preventDefault();\r\n\r\n      if (this.numFilesInProgress! > 0) {\r\n        const srMsg = intl.formatMessage({\r\n          id: \"uploader.waitToUpload\",\r\n          defaultMessage: \"Please wait for current upload to complete before uploading new files.\",\r\n          description: \"Message for screen reader users\",\r\n        });\r\n        this.announce(srMsg);\r\n      } else if (this.fileLimitReached) {\r\n        this.internalErrorMessage = this.fileLimitReachedMessage;\r\n        this.announce(this.fileLimitReachedMessage);\r\n      }\r\n    } else {\r\n      this.clearErrors();\r\n    }\r\n  }\r\n\r\n  renderUploadSvg() {\r\n    return (\r\n      <svg class=\"upload-file\" width=\"91\" height=\"84\" viewBox=\"0 0 91 84\">\r\n        <path\r\n          transform=\"rotate(-180.000000) translate(-452, -255.5)\"\r\n          fill=\"#eae8ec\"\r\n          d=\"M361,249.681818 L361,197.318182 C361,194.118182 365.555061,191.5 371.122358,191.5 L391.316463,191.5 L391.286495,200.562515 L369.871211,200.600292 L369.885404,200.622146 L369.886423,246.655947 L443.657038,246.840767 L443.657038,200.622146 L421.683537,200.622146 L421.683537,191.5 L441.978865,191.5 C447.546162,191.5 452,194.118182 452,197.318182 L452,249.681818 C452,252.881818 447.546162,255.5 441.978865,255.5 L371.122358,255.5 C365.504449,255.5 361,252.881818 361,249.681818 Z M391.5,207 L406,221 L420.5,207 L409.625,207 L409.625,172 L402.375,172 L402.375,207 L391.5,207 Z\"\r\n        ></path>\r\n      </svg>\r\n    );\r\n  }\r\n\r\n  renderIcon() {\r\n    // mdi attachment icon (paper clip) is horizontal but we want it vertical\r\n    const rotate = this.icon && this.icon === \"f066\";\r\n    return (\r\n      this.icon && (\r\n        <span class={`mdi ${rotate ? \"rotate\" : \"\"}`}>{String.fromCodePoint(parseInt(`0x${this.icon}`))}</span>\r\n      )\r\n    );\r\n  }\r\n\r\n  renderInfo() {\r\n    return this.info && this.tempUploaderType === \"2\" ? <span class=\"info\">{this.info}</span> : \"\";\r\n  }\r\n\r\n  renderNotif() {\r\n    return <div class=\"notif\">{this.notif}</div>;\r\n  }\r\n\r\n  renderError() {\r\n    return <div id=\"error\">{this.displayedErrorMessage}</div>;\r\n  }\r\n\r\n  renderUploadButton(classes: string) {\r\n    let accessibleLabel = `${this.label && this.label !== this.buttonText ? `${this.label}, ` : \"\"}${this.buttonText}`;\r\n\r\n    return (\r\n      <div class=\"info-wrapper\">\r\n        <input\r\n          name={this.inputId}\r\n          id={this.inputId}\r\n          class=\"sr-only\"\r\n          aria-label={accessibleLabel}\r\n          aria-required={this.requiredField ? \"true\" : null}\r\n          aria-describedby={`${this.displayedErrorMessage ? \"error \" : \"\"}file-count max-size accepted-types`}\r\n          type=\"file\"\r\n          multiple\r\n          onClick={(ev) => this.uploadButtonOnClick(ev)}\r\n          onChange={(ev) => this.handleFiles(ev)}\r\n        />\r\n        <label htmlFor={this.inputId} class={`wm-button ${classes}${this.isTabbing ? \" user-is-tabbing\" : \"\"}`}>\r\n          {this.renderIcon()}\r\n          {this.buttonText}\r\n        </label>\r\n        {this.renderInfo()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderEmptyState() {\r\n    return (\r\n      <div class=\"empty-block\">\r\n        {this.renderUploadSvg()}\r\n        <div class={`empty-message`}>{this.emptyStateText}</div>\r\n        {this.renderUploadButton(\"-primary empty-button\")}\r\n        {this.notif && this.renderNotif()}\r\n        {this.displayedErrorMessage && this.renderError()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderErrorList() {\r\n    let srMessage = this.errorList.reduce(function (acc, err) {\r\n      return acc + `${err.name}: ${err.message} `;\r\n    }, \"\");\r\n    this.announce(srMessage);\r\n\r\n    return (\r\n      <ul class=\"error-list\">\r\n        {this.errorList.map((err) => (\r\n          <wm-file file={`{\"name\": \"${err.name}\"}`} error-message={err.message}></wm-file>\r\n        ))}\r\n      </ul>\r\n    );\r\n  }\r\n\r\n  formatTimestamp(timestamp: string): string {\r\n    const uploadDate = new Date(Date.parse(timestamp));\r\n    const day = uploadDate.getDate();\r\n    const month = uploadDate.getMonth() + 1;\r\n    const year = uploadDate.getFullYear();\r\n    const time = uploadDate.toLocaleTimeString(\"en-us\", { hour: \"numeric\", minute: \"2-digit\" });\r\n    const formattedDate = `${month}/${day}/${year} ${time}`;\r\n\r\n    return formattedDate;\r\n  }\r\n\r\n  renderInProgressFileList() {\r\n    return (\r\n      <ul class=\"inprogress-list\">\r\n        {this.fileList\r\n          .filter((item) => this.isItemUploading(item))\r\n          .map((item) => (\r\n            <wm-file file={JSON.stringify(item)} show-info={this.showInfo}></wm-file>\r\n          ))}\r\n      </ul>\r\n    );\r\n  }\r\n\r\n  renderUploadedFileList() {\r\n    return (\r\n      <ul class=\"file-list\">\r\n        {this.fileList\r\n          .filter((item) => !this.isItemUploading(item))\r\n          .map((item) => {\r\n            item.lastUpdated = this.formatTimestamp(item.lastUpdated);\r\n            return <wm-file id={`file-${item.id}`} file={JSON.stringify(item)} show-info={this.showInfo}></wm-file>;\r\n          })}\r\n      </ul>\r\n    );\r\n  }\r\n\r\n  renderFiles() {\r\n    // if we switch to accepting display format for the wm-uploader's file lastUpdateds, sorting by date will become impossible\r\n    this.sortBy === \"name\"\r\n      ? this.fileList.sort((a, b) => a.name.localeCompare(b.name))\r\n      : this.fileList.sort((a, b) => Date.parse(a.lastUpdated) - Date.parse(b.lastUpdated));\r\n    return (\r\n      <div>\r\n        {this.renderInProgressFileList()}\r\n        {this.renderUploadedFileList()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  legacyRenderHeader() {\r\n    return (\r\n      <div class={`header ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\r\n        <div class=\"slot-wrapper\">\r\n          <slot />\r\n          <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\r\n            {this.renderUploadButton(`-secondary ${this.isDisabled ? \"disabled\" : \"\"}`)}\r\n            {this.notif && this.renderNotif()}\r\n            {this.displayedErrorMessage && this.renderError()}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderHeader() {\r\n    return (\r\n      <div class={`header ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\r\n        <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\r\n          {this.renderUploadButton(`-secondary ${this.isDisabled ? \"disabled\" : \"\"}`)}\r\n          {this.renderRequirements()}\r\n        </div>\r\n        <div id=\"accepted-types\" class=\"accepted-types\">\r\n          {this.acceptedFileTypesMessage}\r\n        </div>\r\n        {this.notif && this.renderNotif()}\r\n        {this.displayedErrorMessage && this.renderError()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderRequirements() {\r\n    return (\r\n      <div class=\"requirements\">\r\n        {this.maxFiles && <span id=\"file-count\">{this.fileCountMessage}</span>}\r\n        {this.maxSize && <span id=\"max-size\">{this.maxSizeMessage}</span>}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderFooter() {\r\n    return (\r\n      <div class=\"footer\">\r\n        <div class={`notif-wrapper ${this.tempUploaderType ? `type${this.tempUploaderType}` : \"\"}`}>\r\n          <div class=\"filecount-wrapper\">\r\n            <div class=\"filecount\">\r\n              {intl.formatMessage(\r\n                {\r\n                  id: \"uploader.filesAdded\",\r\n                  defaultMessage: \"{numFiles, plural, one {1 file added} other {# files added}}\",\r\n                },\r\n                { numFiles: this.fileList.length }\r\n              )}\r\n            </div>\r\n            {this.renderUploadButton(`-primary ${this.isDisabled ? \"disabled\" : \"\"}`)}\r\n          </div>\r\n          {this.notif && this.renderNotif()}\r\n          {this.displayedErrorMessage && this.renderError()}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderWithItems() {\r\n    // it's possible progress is passed in as a string, so we need to check for \"100\" as well\r\n    const hasNewlyUploadedFiles =\r\n      this.fileList.filter((file) => file.progress === (typeof file.progress === \"number\" ? 100 : \"100\")).length > 0;\r\n    return (\r\n      <div>\r\n        {!this.tempUploaderType && this.renderHeader()}\r\n        {this.tempUploaderType === \"2\" && this.legacyRenderHeader()}\r\n        <div\r\n          class={`list-container type${this.tempUploaderType} ${\r\n            !this.tempUploaderType && hasNewlyUploadedFiles ? \"checkmark-spacer\" : \"\"\r\n          }`}\r\n        >\r\n          {this.errorList.length > 0 && this.renderErrorList()}\r\n          {this.fileList.length > 0 && this.renderFiles()}\r\n        </div>\r\n        {this.tempUploaderType === \"1\" && this.renderFooter()}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderLabel() {\r\n    return (\r\n      <div class={`wrapper ${this.displayedErrorMessage ? \"invalid\" : \"\"}`}>\r\n        <div id=\"label\" class={`label`}>\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        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.label && this.renderLabel()}\r\n        {this.isEmpty() && this.tempUploaderType === \"1\" ? this.renderEmptyState() : this.renderWithItems()}\r\n        <div\r\n          ref={(el) => (this.liveRegion = el as HTMLDivElement)}\r\n          class=\"live-region sr-only\"\r\n          aria-live=\"assertive\" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title\r\n          aria-atomic=\"true\"\r\n        >\r\n          {this.announcement}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-e5f84104.system.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["wmProgressIndicatorCss","ProgressIndicator","exports","this","uid","generateId","slicesDetails","barLabelsWidth","el","parentElement","Object","defineProperty","class_1","prototype","shadowRoot","querySelector","Array","from","querySelectorAll","mode","allChartsDetails","undefined","text","concat","label","subinfo","intl","formatMessage","id","defaultMessage","description","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKeydown","ev","handleChartKeydown","call","componentWillLoad","_this","console","error","children","length","warn","addEventListener","detail","handleSliceUpdate","getDetails","_a","sent","forceUpdate","handleModeUpdate","renderBarOrDoughnut","total","renderStackedBar","renderDoughnut","render","h","Host","onBlur","exitChart","ref","componentWrapperEl","class","userIsNavigating","role","ariaLabelText","tabindex","chartRoleDescription","style","htmlFor","renderLegend","renderCompletionMessage","renderInstructionsText","wmProgressMonitorCss","ProgressMonitor","doughnutWidth","modeInitialized","debouncedUpdate","debounce","class_2","asNumber","parseToNum","breakpoint","asPixels","clientWidth","parsedBreakpoint","resizeObserver","ResizeObserver","observe","componentDidLoad","wmProgressMonitorModeChange","emit","componentWillUpdate","prevMode","num","asString","toString","withoutPx","replace","parseInt","keys","csvToArray","groupLegend","colors","bar","map","key","idx","legendItem","color","renderLegendItem","ProgressSlice","class_3","componentDidUpdate","wmProgressSliceUpdated"],"sources":["src/components/charts/wm-progress-monitor/wm-progress-indicator.scss?tag=wm-progress-indicator&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-indicator.tsx","src/components/charts/wm-progress-monitor/wm-progress-monitor.scss?tag=wm-progress-monitor&encapsulation=shadow","src/components/charts/wm-progress-monitor/wm-progress-monitor.tsx","src/components/charts/wm-progress-monitor/wm-progress-slice.tsx"],"sourcesContent":[":host,\r\nwm-progress-indicator {\r\n  @extend %chart-styles;\r\n}\r\n\r\n:host(:focus) {\r\n  @extend %chart-focus-styles;\r\n}\r\n","import { Component, Element, h, Host, Prop, State, Listen, forceUpdate, Watch } from \"@stencil/core\";\r\nimport { ChartDetails } from \"../../../global/interfaces\";\r\nimport { generateId, intl } from \"../../../global/functions\";\r\nimport {\r\n  exitChart,\r\n  getDetails,\r\n  handleChartKeydown,\r\n  renderStackedBar,\r\n  renderCompletionMessage,\r\n  renderDoughnut,\r\n  renderInstructionsText,\r\n  renderLegend,\r\n  allChartsDetails,\r\n} from \"../chartFunctions\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-indicator\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-indicator.scss\",\r\n})\r\nexport class ProgressIndicator {\r\n  @Element() el!: HTMLWmProgressIndicatorElement;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in chartFunctions\r\n  private componentWrapperEl!: HTMLDivElement;\r\n\r\n  @Prop() label?: string;\r\n  @Prop() subinfo?: string;\r\n  @Prop() completionMessage?: string;\r\n  @Prop() showLegend: boolean = true;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @State() mode?: \"doughnut\" | \"bar\";\r\n  @State() userIsNavigating: boolean = false;\r\n\r\n  private uid: string = generateId();\r\n  private total!: number;\r\n  // @ts-ignore-- TS warns this is unused, but its needed in the chartFunctions\r\n  private slicesDetails: SliceDetails[] = [];\r\n  private barLabelsWidth?: string = (this.el.parentElement as HTMLWmProgressMonitorElement).barLabelsWidth;\r\n\r\n  get popoverEl() {\r\n    return this.el.shadowRoot!.querySelector(\"priv-chart-popover\");\r\n  }\r\n  get sliceEls(): (SVGElement | HTMLElement)[] | undefined {\r\n    return Array.from(this.el.shadowRoot!.querySelectorAll(\".segment\")) as HTMLElement[];\r\n  }\r\n  get chartDetails(): ChartDetails | undefined {\r\n    return this.mode ? allChartsDetails[this.mode] : undefined;\r\n  }\r\n  get ariaLabelText() {\r\n    let text = `${this.label}`;\r\n    if (this.subinfo) {\r\n      text += ` ${this.subinfo}`;\r\n    }\r\n    return text;\r\n  }\r\n\r\n  get chartRoleDescription(): string {\r\n    return intl.formatMessage({\r\n      id: \"chart.roleDescription\",\r\n      defaultMessage: \"Interactive chart\",\r\n      description: \"For screen readers only, a description clarifying the role of the chart widget\",\r\n    });\r\n  }\r\n\r\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n  toggleTabbingOn() {\r\n    this.isTabbing = true;\r\n  }\r\n\r\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n  toggleTabbingOff() {\r\n    this.isTabbing = false;\r\n  }\r\n\r\n  @Listen(\"keydown\")\r\n  handleKeydown(ev: KeyboardEvent) {\r\n    handleChartKeydown.call(this, ev);\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.label) {\r\n      console.error(\r\n        \"For accessibility purposes, you must provide a label for the chart. See https://components.watermarkinsights.com/chart for more information.\"\r\n      );\r\n    }\r\n\r\n    if (this.el.children.length !== 2) {\r\n      console.warn(\"wm-progress-indicator component must have 2 wm-progress-slice children.\");\r\n    }\r\n\r\n    // Listen to parent for initial mode, and future changes\r\n    this.el.parentElement!.addEventListener(\r\n      \"wmProgressMonitorModeChange\",\r\n      (ev) => (this.mode = (ev as CustomEvent).detail)\r\n    );\r\n  }\r\n\r\n  @Listen(\"wmProgressSliceUpdated\")\r\n  async handleSliceUpdate() {\r\n    await getDetails.call(this, this.mode!);\r\n    forceUpdate(this.el);\r\n  }\r\n\r\n  @Watch(\"mode\")\r\n  handleModeUpdate() {\r\n    if (this.mode) {\r\n      getDetails.call(this, this.mode);\r\n    }\r\n  }\r\n\r\n  renderBarOrDoughnut() {\r\n    if (this.total > 0 && this.mode === \"bar\") {\r\n      return renderStackedBar.call(this, this.mode!);\r\n    } else {\r\n      return renderDoughnut.call(this, this.mode!);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onBlur={() => exitChart.call(this)}>\r\n        <div\r\n          ref={(el) => (this.componentWrapperEl = el as HTMLDivElement)}\r\n          class={`component-wrapper ${this.mode} ${this.isTabbing && !this.userIsNavigating ? \"user-is-tabbing\" : \"\"}`}\r\n          role=\"application\"\r\n          aria-label={this.ariaLabelText}\r\n          tabindex=\"0\"\r\n          aria-roledescription={this.chartRoleDescription}\r\n          aria-describedby={`chart-instructions`}\r\n        >\r\n          <label\r\n            id={`label-${this.uid}`}\r\n            class={`label ${this.barLabelsWidth && this.mode === \"bar\" ? \"custom-width\" : \"\"}`}\r\n            style={{ \"--custom-label-width\": this.barLabelsWidth }}\r\n            htmlFor={`graphic-${this.uid}`}\r\n          >\r\n            <span class=\"label-text\">{this.label}</span>\r\n            {this.subinfo ? <span class=\"subinfo\">{this.subinfo}</span> : \"\"}\r\n          </label>\r\n          {this.mode && this.renderBarOrDoughnut()}\r\n          {this.mode === \"doughnut\" ? renderLegend.call(this, this.mode) : \"\"}\r\n          <priv-chart-popover class={this.isTabbing ? \"user-is-tabbing\" : \"\"}></priv-chart-popover>\r\n          {this.mode === \"doughnut\" ? renderCompletionMessage.call(this) : \"\"}\r\n        </div>\r\n        {renderInstructionsText()}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",":host,\r\nwm-progress-monitor {\r\n  display: flex;\r\n\r\n  .legend-wrapper {\r\n    @extend %chart-legend-styles;\r\n    align-items: flex-start;\r\n    padding: 0 1.25rem;\r\n  }\r\n}\r\n\r\n:host(.row) {\r\n  flex-direction: row;\r\n}\r\n\r\n:host(.column) {\r\n  flex-direction: column;\r\n}\r\n","import { Component, h, Host, Element, Prop, Event, EventEmitter, forceUpdate } from \"@stencil/core\";\r\nimport { csvToArray, debounce } from \"../../../global/functions\";\r\nimport { renderLegendItem, allChartsDetails } from \"../chartFunctions\";\r\nimport { LegendItem } from \"../../../global/interfaces\";\r\n@Component({\r\n  tag: \"wm-progress-monitor\",\r\n  shadow: { delegatesFocus: true },\r\n  styleUrl: \"wm-progress-monitor.scss\",\r\n})\r\nexport class ProgressMonitor {\r\n  @Element() el!: HTMLWmProgressMonitorElement;\r\n  @Prop() breakpoint?: number | string;\r\n  @Prop() groupLegend?: string;\r\n  @Prop() barLabelsWidth?: string;\r\n  @Event() wmProgressMonitorModeChange!: EventEmitter;\r\n  private doughnutWidth = 300;\r\n  private prevMode?: string;\r\n  private modeInitialized: boolean = false;\r\n\r\n  get parsedBreakpoint() {\r\n    const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);\r\n    // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value\r\n    // e.g. 4 -> 1200px, while 768 -> 768 px\r\n    const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;\r\n    return asPixels;\r\n  }\r\n\r\n  get mode(): \"doughnut\" | \"bar\" {\r\n    return this.el.clientWidth > this.parsedBreakpoint ? \"doughnut\" : \"bar\";\r\n  }\r\n\r\n  componentWillLoad() {\r\n    // rerender on resize in case layout needs to change\r\n    const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\r\n    resizeObserver.observe(this.el);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // emit initial mode for Indicators, must happen post-load as this.el measurement is needed\r\n    this.wmProgressMonitorModeChange.emit(this.mode);\r\n    this.modeInitialized = true;\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    // store prevMode before every render except first to determine when it has changed\r\n    if (this.prevMode !== this.mode) {\r\n      this.wmProgressMonitorModeChange.emit(this.mode);\r\n    }\r\n    this.prevMode = this.mode;\r\n  }\r\n\r\n  debouncedUpdate = debounce(() => forceUpdate(this.el), 50);\r\n\r\n  parseToNum(num: string | number): number {\r\n    const asString = num.toString();\r\n    const withoutPx = asString.replace(\"px\", \"\");\r\n    return parseInt(withoutPx);\r\n  }\r\n\r\n  renderLegend() {\r\n    const keys = csvToArray(this.groupLegend!);\r\n    const colors = allChartsDetails.bar.colors;\r\n\r\n    return (\r\n      <div class=\"legend-wrapper\">\r\n        <div class=\"legend\">\r\n          {keys.map((key, idx) => {\r\n            const legendItem: LegendItem = { key: key, color: colors[idx] };\r\n            return renderLegendItem(legendItem);\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={this.mode === \"doughnut\" ? \"row\" : \"column\"}>\r\n        {/* don't render Indicators until mode is determined otherwise content flashes*/}\r\n        {this.modeInitialized && this.groupLegend && this.mode === \"bar\" && this.renderLegend()}\r\n        {this.modeInitialized && <slot />}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n","import { Component, Prop, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-progress-slice\",\r\n  shadow: true,\r\n})\r\nexport class ProgressSlice {\r\n  @Prop() legend?: string;\r\n  @Prop() amount?: string;\r\n  @Prop() popoverTitle?: string;\r\n  @Prop() popoverText?: string;\r\n  @Prop() popoverButtonText?: string;\r\n\r\n  @Event() wmProgressSliceUpdated!: EventEmitter<void>;\r\n  componentDidUpdate() {\r\n    this.wmProgressSliceUpdated.emit();\r\n  }\r\n}\r\n"],"mappings":"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"}

package/dist/ripple/p-e6e7cb2d.entry.js.map

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