@watermarkinsights/ripple 3.24.0 → 3.24.1

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

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

@@ -1 +1 @@
-{"version":3,"names":["wmModalFooterCss","ModalFooter","prototype","componentWillLoad","_this","this","uid","el","parentElement","addEventListener","lastElement","focus","emitParentPrimaryEvent","parentModal","emitPrimaryEvent","emitParentSecondaryEvent","emitSecondaryEvent","render","h","class","concat","infoText","secondaryText","onClick","id","ref","primaryActionDisabled","deleteStyle","disabled","primaryText"],"sources":["src/components/wm-modal/wm-modal-footer.scss?tag=wm-modal-footer","src/components/wm-modal/wm-modal-footer.tsx"],"sourcesContent":["wm-modal-footer {\n  @include border-radius(0px 0px 5px 5px);\n  //Fix for Chrome sometimes leaving space between footer and content, making the overlay show through\n  margin-top: -1px;\n\n  .wm-wrapper {\n    @include displayFlex();\n    @include justifyContent(space-between);\n    @include alignItems(center);\n\n    &.footer-text {\n      @media only screen and (max-width: 650px) {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n    }\n\n    wm-button + wm-button {\n      margin-left: rem-calc(16);\n      // @media only screen and (max-width: 768px) {\n      //   margin-right: 15px;\n      // }\n    }\n\n    .wm-info {\n      font-size: rem-calc(14);\n      font-style: italic;\n      @media only screen and (max-width: 650px) {\n        padding-bottom: rem-calc(10);\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n}\n","import { h, Component, Element, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-modal-footer\",\n  styleUrl: \"wm-modal-footer.scss\",\n})\nexport class ModalFooter {\n  @Element() el!: HTMLElement;\n\n  @Prop() secondaryText?: string = \"\";\n  @Prop() primaryText?: string = \"\";\n  @Prop() infoText?: string = \"\";\n  @Prop() primaryActionDisabled: boolean = false;\n  @Prop() deleteStyle: boolean = false;\n  private uid!: string;\n  private lastElement!: HTMLElement;\n\n  componentWillLoad() {\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\n\n    // Trap focus when user shift+tabs past first element in modal\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\n    // if we listen to the whole doc each modal on the page reacts to every event\n    this.el.parentElement!.addEventListener(\"focusLastElement\", () => {\n      this.lastElement.focus();\n    });\n  }\n\n  emitParentPrimaryEvent() {\n    const parentModal = this.el.parentElement;\n    //@ts-ignore\n    parentModal.emitPrimaryEvent();\n  }\n\n  emitParentSecondaryEvent() {\n    const parentModal = this.el.parentElement;\n    //@ts-ignore\n    parentModal.emitSecondaryEvent();\n  }\n\n  render() {\n    return (\n      <div class={`wm-wrapper ${this.infoText ? \" footer-text\" : \"\"}`}>\n        <div class=\"wm-info\" aria-live=\"polite\">{this.infoText}</div>\n        <div class=\"wm-button-collection\">\n          {this.secondaryText && (\n            <wm-button\n              onClick={() => this.emitParentSecondaryEvent()}\n              id={`wm-secondary-${this.uid}`}\n              ref={(el) => (this.primaryActionDisabled ? (this.lastElement = el as HTMLElement) : null)}\n            >\n              {this.secondaryText}\n            </wm-button>\n          )}\n          <wm-button\n            button-type={this.deleteStyle ? \"secondary\" : \"primary\"}\n            permanently-delete={this.deleteStyle}\n            onClick={() => this.emitParentPrimaryEvent()}\n            disabled={this.primaryActionDisabled}\n            id={`wm-primary-${this.uid}`}\n            ref={(el) => (!this.primaryActionDisabled ? (this.lastElement = el as HTMLElement) : null)}\n          >\n            {this.primaryText}\n          </wm-button>\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"yEAAA,IAAMA,iBAAmB,47B,ICMZC,YAAW,W,0DAGW,G,iBACF,G,cACH,G,2BACa,M,iBACV,K,CAI/BA,EAAAC,UAAAC,kBAAA,eAAAC,EAAAC,KACEA,KAAKC,IAAOD,KAAKE,GAAGC,cAAqCF,IAKzDD,KAAKE,GAAGC,cAAeC,iBAAiB,oBAAoB,WAC1DL,EAAKM,YAAYC,O,KAIrBV,EAAAC,UAAAU,uBAAA,WACE,IAAMC,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYC,kB,EAGdb,EAAAC,UAAAa,yBAAA,WACE,IAAMF,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYG,oB,EAGdf,EAAAC,UAAAe,OAAA,eAAAb,EAAAC,KACE,OACEa,EAAA,OAAKC,MAAO,cAAAC,OAAcf,KAAKgB,SAAW,eAAiB,KACzDH,EAAA,OAAKC,MAAM,UAAS,YAAW,UAAUd,KAAKgB,UAC9CH,EAAA,OAAKC,MAAM,wBACRd,KAAKiB,eACJJ,EAAA,aACEK,QAAS,WAAM,OAAAnB,EAAKW,0BAAL,EACfS,GAAI,gBAAAJ,OAAgBf,KAAKC,KACzBmB,IAAK,SAAClB,GAAE,OAAMH,EAAKsB,sBAAyBtB,EAAKM,YAAcH,EAAqB,IAA5E,GAEPF,KAAKiB,eAGVJ,EAAA,2BACeb,KAAKsB,YAAc,YAAc,UAAS,qBACnCtB,KAAKsB,YACzBJ,QAAS,WAAM,OAAAnB,EAAKQ,wBAAL,EACfgB,SAAUvB,KAAKqB,sBACfF,GAAI,cAAAJ,OAAcf,KAAKC,KACvBmB,IAAK,SAAClB,GAAE,OAAOH,EAAKsB,sBAAyBtB,EAAKM,YAAcH,EAAqB,IAA7E,GAEPF,KAAKwB,c,gIAxDM,G"}
+{"version":3,"names":["wmModalFooterCss","ModalFooter","prototype","componentWillLoad","_this","this","uid","el","parentElement","addEventListener","lastElement","focus","emitParentPrimaryEvent","parentModal","emitPrimaryEvent","emitParentSecondaryEvent","emitSecondaryEvent","render","h","class","concat","infoText","secondaryText","onClick","id","ref","primaryActionDisabled","deleteStyle","disabled","primaryText"],"sources":["src/components/wm-modal/wm-modal-footer.scss?tag=wm-modal-footer","src/components/wm-modal/wm-modal-footer.tsx"],"sourcesContent":["wm-modal-footer {\r\n  @include border-radius(0px 0px 5px 5px);\r\n  //Fix for Chrome sometimes leaving space between footer and content, making the overlay show through\r\n  margin-top: -1px;\r\n\r\n  .wm-wrapper {\r\n    @include displayFlex();\r\n    @include justifyContent(space-between);\r\n    @include alignItems(center);\r\n\r\n    &.footer-text {\r\n      @media only screen and (max-width: 650px) {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n      }\r\n    }\r\n\r\n    wm-button + wm-button {\r\n      margin-left: rem-calc(16);\r\n      // @media only screen and (max-width: 768px) {\r\n      //   margin-right: 15px;\r\n      // }\r\n    }\r\n\r\n    .wm-info {\r\n      font-size: rem-calc(14);\r\n      font-style: italic;\r\n      @media only screen and (max-width: 650px) {\r\n        padding-bottom: rem-calc(10);\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-modal-footer\",\r\n  styleUrl: \"wm-modal-footer.scss\",\r\n})\r\nexport class ModalFooter {\r\n  @Element() el!: HTMLElement;\r\n\r\n  @Prop() secondaryText?: string = \"\";\r\n  @Prop() primaryText?: string = \"\";\r\n  @Prop() infoText?: string = \"\";\r\n  @Prop() primaryActionDisabled: boolean = false;\r\n  @Prop() deleteStyle: boolean = false;\r\n  private uid!: string;\r\n  private lastElement!: HTMLElement;\r\n\r\n  componentWillLoad() {\r\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\r\n\r\n    // Trap focus when user shift+tabs past first element in modal\r\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\r\n    // if we listen to the whole doc each modal on the page reacts to every event\r\n    this.el.parentElement!.addEventListener(\"focusLastElement\", () => {\r\n      this.lastElement.focus();\r\n    });\r\n  }\r\n\r\n  emitParentPrimaryEvent() {\r\n    const parentModal = this.el.parentElement;\r\n    //@ts-ignore\r\n    parentModal.emitPrimaryEvent();\r\n  }\r\n\r\n  emitParentSecondaryEvent() {\r\n    const parentModal = this.el.parentElement;\r\n    //@ts-ignore\r\n    parentModal.emitSecondaryEvent();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`wm-wrapper ${this.infoText ? \" footer-text\" : \"\"}`}>\r\n        <div class=\"wm-info\" aria-live=\"polite\">{this.infoText}</div>\r\n        <div class=\"wm-button-collection\">\r\n          {this.secondaryText && (\r\n            <wm-button\r\n              onClick={() => this.emitParentSecondaryEvent()}\r\n              id={`wm-secondary-${this.uid}`}\r\n              ref={(el) => (this.primaryActionDisabled ? (this.lastElement = el as HTMLElement) : null)}\r\n            >\r\n              {this.secondaryText}\r\n            </wm-button>\r\n          )}\r\n          <wm-button\r\n            button-type={this.deleteStyle ? \"secondary\" : \"primary\"}\r\n            permanently-delete={this.deleteStyle}\r\n            onClick={() => this.emitParentPrimaryEvent()}\r\n            disabled={this.primaryActionDisabled}\r\n            id={`wm-primary-${this.uid}`}\r\n            ref={(el) => (!this.primaryActionDisabled ? (this.lastElement = el as HTMLElement) : null)}\r\n          >\r\n            {this.primaryText}\r\n          </wm-button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"yEAAA,IAAMA,iBAAmB,47B,ICMZC,YAAW,W,0DAGW,G,iBACF,G,cACH,G,2BACa,M,iBACV,K,CAI/BA,EAAAC,UAAAC,kBAAA,eAAAC,EAAAC,KACEA,KAAKC,IAAOD,KAAKE,GAAGC,cAAqCF,IAKzDD,KAAKE,GAAGC,cAAeC,iBAAiB,oBAAoB,WAC1DL,EAAKM,YAAYC,O,KAIrBV,EAAAC,UAAAU,uBAAA,WACE,IAAMC,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYC,kB,EAGdb,EAAAC,UAAAa,yBAAA,WACE,IAAMF,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYG,oB,EAGdf,EAAAC,UAAAe,OAAA,eAAAb,EAAAC,KACE,OACEa,EAAA,OAAKC,MAAO,cAAAC,OAAcf,KAAKgB,SAAW,eAAiB,KACzDH,EAAA,OAAKC,MAAM,UAAS,YAAW,UAAUd,KAAKgB,UAC9CH,EAAA,OAAKC,MAAM,wBACRd,KAAKiB,eACJJ,EAAA,aACEK,QAAS,WAAM,OAAAnB,EAAKW,0BAAL,EACfS,GAAI,gBAAAJ,OAAgBf,KAAKC,KACzBmB,IAAK,SAAClB,GAAE,OAAMH,EAAKsB,sBAAyBtB,EAAKM,YAAcH,EAAqB,IAA5E,GAEPF,KAAKiB,eAGVJ,EAAA,2BACeb,KAAKsB,YAAc,YAAc,UAAS,qBACnCtB,KAAKsB,YACzBJ,QAAS,WAAM,OAAAnB,EAAKQ,wBAAL,EACfgB,SAAUvB,KAAKqB,sBACfF,GAAI,cAAAJ,OAAcf,KAAKC,KACvBmB,IAAK,SAAClB,GAAE,OAAOH,EAAKsB,sBAAyBtB,EAAKM,YAAcH,EAAqB,IAA7E,GAEPF,KAAKwB,c,gIAxDM,G"}

package/dist/esm-es5/wm-modal-header.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl}from"./functions-c58046f2.js";var wmModalHeaderCss="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";var ModalHeader=function(){function e(e){registerInstance(this,e);this.closeTooltipMessage=intl.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"wm-wrapper"},h("div",null,h("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,h("span",{class:"subtitle"},this.subheading))),h("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ModalHeader.style=wmModalHeaderCss;export{ModalHeader as wm_modal_header};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{i as intl}from"./functions-1c41e984.js";var wmModalHeaderCss="wm-modal-header{-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:#4a4a4a;line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";var ModalHeader=function(){function e(e){registerInstance(this,e);this.closeTooltipMessage=intl.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.heading="";this.subheading=""}e.prototype.componentWillLoad=function(){var e=this;this.uid=this.el.parentElement.uid;this.el.parentElement.addEventListener("focusFirstElement",(function(){e.closeButtonEl.focus()}))};e.prototype.emitParentCloseEvent=function(){var e=this.el.parentElement;e.emitCloseEvent()};e.prototype.render=function(){var e=this;return h(Host,null,h("div",{class:"wm-wrapper"},h("div",null,h("h2",{class:"title",id:"wm-modal-heading-text-".concat(this.uid)},this.heading,h("span",{class:"subtitle"},this.subheading))),h("wm-button",{"button-type":"navigational",icon:"f156",tooltip:this.closeTooltipMessage,"tooltip-position":"left",id:"wm-modal-close-".concat(this.uid),ref:function(t){return e.closeButtonEl=t},onClick:function(){return e.emitParentCloseEvent()}})))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();ModalHeader.style=wmModalHeaderCss;export{ModalHeader as wm_modal_header};
 //# sourceMappingURL=wm-modal-header.entry.js.map

package/dist/esm-es5/wm-modal-header.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["wmModalHeaderCss","ModalHeader","this","closeTooltipMessage","intl","formatMessage","id","defaultMessage","description","prototype","componentWillLoad","_this","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","concat","heading","subheading","icon","tooltip","ref","onClick"],"sources":["src/components/wm-modal/wm-modal-header.scss?tag=wm-modal-header","src/components/wm-modal/wm-modal-header.tsx"],"sourcesContent":["wm-modal-header {\n  @include border-radius(5px 5px 0 0px);\n  //Fix for Chrome sometimes leaving space between header and content, making the overlay show through\n  margin-bottom: -1px;\n\n  .wm-wrapper {\n    @include displayFlex();\n    @include justifyContent(space-between);\n    @include alignItems(center);\n\n    .title {\n      margin: 0;\n      font-weight: 600;\n      font-size: rem-calc(18);\n      color: rgb(74, 74, 74);\n      line-height: normal;\n\n      .subtitle {\n        display: block;\n        font-size: rem-calc(14);\n        font-weight: normal;\n      }\n\n      &:focus {\n        outline: none;\n      }\n    }\n  }\n}\n","import { h, Component, Element, Prop, Host } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-modal-header\",\n  styleUrl: \"wm-modal-header.scss\",\n})\nexport class ModalHeader {\n  @Element() el!: HTMLElement;\n  private closeButtonEl!: HTMLElement;\n\n  @Prop() heading?: string = \"\";\n  @Prop() subheading?: string = \"\";\n  private uid!: string;\n\n  private closeTooltipMessage: string = intl.formatMessage({\n    id: \"global.closeVerb\",\n    defaultMessage: \"Close\",\n    description: \"For a button, to close a user interface element\",\n  });\n\n  componentWillLoad() {\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\n\n    // Trap focus when user tabs past last element in modal\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\n    // if we listen to the whole doc each modal on the page reacts to every event\n    this.el.parentElement!.addEventListener(\"focusFirstElement\", () => {\n      this.closeButtonEl.focus();\n    });\n  }\n\n  emitParentCloseEvent() {\n    const parentModal = this.el.parentElement;\n    //@ts-ignore\n    parentModal.emitCloseEvent();\n  }\n\n  // @Listen(\"click\")\n  // directFocusOnClick() {\n  //   this.headingElement.tabIndex = 0;\n  //   this.headingElement.focus();\n  // }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"wm-wrapper\">\n          <div>\n            <h2\n              class=\"title\"\n              id={`wm-modal-heading-text-${this.uid}`}\n              // ref={el => (this.headingElement = el as HTMLElement)}\n              // onBlur={() => (this.headingElement.tabIndex = -1)}\n            >\n              {this.heading}\n              <span class=\"subtitle\">{this.subheading}</span>\n            </h2>\n          </div>\n          <wm-button\n            button-type=\"navigational\"\n            icon=\"f156\"\n            tooltip={this.closeTooltipMessage}\n            tooltip-position=\"left\"\n            id={`wm-modal-close-${this.uid}`}\n            ref={(el) => (this.closeButtonEl = el as HTMLElement)}\n            onClick={() => this.emitParentCloseEvent()}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kIAAA,IAAMA,iBAAmB,ouB,ICOZC,YAAW,W,uCAQdC,KAAAC,oBAA8BC,KAAKC,cAAc,CACvDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,oD,aAPY,G,gBACG,E,CAS9BP,EAAAQ,UAAAC,kBAAA,eAAAC,EAAAT,KACEA,KAAKU,IAAOV,KAAKW,GAAGC,cAAqCF,IAKzDV,KAAKW,GAAGC,cAAeC,iBAAiB,qBAAqB,WAC3DJ,EAAKK,cAAcC,O,KAIvBhB,EAAAQ,UAAAS,qBAAA,WACE,IAAMC,EAAcjB,KAAKW,GAAGC,cAE5BK,EAAYC,gB,EASdnB,EAAAQ,UAAAY,OAAA,eAAAV,EAAAT,KACE,OACEoB,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNlB,GAAI,yBAAAmB,OAAyBvB,KAAKU,MAIjCV,KAAKwB,QACNJ,EAAA,QAAME,MAAM,YAAYtB,KAAKyB,cAGjCL,EAAA,2BACc,eACZM,KAAK,OACLC,QAAS3B,KAAKC,oBAAmB,mBAChB,OACjBG,GAAI,kBAAAmB,OAAkBvB,KAAKU,KAC3BkB,IAAK,SAACjB,GAAE,OAAMF,EAAKK,cAAgBH,CAA3B,EACRkB,QAAS,WAAM,OAAApB,EAAKO,sBAAL,K,gIA3DH,G"}
+{"version":3,"names":["wmModalHeaderCss","ModalHeader","this","closeTooltipMessage","intl","formatMessage","id","defaultMessage","description","prototype","componentWillLoad","_this","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","concat","heading","subheading","icon","tooltip","ref","onClick"],"sources":["src/components/wm-modal/wm-modal-header.scss?tag=wm-modal-header","src/components/wm-modal/wm-modal-header.tsx"],"sourcesContent":["wm-modal-header {\r\n  @include border-radius(5px 5px 0 0px);\r\n  //Fix for Chrome sometimes leaving space between header and content, making the overlay show through\r\n  margin-bottom: -1px;\r\n\r\n  .wm-wrapper {\r\n    @include displayFlex();\r\n    @include justifyContent(space-between);\r\n    @include alignItems(center);\r\n\r\n    .title {\r\n      margin: 0;\r\n      font-weight: 600;\r\n      font-size: rem-calc(18);\r\n      color: rgb(74, 74, 74);\r\n      line-height: normal;\r\n\r\n      .subtitle {\r\n        display: block;\r\n        font-size: rem-calc(14);\r\n        font-weight: normal;\r\n      }\r\n\r\n      &:focus {\r\n        outline: none;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { h, Component, Element, Prop, Host } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-modal-header\",\r\n  styleUrl: \"wm-modal-header.scss\",\r\n})\r\nexport class ModalHeader {\r\n  @Element() el!: HTMLElement;\r\n  private closeButtonEl!: HTMLElement;\r\n\r\n  @Prop() heading?: string = \"\";\r\n  @Prop() subheading?: string = \"\";\r\n  private uid!: string;\r\n\r\n  private closeTooltipMessage: 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\r\n  componentWillLoad() {\r\n    this.uid = (this.el.parentElement as HTMLWmModalElement).uid;\r\n\r\n    // Trap focus when user tabs past last element in modal\r\n    // NB @Listen doesn't allow to listen on a specific element (the parent modal)\r\n    // if we listen to the whole doc each modal on the page reacts to every event\r\n    this.el.parentElement!.addEventListener(\"focusFirstElement\", () => {\r\n      this.closeButtonEl.focus();\r\n    });\r\n  }\r\n\r\n  emitParentCloseEvent() {\r\n    const parentModal = this.el.parentElement;\r\n    //@ts-ignore\r\n    parentModal.emitCloseEvent();\r\n  }\r\n\r\n  // @Listen(\"click\")\r\n  // directFocusOnClick() {\r\n  //   this.headingElement.tabIndex = 0;\r\n  //   this.headingElement.focus();\r\n  // }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"wm-wrapper\">\r\n          <div>\r\n            <h2\r\n              class=\"title\"\r\n              id={`wm-modal-heading-text-${this.uid}`}\r\n              // ref={el => (this.headingElement = el as HTMLElement)}\r\n              // onBlur={() => (this.headingElement.tabIndex = -1)}\r\n            >\r\n              {this.heading}\r\n              <span class=\"subtitle\">{this.subheading}</span>\r\n            </h2>\r\n          </div>\r\n          <wm-button\r\n            button-type=\"navigational\"\r\n            icon=\"f156\"\r\n            tooltip={this.closeTooltipMessage}\r\n            tooltip-position=\"left\"\r\n            id={`wm-modal-close-${this.uid}`}\r\n            ref={(el) => (this.closeButtonEl = el as HTMLElement)}\r\n            onClick={() => this.emitParentCloseEvent()}\r\n          />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"kIAAA,IAAMA,iBAAmB,ouB,ICOZC,YAAW,W,uCAQdC,KAAAC,oBAA8BC,KAAKC,cAAc,CACvDC,GAAI,mBACJC,eAAgB,QAChBC,YAAa,oD,aAPY,G,gBACG,E,CAS9BP,EAAAQ,UAAAC,kBAAA,eAAAC,EAAAT,KACEA,KAAKU,IAAOV,KAAKW,GAAGC,cAAqCF,IAKzDV,KAAKW,GAAGC,cAAeC,iBAAiB,qBAAqB,WAC3DJ,EAAKK,cAAcC,O,KAIvBhB,EAAAQ,UAAAS,qBAAA,WACE,IAAMC,EAAcjB,KAAKW,GAAGC,cAE5BK,EAAYC,gB,EASdnB,EAAAQ,UAAAY,OAAA,eAAAV,EAAAT,KACE,OACEoB,EAACC,KAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNlB,GAAI,yBAAAmB,OAAyBvB,KAAKU,MAIjCV,KAAKwB,QACNJ,EAAA,QAAME,MAAM,YAAYtB,KAAKyB,cAGjCL,EAAA,2BACc,eACZM,KAAK,OACLC,QAAS3B,KAAKC,oBAAmB,mBAChB,OACjBG,GAAI,kBAAAmB,OAAkBvB,KAAKU,KAC3BkB,IAAK,SAACjB,GAAE,OAAMF,EAAKK,cAAgBH,CAA3B,EACRkB,QAAS,WAAM,OAAApB,EAAKO,sBAAL,K,gIA3DH,G"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,o,n){function i(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,r){function a(e){try{l(n.next(e))}catch(e){r(e)}}function s(e){try{l(n["throw"](e))}catch(e){r(e)}}function l(e){e.done?o(e.value):i(e.value).then(a,s)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(o=0)),o)try{if(n=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;i=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(r=o.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(s[0]===6&&o.label<r[1]){o.label=r[1];r=s;break}if(r&&o.label<r[2]){o.label=r[2];o.ops.push(s);break}if(r[2])o.ops.pop();o.trys.pop();continue}s=t.call(e,o)}catch(e){s=[6,e];i=0}finally{n=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,c as checkForActiveElInShadow}from"./functions-c58046f2.js";var wmModalCss="wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .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;top:0;left:0}";var Modal=function(){function e(e){var t=this;registerInstance(this,e);this.focusLastElement=createEvent(this,"focusLastElement",3);this.focusFirstElement=createEvent(this,"focusFirstElement",3);this.wmModalCloseTriggered=createEvent(this,"wmModalCloseTriggered",3);this.wmCloseTriggered=createEvent(this,"wmCloseTriggered",7);this.wmModalPrimaryTriggered=createEvent(this,"wmModalPrimaryTriggered",7);this.wmPrimaryTriggered=createEvent(this,"wmPrimaryTriggered",7);this.wmModalSecondaryTriggered=createEvent(this,"wmModalSecondaryTriggered",7);this.wmSecondaryTriggered=createEvent(this,"wmSecondaryTriggered",7);this.bodyFocusListener=function(){return t.redirectFocusFromBody()};this.open=false;this.isOpen=false;this.elementToFocus="";this.modalType=null;this.isTypeDialog=null;this.uid=undefined}Object.defineProperty(e.prototype,"tempOpen",{get:function(){return this.open||this.isOpen},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"tempModalType",{get:function(){return this.modalType?this.modalType:this.isTypeDialog?"dialog":"modal"},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"focusOnOpenEl",{get:function(){var e=null;if(this.elementToFocus==="primary"||this.elementToFocus==="secondary"){e=this.el.querySelector("#wm-".concat(this.elementToFocus,"-").concat(this.uid))}else if(this.elementToFocus){e=this.el.querySelector("#"+this.elementToFocus);!e&&console.warn("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.")}var t=this.el.querySelector("#wm-modal-close-".concat(this.uid));return e?e:t},enumerable:false,configurable:true});e.prototype.toggleModal=function(){this.tempOpen?this.showModal():this.hideModal()};e.prototype.handleClick=function(e){this.tempOpen&&e.target===this.overlayEl&&this.focusOnOpenEl.focus()};e.prototype.closeModalOnEscape=function(e){if(e.key==="Escape"){e.stopPropagation();this.wmModalCloseTriggered.emit();this.wmCloseTriggered.emit();this.open=false}};e.prototype.showModal=function(){var e=this;this.setAriaDescribedbyOnModal();this.setElToFocusOnClose();document.body.style.overflow="hidden";document.body.tabIndex=0;document.body.removeEventListener("focus",this.bodyFocusListener,true);document.body.addEventListener("focus",this.bodyFocusListener,true);window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){return e.focusOnOpenEl.focus()}))}))};e.prototype.hideModal=function(){var e=this;document.body.style.overflow="visible";document.body.tabIndex=-1;document.body.removeEventListener("focus",this.bodyFocusListener,true);window.requestAnimationFrame((function(){return e.focusOnCloseEl.focus()}))};e.prototype.componentWillLoad=function(){var e=this;if(this.isOpen){console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.")}if(this.isTypeDialog){console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.")}if(this.elementToFocus==="primary"||this.elementToFocus==="secondary"){if(!this.el.id){console.error("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.")}}this.el.focus=function(){e.focusOnOpenEl.focus()};this.uid=this.el.id?this.el.id:generateId()};e.prototype.componentDidLoad=function(){if(this.tempOpen){this.showModal()}};e.prototype.emitCloseEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalCloseTriggered.emit();this.wmCloseTriggered.emit();return[2]}))}))};e.prototype.emitPrimaryEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalPrimaryTriggered.emit();this.wmPrimaryTriggered.emit();return[2]}))}))};e.prototype.emitSecondaryEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalSecondaryTriggered.emit();this.wmSecondaryTriggered.emit();return[2]}))}))};e.prototype.setAriaDescribedbyOnModal=function(){var e=document.getElementById("content-".concat(this.uid));if(!e){console.warn("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.")}else{this.el.setAttribute("aria-describedby","wm-modal-heading-text-".concat(this.uid," content-").concat(this.uid))}};e.prototype.setElToFocusOnClose=function(){var e=document.activeElement;if(e.tagName==="WM-MENUITEM"){this.focusOnCloseEl=e.parentElement}else{this.focusOnCloseEl=checkForActiveElInShadow(e)}};e.prototype.redirectFocusFromBody=function(){if(document.activeElement.tagName==="BODY"){this.focusOnOpenEl.focus()}};e.prototype.render=function(){var e=this;return h(Host,{class:"".concat(this.tempOpen?"":"hide ").concat("wm-"+this.tempModalType),role:"dialog","aria-describedby":"wm-modal-heading-text-".concat(this.uid),"aria-modal":"true",tabindex:this.tempOpen?0:null,onFocus:function(){e.focusLastElement.emit()}},h("div",{class:"overlay",ref:function(t){return e.overlayEl=t}}),h("div",{class:"sr-only",tabIndex:0,onFocus:function(){e.focusFirstElement.emit()}}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["toggleModal"],isOpen:["toggleModal"]}},enumerable:false,configurable:true});return e}();Modal.style=wmModalCss;export{Modal as wm_modal};
+var __awaiter=this&&this.__awaiter||function(e,t,o,n){function i(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,r){function a(e){try{l(n.next(e))}catch(e){r(e)}}function s(e){try{l(n["throw"](e))}catch(e){r(e)}}function l(e){e.done?o(e.value):i(e.value).then(a,s)}l((n=n.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(r[0]&1)throw r[1];return r[1]},trys:[],ops:[]},n,i,r,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(e){return function(t){return l([e,t])}}function l(s){if(n)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(o=0)),o)try{if(n=1,i&&(r=s[0]&2?i["return"]:s[0]?i["throw"]||((r=i["return"])&&r.call(i),0):i.next)&&!(r=r.call(i,s[1])).done)return r;if(i=0,r)s=[s[0]&2,r.value];switch(s[0]){case 0:case 1:r=s;break;case 4:o.label++;return{value:s[1],done:false};case 5:o.label++;i=s[1];s=[0];continue;case 7:s=o.ops.pop();o.trys.pop();continue;default:if(!(r=o.trys,r=r.length>0&&r[r.length-1])&&(s[0]===6||s[0]===2)){o=0;continue}if(s[0]===3&&(!r||s[1]>r[0]&&s[1]<r[3])){o.label=s[1];break}if(s[0]===6&&o.label<r[1]){o.label=r[1];r=s;break}if(r&&o.label<r[2]){o.label=r[2];o.ops.push(s);break}if(r[2])o.ops.pop();o.trys.pop();continue}s=t.call(e,o)}catch(e){s=[6,e];i=0}finally{n=r=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{g as generateId,c as checkForActiveElInShadow}from"./functions-1c41e984.js";var wmModalCss="wm-modal{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal>*{width:80vw;max-width:750px;background:#fff}wm-modal>*:focus{outline:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem}wm-modal wm-modal-header{z-index:2003}wm-modal wm-modal-footer{z-index:2003}wm-modal>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal.wm-modal wm-modal-header{border-bottom:1px solid #f4f3f6}wm-modal.wm-modal wm-modal-footer{border-top:1px solid #f4f3f6}@media only screen and (max-width: 768px){wm-modal.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal.wm-modal>*{max-width:none;width:100vw}wm-modal.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal.wm-dialog>:not(wm-modal-header):not(wm-modal-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal.hide{visibility:hidden}wm-modal .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;top:0;left:0}";var Modal=function(){function e(e){var t=this;registerInstance(this,e);this.focusLastElement=createEvent(this,"focusLastElement",3);this.focusFirstElement=createEvent(this,"focusFirstElement",3);this.wmModalCloseTriggered=createEvent(this,"wmModalCloseTriggered",3);this.wmCloseTriggered=createEvent(this,"wmCloseTriggered",7);this.wmModalPrimaryTriggered=createEvent(this,"wmModalPrimaryTriggered",7);this.wmPrimaryTriggered=createEvent(this,"wmPrimaryTriggered",7);this.wmModalSecondaryTriggered=createEvent(this,"wmModalSecondaryTriggered",7);this.wmSecondaryTriggered=createEvent(this,"wmSecondaryTriggered",7);this.bodyFocusListener=function(){return t.redirectFocusFromBody()};this.open=false;this.isOpen=false;this.elementToFocus="";this.modalType=null;this.isTypeDialog=null;this.uid=undefined}Object.defineProperty(e.prototype,"tempOpen",{get:function(){return this.open||this.isOpen},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"tempModalType",{get:function(){return this.modalType?this.modalType:this.isTypeDialog?"dialog":"modal"},enumerable:false,configurable:true});Object.defineProperty(e.prototype,"focusOnOpenEl",{get:function(){var e=null;if(this.elementToFocus==="primary"||this.elementToFocus==="secondary"){e=this.el.querySelector("#wm-".concat(this.elementToFocus,"-").concat(this.uid))}else if(this.elementToFocus){e=this.el.querySelector("#"+this.elementToFocus);!e&&console.warn("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.")}var t=this.el.querySelector("#wm-modal-close-".concat(this.uid));return e?e:t},enumerable:false,configurable:true});e.prototype.toggleModal=function(){this.tempOpen?this.showModal():this.hideModal()};e.prototype.handleClick=function(e){this.tempOpen&&e.target===this.overlayEl&&this.focusOnOpenEl.focus()};e.prototype.closeModalOnEscape=function(e){if(e.key==="Escape"){e.stopPropagation();this.wmModalCloseTriggered.emit();this.wmCloseTriggered.emit();this.open=false}};e.prototype.showModal=function(){var e=this;this.setAriaDescribedbyOnModal();this.setElToFocusOnClose();document.body.style.overflow="hidden";document.body.tabIndex=0;document.body.removeEventListener("focus",this.bodyFocusListener,true);document.body.addEventListener("focus",this.bodyFocusListener,true);window.requestAnimationFrame((function(){window.requestAnimationFrame((function(){return e.focusOnOpenEl.focus()}))}))};e.prototype.hideModal=function(){var e=this;document.body.style.overflow="visible";document.body.tabIndex=-1;document.body.removeEventListener("focus",this.bodyFocusListener,true);window.requestAnimationFrame((function(){return e.focusOnCloseEl.focus()}))};e.prototype.componentWillLoad=function(){var e=this;if(this.isOpen){console.warn("wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.")}if(this.isTypeDialog){console.warn("wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.")}if(this.elementToFocus==="primary"||this.elementToFocus==="secondary"){if(!this.el.id){console.error("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.")}}this.el.focus=function(){e.focusOnOpenEl.focus()};this.uid=this.el.id?this.el.id:generateId()};e.prototype.componentDidLoad=function(){if(this.tempOpen){this.showModal()}};e.prototype.emitCloseEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalCloseTriggered.emit();this.wmCloseTriggered.emit();return[2]}))}))};e.prototype.emitPrimaryEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalPrimaryTriggered.emit();this.wmPrimaryTriggered.emit();return[2]}))}))};e.prototype.emitSecondaryEvent=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.wmModalSecondaryTriggered.emit();this.wmSecondaryTriggered.emit();return[2]}))}))};e.prototype.setAriaDescribedbyOnModal=function(){var e=document.getElementById("content-".concat(this.uid));if(!e){console.warn("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.")}else{this.el.setAttribute("aria-describedby","wm-modal-heading-text-".concat(this.uid," content-").concat(this.uid))}};e.prototype.setElToFocusOnClose=function(){var e=document.activeElement;if(e.tagName==="WM-MENUITEM"){this.focusOnCloseEl=e.parentElement}else{this.focusOnCloseEl=checkForActiveElInShadow(e)}};e.prototype.redirectFocusFromBody=function(){if(document.activeElement.tagName==="BODY"){this.focusOnOpenEl.focus()}};e.prototype.render=function(){var e=this;return h(Host,{class:"".concat(this.tempOpen?"":"hide ").concat("wm-"+this.tempModalType),role:"dialog","aria-describedby":"wm-modal-heading-text-".concat(this.uid),"aria-modal":"true",tabindex:this.tempOpen?0:null,onFocus:function(){e.focusLastElement.emit()}},h("div",{class:"overlay",ref:function(t){return e.overlayEl=t}}),h("div",{class:"sr-only",tabIndex:0,onFocus:function(){e.focusFirstElement.emit()}}))};Object.defineProperty(e.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{open:["toggleModal"],isOpen:["toggleModal"]}},enumerable:false,configurable:true});return e}();Modal.style=wmModalCss;export{Modal as wm_modal};
 //# sourceMappingURL=wm-modal.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["wmModalCss","Modal","this","bodyFocusListener","_this","redirectFocusFromBody","Object","defineProperty","class_1","prototype","open","isOpen","modalType","isTypeDialog","customElementToFocus","elementToFocus","el","querySelector","concat","uid","console","warn","closeButtonEl","toggleModal","tempOpen","showModal","hideModal","handleClick","ev","target","overlayEl","focusOnOpenEl","focus","closeModalOnEscape","key","stopPropagation","wmModalCloseTriggered","emit","wmCloseTriggered","setAriaDescribedbyOnModal","setElToFocusOnClose","document","body","style","overflow","tabIndex","removeEventListener","addEventListener","window","requestAnimationFrame","focusOnCloseEl","componentWillLoad","id","error","generateId","componentDidLoad","emitCloseEvent","emitPrimaryEvent","wmModalPrimaryTriggered","wmPrimaryTriggered","emitSecondaryEvent","wmModalSecondaryTriggered","wmSecondaryTriggered","modalBody","getElementById","setAttribute","elToFocus","activeElement","tagName","parentElement","checkForActiveElInShadow","render","h","Host","class","tempModalType","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 {\n  * {\n    box-sizing: border-box;\n  }\n  @include displayFlex();\n  @include justifyContent(center);\n  @include alignItems(center);\n\n  flex-direction: column;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  z-index: 2001;\n  width: 80vw;\n  max-width: 750px;\n  max-height: 80vh;\n  @include box-shadow(\n    0px 11px 15px 0px rgba(0, 0, 0, 0.2),\n    0px 9px 46px 8px rgba(0, 0, 0, 0.12),\n    0px 24px 38px 3px rgba(0, 0, 0, 0.14)\n  );\n\n  > * {\n    width: 80vw;\n    max-width: 750px;\n    background: $light-background;\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  wm-modal-header,\n  wm-modal-footer {\n    padding: rem-calc(20 30);\n  }\n\n  wm-modal-header {\n    z-index: 2003;\n  }\n\n  wm-modal-footer {\n    z-index: 2003;\n  }\n\n  > :not(wm-modal-header):not(wm-modal-footer) {\n    max-height: calc(80vh - 166px);\n    z-index: 2002;\n  }\n\n  &.wm-modal {\n    wm-modal-header {\n      border-bottom: 1px solid rgb(244, 243, 246);\n    }\n\n    wm-modal-footer {\n      border-top: 1px solid rgb(244, 243, 246);\n    }\n\n    @media only screen and (max-width: 768px) {\n      height: 100%;\n      max-height: none;\n      max-width: none;\n      width: 100vw;\n\n      > * {\n        max-width: none;\n        width: 100vw;\n      }\n\n      > *:not(wm-modal-header):not(wm-modal-footer) {\n        max-height: none;\n        height: calc(100vh - 166px);\n      }\n    }\n  }\n\n  &.wm-dialog {\n    > :not(wm-modal-header):not(wm-modal-footer) {\n      padding: rem-calc(0 30 20 30);\n      font-size: rem-calc(14px);\n      border: none;\n    }\n  }\n\n  .overlay {\n    width: 100vw;\n    height: 100vh;\n    max-width: none;\n    max-height: none;\n    position: fixed !important;\n    top: -1;\n    bottom: 1;\n    left: -1;\n    right: 1;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n    z-index: 2000;\n  }\n\n  &.hide {\n    visibility: hidden;\n  }\n\n  .sr-only {\n    @include srOnly;\n    top: 0;\n    left: 0;\n  }\n}\n","import { h, Component, Element, Listen, Host, Prop, Watch, Event, EventEmitter, Method } from \"@stencil/core\";\nimport { checkForActiveElInShadow } from \"../../global/functions\";\nimport { generateId } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-modal\",\n  styleUrl: \"wm-modal.scss\",\n})\nexport class Modal {\n  @Element() el!: HTMLWmModalElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  @Prop({ reflect: true, mutable: true }) isOpen: boolean = false; // DEPRECATED in favor of open\n  get tempOpen() {\n    // instances of this.tempOpen should be replaced with this.open once isOpen is fully phased out\n    return this.open || this.isOpen;\n  }\n  @Prop({ mutable: true }) elementToFocus: \"primary\" | \"secondary\" | string = \"\"; // primary and secondary point to the corresponding buttons, otherwise focus based on element id\n  @Prop({ reflect: true }) modalType: \"modal\" | \"dialog\" | null = null;\n  @Prop({ reflect: true }) isTypeDialog: boolean | null = null;\n  get tempModalType() {\n    return this.modalType ? this.modalType : this.isTypeDialog ? \"dialog\" : \"modal\";\n  }\n  @Prop({ mutable: true, reflect: true }) uid!: string;\n  private focusOnCloseEl!: HTMLElement;\n  private overlayEl!: HTMLDivElement;\n  private bodyFocusListener: () => void = () => this.redirectFocusFromBody();\n\n  @Event({ bubbles: false }) focusLastElement!: EventEmitter;\n  @Event({ bubbles: false }) focusFirstElement!: EventEmitter;\n  // wmModalCloseTriggered does not bubble, prevent nested modals from closing all at once\n  @Event({ bubbles: false }) wmModalCloseTriggered!: EventEmitter;\n  @Event() wmCloseTriggered!: EventEmitter; // deprecated in favor of wmModalCloseTriggered\n  @Event() wmModalPrimaryTriggered!: EventEmitter;\n  @Event() wmPrimaryTriggered!: EventEmitter; // deprecated in favor of wmModalPrimaryTriggered\n  @Event() wmModalSecondaryTriggered!: EventEmitter;\n  @Event() wmSecondaryTriggered!: EventEmitter; // deprecated in favor of wmModalSecondaryTriggered\n\n  get focusOnOpenEl(): HTMLElement {\n    let customElementToFocus: HTMLElement | null = null;\n\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\n      customElementToFocus = this.el.querySelector<HTMLElement>(`#wm-${this.elementToFocus}-${this.uid}`);\n    } else if (this.elementToFocus) {\n      customElementToFocus = this.el.querySelector<HTMLElement>(\"#\" + this.elementToFocus);\n      !customElementToFocus &&\n        console.warn(\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.\"\n        );\n    }\n\n    const closeButtonEl = this.el.querySelector<HTMLElement>(`#wm-modal-close-${this.uid}`)!;\n    return customElementToFocus ? customElementToFocus : closeButtonEl;\n  }\n\n  //App can open modal by toggling the prop\n  @Watch(\"open\")\n  @Watch(\"isOpen\")\n  toggleModal() {\n    this.tempOpen ? this.showModal() : this.hideModal();\n  }\n\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:\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.\n  // @Listen(\"wmShowModal\", { target: \"window\" })\n  // doesEventMatchId(ev: CustomEvent) {\n  //   ev.detail === this.uid && this.showModal();\n  // }\n\n  @Listen(\"click\")\n  handleClick(ev: MouseEvent & { target: HTMLElement }) {\n    this.tempOpen && ev.target === this.overlayEl && this.focusOnOpenEl.focus();\n  }\n\n  @Listen(\"keydown\")\n  closeModalOnEscape(ev: KeyboardEvent) {\n    if (ev.key === \"Escape\") {\n      // stops propagation prevents nested modal from closing all at once\n      ev.stopPropagation();\n      this.wmModalCloseTriggered.emit();\n      this.wmCloseTriggered.emit(); // deprecated\n      this.open = false;\n    }\n  }\n\n  showModal() {\n    this.setAriaDescribedbyOnModal();\n    this.setElToFocusOnClose(); //Record where the user was before the modal opened so that focus can return to it when the modal closes\n    document.body.style.overflow = \"hidden\"; //Keeps the page below the modal from scrolling\n\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\n    document.body.tabIndex = 0;\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\n    document.body.addEventListener(\"focus\", this.bodyFocusListener, true);\n\n    window.requestAnimationFrame(() => {\n      // nested requestAnimationFrames allow all elements to become visible on page before assigning focus\n      window.requestAnimationFrame(() => this.focusOnOpenEl.focus()); //Bring focus to element inside modal\n    });\n  }\n\n  //Close the modal and focus the triggering element when the modal buttons emit their events\n  hideModal() {\n    document.body.style.overflow = \"visible\";\n    document.body.tabIndex = -1;\n    document.body.removeEventListener(\"focus\", this.bodyFocusListener, true);\n    window.requestAnimationFrame(() => this.focusOnCloseEl.focus()); //Return focus\n  }\n\n  componentWillLoad() {\n    if (this.isOpen) {\n      console.warn(\"wm-modal: is-open has been deprecated as of v3.1.0. Please use open instead.\");\n    }\n    if (this.isTypeDialog) {\n      console.warn(\"wm-modal: is-type-dialog has been deprecated as of v3.1.0. Please use modal-type instead.\");\n    }\n    if (this.elementToFocus === \"primary\" || this.elementToFocus === \"secondary\") {\n      if (!this.el.id) {\n        console.error(\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.\"\n        );\n      }\n    }\n\n    this.el.focus = () => {\n      this.focusOnOpenEl.focus();\n    };\n\n    this.uid = this.el.id ? this.el.id : generateId();\n  }\n\n  componentDidLoad() {\n    if (this.tempOpen) {\n      this.showModal();\n    }\n  }\n\n  @Method()\n  async emitCloseEvent() {\n    this.wmModalCloseTriggered.emit();\n    this.wmCloseTriggered.emit(); // deprecated\n  }\n\n  @Method()\n  async emitPrimaryEvent() {\n    this.wmModalPrimaryTriggered.emit();\n    this.wmPrimaryTriggered.emit(); // deprecated\n  }\n\n  @Method()\n  async emitSecondaryEvent() {\n    this.wmModalSecondaryTriggered.emit();\n    this.wmSecondaryTriggered.emit(); // deprecated\n  }\n\n  setAriaDescribedbyOnModal() {\n    const modalBody = document.getElementById(`content-${this.uid}`);\n\n    if (!modalBody) {\n      console.warn(\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.\"\n      );\n    } else {\n      this.el.setAttribute(\"aria-describedby\", `wm-modal-heading-text-${this.uid} content-${this.uid}`);\n    }\n  }\n\n  setElToFocusOnClose() {\n    const elToFocus = document.activeElement as HTMLElement;\n    if (elToFocus.tagName === \"WM-MENUITEM\") {\n      this.focusOnCloseEl = elToFocus.parentElement!;\n    } else {\n      this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);\n    }\n  }\n\n  redirectFocusFromBody() {\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\") {\n      this.focusOnOpenEl.focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        class={`${this.tempOpen ? \"\" : \"hide \"}${\"wm-\" + this.tempModalType}`}\n        role=\"dialog\"\n        aria-describedby={`wm-modal-heading-text-${this.uid}`}\n        aria-modal=\"true\"\n        tabindex={this.tempOpen ? 0 : null}\n        onFocus={() => {\n          this.focusLastElement.emit();\n        }}\n      >\n        <div class=\"overlay\" ref={(el) => (this.overlayEl = el as HTMLDivElement)} />\n        <div\n          class=\"sr-only\"\n          tabIndex={0}\n          onFocus={() => {\n            this.focusFirstElement.emit();\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["wmModalCss","Modal","this","bodyFocusListener","_this","redirectFocusFromBody","Object","defineProperty","class_1","prototype","open","isOpen","modalType","isTypeDialog","customElementToFocus","elementToFocus","el","querySelector","concat","uid","console","warn","closeButtonEl","toggleModal","tempOpen","showModal","hideModal","handleClick","ev","target","overlayEl","focusOnOpenEl","focus","closeModalOnEscape","key","stopPropagation","wmModalCloseTriggered","emit","wmCloseTriggered","setAriaDescribedbyOnModal","setElToFocusOnClose","document","body","style","overflow","tabIndex","removeEventListener","addEventListener","window","requestAnimationFrame","focusOnCloseEl","componentWillLoad","id","error","generateId","componentDidLoad","emitCloseEvent","emitPrimaryEvent","wmModalPrimaryTriggered","wmPrimaryTriggered","emitSecondaryEvent","wmModalSecondaryTriggered","wmSecondaryTriggered","modalBody","getElementById","setAttribute","elToFocus","activeElement","tagName","parentElement","checkForActiveElInShadow","render","h","Host","class","tempModalType","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/esm-es5/wm-navigation_3.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host,g as getElement,f as forceUpdate}from"./index-84a6ae22.js";import{i as intl,w as throttle}from"./functions-c58046f2.js";var wmNavigationCss=":host{z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";var Navigation=function(){function t(t){var e=this;registerInstance(this,t);this.wmNavigationStateChanged=createEvent(this,"wmNavigationStateChanged",7);this.mainNavigationMessage=intl.formatMessage({id:"navigation.mainNavigation",defaultMessage:"Main",description:"Label describing the site navigation, for screen reader users"});this.openTooltipMessage=intl.formatMessage({id:"global.openVerb",defaultMessage:"Open",description:"For a button, to open a user interface element"});this.closeTooltipMessage=intl.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.throttledRerender=throttle((function(){return forceUpdate(e.el)}),50);this.open=false;this.isTabbing=false}Object.defineProperty(t.prototype,"isCollapsible",{get:function(){return window.innerWidth<1024},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"ariaExpanded",{get:function(){return this.isCollapsible?this.open.toString():undefined},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.closeOnEscape=function(t){if(t.key==="Escape"){this.open=false}};t.prototype.handleWindowResize=function(){this.throttledRerender()};t.prototype.handleHamburgerClicked=function(){this.open=!this.open};t.prototype.handleClickOnItem=function(){this.open=false};t.prototype.handleStateChange=function(){if(this.isCollapsible){this.wmNavigationStateChanged.emit();this.open?this.expand():this.collapse()}};t.prototype.componentWillLoad=function(){var t=this;if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=function(){var e=t.open?t.el.shadowRoot.querySelector(".toggle"):document.querySelector("wm-navigation-hamburger");var i=t.el.querySelector("wm-navigation-item");t.isCollapsible?e.focus():i.focus()};if(this.isCollapsible&&this.open){this.wmNavigationStateChanged.emit();this.expand()}};t.prototype.redirectFocusFromBody=function(t){if(document.activeElement.tagName==="BODY"&&!t.relatedTarget){this.el.focus()}};t.prototype.expand=function(){var t=this;document.body.tabIndex=0;document.body.addEventListener("focus",this.redirectFocusFromBody.bind(this),true);setTimeout((function(){return t.toggleEl.focus()}),250)};t.prototype.collapse=function(){document.body.tabIndex=-1;document.body.removeEventListener("focus",this.redirectFocusFromBody.bind(this));var t=document.querySelector("wm-navigation-hamburger");if(t)t.focus()};t.prototype.focusLastItem=function(){var t=this.el.querySelectorAll("wm-navigation-item");var e=Array.from(t).pop();e.focus()};t.prototype.renderOverlay=function(){var t=this;return h("div",{class:"overlay",onClick:function(){t.open=false}})};t.prototype.render=function(){var t=this;return h(Host,{role:"navigation","aria-expanded":this.ariaExpanded,"aria-label":this.mainNavigationMessage},this.open?this.renderOverlay():"",this.isCollapsible&&h("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:function(){return t.focusLastItem()}}),h("div",{class:"tray"},h("div",{class:"toggle-wrapper"},h("wm-button",{ref:function(e){return t.toggleEl=e},class:"toggle ".concat(this.isTabbing?"user-is-tabbing":""),"button-type":"navigational",icon:this.open?"f156":"f35c","icon-size":"2rem",tooltip:this.open?this.closeTooltipMessage:this.openTooltipMessage,"tooltip-position":"left",tabIndex:this.open?undefined:-1,onClick:function(){t.open=!t.open}})),h("ul",{class:"navlist"},h("slot",null))),this.isCollapsible&&h("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:function(){return t.toggleEl.focus()}}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleStateChange"]}},enumerable:false,configurable:true});return t}();Navigation.style=wmNavigationCss;var wmNavigationHamburgerCss='button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f35c";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}';var NavigationHamburger=function(){function t(t){registerInstance(this,t);this.wmNavigationHamburgerClicked=createEvent(this,"wmNavigationHamburgerClicked",7);this.showNavMessage=intl.formatMessage({id:"navigation.showNavigation",defaultMessage:"Show navigation",description:"For user interface element opening a navigation menu"});this.navId=undefined;this.tooltipVisible=false;this.isTabbing=false;this.open=false}Object.defineProperty(t.prototype,"tooltipEl",{get:function(){return document.getElementById("wm-tooltip")},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleNavigationStateChanged=function(t){this.open=t.target.open};t.prototype.componentWillLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(!this.navId){console.error("wm-navigation-hamburger: nav-id is a required prop")}};t.prototype.showTooltip=function(){var t=this;var e=this.showNavMessage;this.tooltipEl.textContent=e;this.tooltipEl.style.setProperty("--wmTooltipTop","1.125rem");this.tooltipEl.style.setProperty("--wmTooltipLeft","2.75rem");this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";var i=e.match(/^[^\s]+$/);if(i){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}setTimeout((function(){t.tooltipVisible=true}),500)};t.prototype.hideTooltip=function(){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false};t.prototype.showTooltipForKeyboardUsers=function(){if(this.isTabbing){this.showTooltip()}};t.prototype.handleClick=function(){this.hideTooltip();this.wmNavigationHamburgerClicked.emit()};t.prototype.render=function(){var t=this;return h(Host,{class:"hamburger ".concat(this.open?"nav-open":"nav-closed")},h("button",{class:this.isTabbing?"user-is-tabbing":undefined,"aria-expanded":this.open,"aria-controls":this.navId,"aria-label":this.showNavMessage,onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltipForKeyboardUsers()},onBlur:function(){return t.hideTooltip()},onClick:function(){return t.handleClick()}},h("span",{class:"icon"})))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();NavigationHamburger.style=wmNavigationHamburgerCss;var wmNavigationItemCss='.link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:"";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}';var NavigationItem=function(){function t(t){registerInstance(this,t);this.wmNavigationItemClicked=createEvent(this,"wmNavigationItemClicked",7);this.href=undefined;this.text=undefined;this.active=undefined;this.isTabbing=false}t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.componentWillLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}};t.prototype.render=function(){var t=this;return h(Host,{role:"listitem"},h("a",{class:"link ".concat(this.active?"active":""," ").concat(this.isTabbing?"user-is-tabbing":""),href:this.href,onClick:function(){return t.wmNavigationItemClicked.emit()}},h("div",{class:"icon","aria-hidden":"true"},h("slot",null)),h("div",{class:"text"},this.text)))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();NavigationItem.style=wmNavigationItemCss;export{Navigation as wm_navigation,NavigationHamburger as wm_navigation_hamburger,NavigationItem as wm_navigation_item};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement,f as forceUpdate}from"./index-84a6ae22.js";import{i as intl,w as throttle}from"./functions-1c41e984.js";var wmNavigationCss=":host{z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:#fff;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";var Navigation=function(){function t(t){var e=this;registerInstance(this,t);this.wmNavigationStateChanged=createEvent(this,"wmNavigationStateChanged",7);this.mainNavigationMessage=intl.formatMessage({id:"navigation.mainNavigation",defaultMessage:"Main",description:"Label describing the site navigation, for screen reader users"});this.openTooltipMessage=intl.formatMessage({id:"global.openVerb",defaultMessage:"Open",description:"For a button, to open a user interface element"});this.closeTooltipMessage=intl.formatMessage({id:"global.closeVerb",defaultMessage:"Close",description:"For a button, to close a user interface element"});this.throttledRerender=throttle((function(){return forceUpdate(e.el)}),50);this.open=false;this.isTabbing=false}Object.defineProperty(t.prototype,"isCollapsible",{get:function(){return window.innerWidth<1024},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"ariaExpanded",{get:function(){return this.isCollapsible?this.open.toString():undefined},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.closeOnEscape=function(t){if(t.key==="Escape"){this.open=false}};t.prototype.handleWindowResize=function(){this.throttledRerender()};t.prototype.handleHamburgerClicked=function(){this.open=!this.open};t.prototype.handleClickOnItem=function(){this.open=false};t.prototype.handleStateChange=function(){if(this.isCollapsible){this.wmNavigationStateChanged.emit();this.open?this.expand():this.collapse()}};t.prototype.componentWillLoad=function(){var t=this;if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}this.el.focus=function(){var e=t.open?t.el.shadowRoot.querySelector(".toggle"):document.querySelector("wm-navigation-hamburger");var i=t.el.querySelector("wm-navigation-item");t.isCollapsible?e.focus():i.focus()};if(this.isCollapsible&&this.open){this.wmNavigationStateChanged.emit();this.expand()}};t.prototype.redirectFocusFromBody=function(t){if(document.activeElement.tagName==="BODY"&&!t.relatedTarget){this.el.focus()}};t.prototype.expand=function(){var t=this;document.body.tabIndex=0;document.body.addEventListener("focus",this.redirectFocusFromBody.bind(this),true);setTimeout((function(){return t.toggleEl.focus()}),250)};t.prototype.collapse=function(){document.body.tabIndex=-1;document.body.removeEventListener("focus",this.redirectFocusFromBody.bind(this));var t=document.querySelector("wm-navigation-hamburger");if(t)t.focus()};t.prototype.focusLastItem=function(){var t=this.el.querySelectorAll("wm-navigation-item");var e=Array.from(t).pop();e.focus()};t.prototype.renderOverlay=function(){var t=this;return h("div",{class:"overlay",onClick:function(){t.open=false}})};t.prototype.render=function(){var t=this;return h(Host,{role:"navigation","aria-expanded":this.ariaExpanded,"aria-label":this.mainNavigationMessage},this.open?this.renderOverlay():"",this.isCollapsible&&h("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:function(){return t.focusLastItem()}}),h("div",{class:"tray"},h("div",{class:"toggle-wrapper"},h("wm-button",{ref:function(e){return t.toggleEl=e},class:"toggle ".concat(this.isTabbing?"user-is-tabbing":""),"button-type":"navigational",icon:this.open?"f156":"f35c","icon-size":"2rem",tooltip:this.open?this.closeTooltipMessage:this.openTooltipMessage,"tooltip-position":"left",tabIndex:this.open?undefined:-1,onClick:function(){t.open=!t.open}})),h("ul",{class:"navlist"},h("slot",null))),this.isCollapsible&&h("div",{class:"trapfocus",tabindex:this.open?0:undefined,onFocus:function(){return t.toggleEl.focus()}}))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{open:["handleStateChange"]}},enumerable:false,configurable:true});return t}();Navigation.style=wmNavigationCss;var wmNavigationHamburgerCss='button{display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}button.user-is-tabbing:focus::-moz-focus-inner{border:0}button:hover{background-color:#d7d6d9}.icon:before{display:inline-block;font:normal normal normal 24px/1 "Material Design Icons";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\\f35c";font-size:1.5rem;color:#575195}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}';var NavigationHamburger=function(){function t(t){registerInstance(this,t);this.wmNavigationHamburgerClicked=createEvent(this,"wmNavigationHamburgerClicked",7);this.showNavMessage=intl.formatMessage({id:"navigation.showNavigation",defaultMessage:"Show navigation",description:"For user interface element opening a navigation menu"});this.navId=undefined;this.tooltipVisible=false;this.isTabbing=false;this.open=false}Object.defineProperty(t.prototype,"tooltipEl",{get:function(){return document.getElementById("wm-tooltip")},enumerable:false,configurable:true});t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleNavigationStateChanged=function(t){this.open=t.target.open};t.prototype.componentWillLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}if(!this.navId){console.error("wm-navigation-hamburger: nav-id is a required prop")}};t.prototype.showTooltip=function(){var t=this;var e=this.showNavMessage;this.tooltipEl.textContent=e;this.tooltipEl.style.setProperty("--wmTooltipTop","1.125rem");this.tooltipEl.style.setProperty("--wmTooltipLeft","2.75rem");this.tooltipEl.style.transitionDelay="500ms";this.tooltipEl.style.opacity="1";var i=e.match(/^[^\s]+$/);if(i){this.tooltipEl.classList.add("single-word");this.tooltipEl.style.setProperty("--wmTooltipMaxWidth","none")}else{this.tooltipEl.classList.remove("single-word");this.tooltipEl.style.removeProperty("--wmTooltipMaxWidth")}setTimeout((function(){t.tooltipVisible=true}),500)};t.prototype.hideTooltip=function(){this.tooltipEl.style.transitionDelay="0s";this.tooltipEl.style.opacity="0";this.tooltipVisible=false};t.prototype.showTooltipForKeyboardUsers=function(){if(this.isTabbing){this.showTooltip()}};t.prototype.handleClick=function(){this.hideTooltip();this.wmNavigationHamburgerClicked.emit()};t.prototype.render=function(){var t=this;return h(Host,{class:"hamburger ".concat(this.open?"nav-open":"nav-closed")},h("button",{class:this.isTabbing?"user-is-tabbing":undefined,"aria-expanded":this.open,"aria-controls":this.navId,"aria-label":this.showNavMessage,onMouseEnter:function(){return t.showTooltip()},onMouseLeave:function(){return t.hideTooltip()},onFocus:function(){return t.showTooltipForKeyboardUsers()},onBlur:function(){return t.hideTooltip()},onClick:function(){return t.handleClick()}},h("span",{class:"icon"})))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();NavigationHamburger.style=wmNavigationHamburgerCss;var wmNavigationItemCss='.link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative}.link:hover{background-color:#f2f2f2}.link .icon{font-size:1.375rem;color:#6b6b6b}.link .text{font-size:0.875rem}.link.user-is-tabbing:focus{-webkit-box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e;box-shadow:inset 0 2px 2px 0 rgba(244, 243, 246, 0.2), inset 0 2px 2px 0 rgba(0, 0, 0, 0.1), inset 0 0 4px 3px #61279e}.link.active{background-color:#e9e7ec}.link.active:before{content:"";background-color:#575195;position:absolute;height:100%;width:5px;left:0}.link.active .text{color:#575195}.link.active .icon{color:#575195}';var NavigationItem=function(){function t(t){registerInstance(this,t);this.wmNavigationItemClicked=createEvent(this,"wmNavigationItemClicked",7);this.href=undefined;this.text=undefined;this.active=undefined;this.isTabbing=false}t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.componentWillLoad=function(){if(document.body.classList.contains("wmcl-user-is-tabbing")){this.toggleTabbingOn()}};t.prototype.render=function(){var t=this;return h(Host,{role:"listitem"},h("a",{class:"link ".concat(this.active?"active":""," ").concat(this.isTabbing?"user-is-tabbing":""),href:this.href,onClick:function(){return t.wmNavigationItemClicked.emit()}},h("div",{class:"icon","aria-hidden":"true"},h("slot",null)),h("div",{class:"text"},this.text)))};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();NavigationItem.style=wmNavigationItemCss;export{Navigation as wm_navigation,NavigationHamburger as wm_navigation_hamburger,NavigationItem as wm_navigation_item};
 //# sourceMappingURL=wm-navigation_3.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["wmNavigationCss","Navigation","this","mainNavigationMessage","intl","formatMessage","id","defaultMessage","description","openTooltipMessage","closeTooltipMessage","throttledRerender","throttle","forceUpdate","_this","el","Object","defineProperty","prototype","window","innerWidth","isCollapsible","open","toString","undefined","toggleTabbingOn","isTabbing","toggleTabbingOff","closeOnEscape","ev","key","handleWindowResize","handleHamburgerClicked","handleClickOnItem","handleStateChange","wmNavigationStateChanged","emit","expand","collapse","componentWillLoad","document","body","classList","contains","focus","btn","shadowRoot","querySelector","firstItem","redirectFocusFromBody","activeElement","tagName","relatedTarget","tabIndex","addEventListener","bind","setTimeout","toggleEl","removeEventListener","hamburgerBtn","focusLastItem","items","querySelectorAll","lastItem","Array","from","pop","renderOverlay","h","class","onClick","render","Host","role","ariaExpanded","tabindex","onFocus","ref","concat","icon","tooltip","wmNavigationHamburgerCss","NavigationHamburger","showNavMessage","getElementById","handleNavigationStateChanged","target","navId","console","error","showTooltip","tooltipText","tooltipEl","textContent","style","setProperty","transitionDelay","opacity","hasNoWhitespace","match","add","remove","removeProperty","tooltipVisible","hideTooltip","showTooltipForKeyboardUsers","handleClick","wmNavigationHamburgerClicked","onMouseEnter","onMouseLeave","onBlur","wmNavigationItemCss","NavigationItem","active","href","wmNavigationItemClicked","text"],"sources":["src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","src/components/wm-navigation/wm-navigation.tsx","src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","src/components/wm-navigation/wm-navigation-hamburger.tsx","src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\n  z-index: 10;\n}\n\n:host([aria-expanded=\"true\"]) {\n  z-index: 5000;\n}\n\n.tray {\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\n  display: flex;\n  flex-direction: column;\n  width: rem-calc(121);\n  background-color: $light-background;\n  overflow-x: hidden;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  font-size: rem-calc(14);\n  height: 100%;\n}\n\n.navlist {\n  margin: 0;\n  padding: 0;\n}\n\n.toggle-wrapper {\n  display: none;\n}\n\n/* COLLAPSIBLE STYLES */\n@media screen and (max-width: 1023px) {\n  .tray {\n    @include transition(transform 0.33s ease);\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    transform: translateX(-100%);\n\n    ul {\n      visibility: hidden;\n    }\n\n    .toggle-wrapper {\n      display: inline-block;\n      min-height: 5rem;\n      width: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n  }\n\n  :host([aria-expanded=\"true\"]) {\n    .tray {\n      transform: translateX(0);\n\n      ul {\n        visibility: visible;\n      }\n    }\n  }\n\n  .overlay {\n    width: 100vw;\n    height: 100vh;\n    max-width: none;\n    max-height: none;\n    position: fixed !important;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    transform: translate(0%, 0%);\n    background-color: rgba(25, 25, 25, 0.4);\n    @include transition(opacity 0.5s ease-out);\n  }\n}\n","import {\n  h,\n  Component,\n  Element,\n  Prop,\n  State,\n  Listen,\n  Host,\n  Watch,\n  Event,\n  EventEmitter,\n  forceUpdate,\n} from \"@stencil/core\";\nimport { intl, throttle } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation\",\n  styleUrl: \"wm-navigation.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class Navigation {\n  @Element() el!: HTMLWmNavigationElement;\n  toggleEl!: HTMLWmButtonElement;\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n\n  @State() isTabbing: boolean = false;\n  @Event() wmNavigationStateChanged!: EventEmitter;\n\n  private mainNavigationMessage: string = intl.formatMessage({\n    id: \"navigation.mainNavigation\",\n    defaultMessage: \"Main\",\n    description: \"Label describing the site navigation, for screen reader users\",\n  });\n\n  private openTooltipMessage: string = intl.formatMessage({\n    id: \"global.openVerb\",\n    defaultMessage: \"Open\",\n    description: \"For a button, to open a user interface element\",\n  });\n\n  private closeTooltipMessage: string = intl.formatMessage({\n    id: \"global.closeVerb\",\n    defaultMessage: \"Close\",\n    description: \"For a button, to close a user interface element\",\n  });\n\n  get isCollapsible() {\n    return window.innerWidth < 1024;\n  }\n\n  get ariaExpanded() {\n    return this.isCollapsible\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\n        this.open.toString()\n      : // otherwise, do not render attr at all\n        undefined;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  @Listen(\"keydown\")\n  closeOnEscape(ev: KeyboardEvent) {\n    if (ev.key === \"Escape\") {\n      this.open = false;\n    }\n  }\n\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\n\n  @Listen(\"resize\", { target: \"window\" })\n  handleWindowResize() {\n    // for component to react when breakpoint is crossed\n    // (doesn't rerender on window resize)\n    this.throttledRerender();\n  }\n\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\n  handleHamburgerClicked() {\n    this.open = !this.open;\n  }\n\n  @Listen(\"wmNavigationItemClicked\")\n  handleClickOnItem() {\n    this.open = false;\n  }\n\n  @Watch(\"open\")\n  handleStateChange() {\n    if (this.isCollapsible) {\n      this.wmNavigationStateChanged.emit();\n      this.open ? this.expand() : this.collapse();\n    }\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\n      const btn = this.open\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\n      this.isCollapsible ? btn.focus() : firstItem.focus();\n    };\n\n    if (this.isCollapsible && this.open) {\n      // hamburger needs to know if open was initially set to true\n      this.wmNavigationStateChanged.emit();\n      this.expand();\n    }\n  }\n\n  redirectFocusFromBody(ev: FocusEvent) {\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\n    // which should not redirect focus\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\n      this.el.focus();\n    }\n  }\n\n  expand() {\n    // listen to focus on body and redirect to the component\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\n    // and is tabbing back in\n    document.body.tabIndex = 0;\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\n\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\n    setTimeout(() => this.toggleEl.focus(), 250);\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\n  }\n\n  collapse() {\n    // rm event listener on body\n    document.body.tabIndex = -1;\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\n\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\n    // should fail silently if el doesn't exist\n    // (dev may have chosen not to use the hamburger component)\n    if (hamburgerBtn) hamburgerBtn.focus();\n  }\n\n  focusLastItem() {\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\n    lastItem.focus();\n  }\n\n  renderOverlay() {\n    return (\n      <div\n        class=\"overlay\"\n        onClick={() => {\n          this.open = false;\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\n        {this.open ? this.renderOverlay() : \"\"}\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\n        )}\n        <div class=\"tray\">\n          <div class=\"toggle-wrapper\">\n            <wm-button\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n              button-type=\"navigational\"\n              icon={this.open ? \"f156\" : \"f35c\"}\n              icon-size=\"2rem\"\n              tooltip={this.open ? this.closeTooltipMessage : this.openTooltipMessage}\n              tooltip-position=\"left\"\n              tabIndex={this.open ? undefined : -1}\n              onClick={() => {\n                this.open = !this.open;\n              }}\n            />\n          </div>\n          <ul class=\"navlist\">\n            <slot />\n          </ul>\n        </div>\n        {this.isCollapsible && (\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\n        )}\n      </Host>\n    );\n  }\n}\n","button {\n  display: none;\n  width: 100%;\n  height: 100%;\n  border: none;\n  box-shadow: none;\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: transparent;\n  outline: none;\n  padding: 0;\n\n  &.user-is-tabbing:focus {\n    @include focus-style;\n  }\n\n  &:hover {\n    background-color: $button-default-hover;\n  }\n}\n\n.icon {\n  &:before {\n    @include mdi-icon;\n    content: \"\\f35c\";\n    font-size: rem-calc(24);\n    color: $button-default-text;\n  }\n}\n\n@media screen and (max-width: 1023px) {\n  :host {\n    width: rem-calc(60);\n    height: rem-calc(60);\n  }\n\n  button {\n    display: initial;\n  }\n}\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\n\n@Component({\n  tag: \"wm-navigation-hamburger\",\n  styleUrl: \"wm-navigation-hamburger.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationHamburger {\n  @Element() el!: HTMLWmNavigationHamburgerElement;\n  nav!: HTMLWmNavigationElement;\n\n  @Prop() navId?: string;\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\n\n  @State() isTabbing?: boolean = false;\n  @State() open: boolean = false;\n\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\n\n  showNavMessage = intl.formatMessage({\n    id: \"navigation.showNavigation\",\n    defaultMessage: \"Show navigation\",\n    description: \"For user interface element opening a navigation menu\",\n  });\n\n  get tooltipEl(): HTMLElement {\n    return document.getElementById(\"wm-tooltip\")!;\n  }\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  // this also works on initial load because event is fired then\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\n  handleNavigationStateChanged(ev: CustomEvent) {\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n    if (!this.navId) {\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\n    }\n  }\n\n  showTooltip() {\n    const tooltipText = this.showNavMessage;\n    this.tooltipEl.textContent = tooltipText;\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\n    this.tooltipEl.style.transitionDelay = \"500ms\";\n    this.tooltipEl.style.opacity = \"1\";\n\n    // tooltip only has a maxWidth if it contains whitespace and can break\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\n    if (hasNoWhitespace) {\n      this.tooltipEl.classList.add(\"single-word\");\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\n    } else {\n      this.tooltipEl.classList.remove(\"single-word\");\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\n    }\n\n    // tooltip is only visible after the transition delay.\n    // This also fixes an issue for keyboard users:\n    // if they tab to a button out of screen bounds, the page scrolls\n    // and hideTooltip() would be triggered before the tooltip would show\n    setTimeout(() => {\n      this.tooltipVisible = true;\n    }, 500);\n  }\n\n  hideTooltip() {\n    this.tooltipEl.style.transitionDelay = \"0s\";\n    this.tooltipEl.style.opacity = \"0\";\n    this.tooltipVisible = false;\n  }\n\n  showTooltipForKeyboardUsers() {\n    if (this.isTabbing) {\n      this.showTooltip();\n    }\n  }\n\n  handleClick() {\n    this.hideTooltip();\n    this.wmNavigationHamburgerClicked.emit();\n  }\n\n  render() {\n    return (\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\n        <button\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\n          aria-expanded={this.open}\n          aria-controls={this.navId}\n          aria-label={this.showNavMessage}\n          onMouseEnter={() => this.showTooltip()}\n          onMouseLeave={() => this.hideTooltip()}\n          onFocus={() => this.showTooltipForKeyboardUsers()}\n          onBlur={() => this.hideTooltip()}\n          onClick={() => this.handleClick()}\n        >\n          <span class=\"icon\"></span>\n        </button>\n      </Host>\n    );\n  }\n}\n",".link {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  color: inherit;\n  text-decoration: none;\n  min-height: rem-calc(72);\n  text-align: center;\n  padding: 1.25rem 0.5rem;\n  font-weight: 500;\n  outline: none;\n  position: relative;\n\n  &:hover {\n    background-color: $light-background-hover;\n  }\n\n  .icon {\n    font-size: rem-calc(22);\n    color: $sidenav-icon;\n  }\n\n  .text {\n    font-size: rem-calc(14);\n  }\n\n  &.user-is-tabbing:focus {\n    // from P&SS\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\n  }\n}\n\n.link.active {\n  background-color: $pale-lilac-gray;\n  &:before {\n    content: \"\";\n    // link to or create semantic name\n    background-color: $periwinkle;\n    position: absolute;\n    height: 100%;\n    width: 5px;\n    left: 0;\n  }\n\n  .text {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n\n  .icon {\n    // link to or create semantic name\n    color: $periwinkle;\n  }\n}\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-navigation-item\",\n  styleUrl: \"wm-navigation-item.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class NavigationItem {\n  @Element() el!: HTMLWmNavigationItemElement;\n  @Prop() href?: string;\n  @Prop() text?: string;\n  @Prop() active?: boolean;\n\n  @State() isTabbing?: boolean = false;\n  @Event() wmNavigationItemClicked!: EventEmitter;\n\n  @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n  toggleTabbingOn() {\n    this.isTabbing = true;\n  }\n\n  @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n  toggleTabbingOff() {\n    this.isTabbing = false;\n  }\n\n  componentWillLoad() {\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\n      this.toggleTabbingOn();\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <a\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n          href={this.href}\n          onClick={() => this.wmNavigationItemClicked.emit()}\n        >\n          <div class=\"icon\" aria-hidden=\"true\">\n            <slot />\n          </div>\n          <div class=\"text\">{this.text}</div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["wmNavigationCss","Navigation","this","mainNavigationMessage","intl","formatMessage","id","defaultMessage","description","openTooltipMessage","closeTooltipMessage","throttledRerender","throttle","forceUpdate","_this","el","Object","defineProperty","prototype","window","innerWidth","isCollapsible","open","toString","undefined","toggleTabbingOn","isTabbing","toggleTabbingOff","closeOnEscape","ev","key","handleWindowResize","handleHamburgerClicked","handleClickOnItem","handleStateChange","wmNavigationStateChanged","emit","expand","collapse","componentWillLoad","document","body","classList","contains","focus","btn","shadowRoot","querySelector","firstItem","redirectFocusFromBody","activeElement","tagName","relatedTarget","tabIndex","addEventListener","bind","setTimeout","toggleEl","removeEventListener","hamburgerBtn","focusLastItem","items","querySelectorAll","lastItem","Array","from","pop","renderOverlay","h","class","onClick","render","Host","role","ariaExpanded","tabindex","onFocus","ref","concat","icon","tooltip","wmNavigationHamburgerCss","NavigationHamburger","showNavMessage","getElementById","handleNavigationStateChanged","target","navId","console","error","showTooltip","tooltipText","tooltipEl","textContent","style","setProperty","transitionDelay","opacity","hasNoWhitespace","match","add","remove","removeProperty","tooltipVisible","hideTooltip","showTooltipForKeyboardUsers","handleClick","wmNavigationHamburgerClicked","onMouseEnter","onMouseLeave","onBlur","wmNavigationItemCss","NavigationItem","active","href","wmNavigationItemClicked","text"],"sources":["src/components/wm-navigation/wm-navigation.scss?tag=wm-navigation&encapsulation=shadow","src/components/wm-navigation/wm-navigation.tsx","src/components/wm-navigation/wm-navigation-hamburger.scss?tag=wm-navigation-hamburger&encapsulation=shadow","src/components/wm-navigation/wm-navigation-hamburger.tsx","src/components/wm-navigation/wm-navigation-item.scss?tag=wm-navigation-item&encapsulation=shadow","src/components/wm-navigation/wm-navigation-item.tsx"],"sourcesContent":[":host {\r\n  z-index: 10;\r\n}\r\n\r\n:host([aria-expanded=\"true\"]) {\r\n  z-index: 5000;\r\n}\r\n\r\n.tray {\r\n  @include box-shadow(0 0 14px 0 rgba(0, 0, 0, 0.14));\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: rem-calc(121);\r\n  background-color: $light-background;\r\n  overflow-x: hidden;\r\n  overflow-y: auto;\r\n  -webkit-overflow-scrolling: touch;\r\n  font-size: rem-calc(14);\r\n  height: 100%;\r\n}\r\n\r\n.navlist {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.toggle-wrapper {\r\n  display: none;\r\n}\r\n\r\n/* COLLAPSIBLE STYLES */\r\n@media screen and (max-width: 1023px) {\r\n  .tray {\r\n    @include transition(transform 0.33s ease);\r\n    position: fixed;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    transform: translateX(-100%);\r\n\r\n    ul {\r\n      visibility: hidden;\r\n    }\r\n\r\n    .toggle-wrapper {\r\n      display: inline-block;\r\n      min-height: 5rem;\r\n      width: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n  }\r\n\r\n  :host([aria-expanded=\"true\"]) {\r\n    .tray {\r\n      transform: translateX(0);\r\n\r\n      ul {\r\n        visibility: visible;\r\n      }\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: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\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  }\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  Element,\r\n  Prop,\r\n  State,\r\n  Listen,\r\n  Host,\r\n  Watch,\r\n  Event,\r\n  EventEmitter,\r\n  forceUpdate,\r\n} from \"@stencil/core\";\r\nimport { intl, throttle } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation\",\r\n  styleUrl: \"wm-navigation.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class Navigation {\r\n  @Element() el!: HTMLWmNavigationElement;\r\n  toggleEl!: HTMLWmButtonElement;\r\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\r\n\r\n  @State() isTabbing: boolean = false;\r\n  @Event() wmNavigationStateChanged!: EventEmitter;\r\n\r\n  private mainNavigationMessage: string = intl.formatMessage({\r\n    id: \"navigation.mainNavigation\",\r\n    defaultMessage: \"Main\",\r\n    description: \"Label describing the site navigation, for screen reader users\",\r\n  });\r\n\r\n  private openTooltipMessage: string = intl.formatMessage({\r\n    id: \"global.openVerb\",\r\n    defaultMessage: \"Open\",\r\n    description: \"For a button, to open a user interface element\",\r\n  });\r\n\r\n  private closeTooltipMessage: 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\r\n  get isCollapsible() {\r\n    return window.innerWidth < 1024;\r\n  }\r\n\r\n  get ariaExpanded() {\r\n    return this.isCollapsible\r\n      ? // if component is in collapsible mode, set aria-expanded according to expanded state\r\n        this.open.toString()\r\n      : // otherwise, do not render attr at all\r\n        undefined;\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  closeOnEscape(ev: KeyboardEvent) {\r\n    if (ev.key === \"Escape\") {\r\n      this.open = false;\r\n    }\r\n  }\r\n\r\n  throttledRerender = throttle(() => forceUpdate(this.el), 50);\r\n\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  handleWindowResize() {\r\n    // for component to react when breakpoint is crossed\r\n    // (doesn't rerender on window resize)\r\n    this.throttledRerender();\r\n  }\r\n\r\n  @Listen(\"wmNavigationHamburgerClicked\", { target: \"window\" })\r\n  handleHamburgerClicked() {\r\n    this.open = !this.open;\r\n  }\r\n\r\n  @Listen(\"wmNavigationItemClicked\")\r\n  handleClickOnItem() {\r\n    this.open = false;\r\n  }\r\n\r\n  @Watch(\"open\")\r\n  handleStateChange() {\r\n    if (this.isCollapsible) {\r\n      this.wmNavigationStateChanged.emit();\r\n      this.open ? this.expand() : this.collapse();\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the appropriate element based on the navigation's state\r\n      const btn = this.open\r\n        ? (this.el.shadowRoot!.querySelector(\".toggle\")! as HTMLWmButtonElement)\r\n        : (document.querySelector(\"wm-navigation-hamburger\") as HTMLWmNavigationHamburgerElement);\r\n      const firstItem = this.el.querySelector(\"wm-navigation-item\")! as HTMLWmNavigationItemElement;\r\n      this.isCollapsible ? btn.focus() : firstItem.focus();\r\n    };\r\n\r\n    if (this.isCollapsible && this.open) {\r\n      // hamburger needs to know if open was initially set to true\r\n      this.wmNavigationStateChanged.emit();\r\n      this.expand();\r\n    }\r\n  }\r\n\r\n  redirectFocusFromBody(ev: FocusEvent) {\r\n    // the 2nd check excludes the case when user clicks on the page when the nav is open,\r\n    // which should not redirect focus\r\n    if ((document.activeElement as HTMLElement).tagName === \"BODY\" && !ev.relatedTarget) {\r\n      this.el.focus();\r\n    }\r\n  }\r\n\r\n  expand() {\r\n    // listen to focus on body and redirect to the component\r\n    // this is to handle trap focus when user has left the page (e.g. went to the address bar)\r\n    // and is tabbing back in\r\n    document.body.tabIndex = 0;\r\n    document.body.addEventListener(\"focus\", this.redirectFocusFromBody.bind(this), true);\r\n\r\n    // wait for nav to be expanded otherwise tooltip will be misplaced.\r\n    setTimeout(() => this.toggleEl.focus(), 250);\r\n    //document.querySelector(\"wm-navigation\")!.shadowRoot!.querySelector(\".toggle\")!.focus()\r\n  }\r\n\r\n  collapse() {\r\n    // rm event listener on body\r\n    document.body.tabIndex = -1;\r\n    document.body.removeEventListener(\"focus\", this.redirectFocusFromBody.bind(this));\r\n\r\n    const hamburgerBtn = document.querySelector(\"wm-navigation-hamburger\");\r\n    // should fail silently if el doesn't exist\r\n    // (dev may have chosen not to use the hamburger component)\r\n    if (hamburgerBtn) hamburgerBtn.focus();\r\n  }\r\n\r\n  focusLastItem() {\r\n    const items = this.el.querySelectorAll(\"wm-navigation-item\");\r\n    const lastItem = Array.from(items).pop() as HTMLWmNavigationItemElement;\r\n    lastItem.focus();\r\n  }\r\n\r\n  renderOverlay() {\r\n    return (\r\n      <div\r\n        class=\"overlay\"\r\n        onClick={() => {\r\n          this.open = false;\r\n        }}\r\n      ></div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"navigation\" aria-expanded={this.ariaExpanded} aria-label={this.mainNavigationMessage}>\r\n        {this.open ? this.renderOverlay() : \"\"}\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.focusLastItem()}></div>\r\n        )}\r\n        <div class=\"tray\">\r\n          <div class=\"toggle-wrapper\">\r\n            <wm-button\r\n              ref={(el) => (this.toggleEl = el as HTMLWmButtonElement)}\r\n              class={`toggle ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n              button-type=\"navigational\"\r\n              icon={this.open ? \"f156\" : \"f35c\"}\r\n              icon-size=\"2rem\"\r\n              tooltip={this.open ? this.closeTooltipMessage : this.openTooltipMessage}\r\n              tooltip-position=\"left\"\r\n              tabIndex={this.open ? undefined : -1}\r\n              onClick={() => {\r\n                this.open = !this.open;\r\n              }}\r\n            />\r\n          </div>\r\n          <ul class=\"navlist\">\r\n            <slot />\r\n          </ul>\r\n        </div>\r\n        {this.isCollapsible && (\r\n          <div class=\"trapfocus\" tabindex={this.open ? 0 : undefined} onFocus={() => this.toggleEl.focus()}></div>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n","button {\r\n  display: none;\r\n  width: 100%;\r\n  height: 100%;\r\n  border: none;\r\n  box-shadow: none;\r\n  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);\r\n  background-color: transparent;\r\n  outline: none;\r\n  padding: 0;\r\n\r\n  &.user-is-tabbing:focus {\r\n    @include focus-style;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: $button-default-hover;\r\n  }\r\n}\r\n\r\n.icon {\r\n  &:before {\r\n    @include mdi-icon;\r\n    content: \"\\f35c\";\r\n    font-size: rem-calc(24);\r\n    color: $button-default-text;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: 1023px) {\r\n  :host {\r\n    width: rem-calc(60);\r\n    height: rem-calc(60);\r\n  }\r\n\r\n  button {\r\n    display: initial;\r\n  }\r\n}\r\n","import { h, Component, Element, Host, Prop, Listen, Event, EventEmitter, State } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-hamburger\",\r\n  styleUrl: \"wm-navigation-hamburger.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationHamburger {\r\n  @Element() el!: HTMLWmNavigationHamburgerElement;\r\n  nav!: HTMLWmNavigationElement;\r\n\r\n  @Prop() navId?: string;\r\n  @Prop({ mutable: true }) tooltipVisible = false; // this is not part of the documented API but we need to expose as prop in order to change it from the focus method defined in WillLoad()\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @State() open: boolean = false;\r\n\r\n  @Event() wmNavigationHamburgerClicked!: EventEmitter;\r\n\r\n  showNavMessage = intl.formatMessage({\r\n    id: \"navigation.showNavigation\",\r\n    defaultMessage: \"Show navigation\",\r\n    description: \"For user interface element opening a navigation menu\",\r\n  });\r\n\r\n  get tooltipEl(): HTMLElement {\r\n    return document.getElementById(\"wm-tooltip\")!;\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  // this also works on initial load because event is fired then\r\n  @Listen(\"wmNavigationStateChanged\", { target: \"document\" })\r\n  handleNavigationStateChanged(ev: CustomEvent) {\r\n    this.open = (ev.target! as HTMLWmNavigationElement).open;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n    if (!this.navId) {\r\n      console.error(\"wm-navigation-hamburger: nav-id is a required prop\");\r\n    }\r\n  }\r\n\r\n  showTooltip() {\r\n    const tooltipText = this.showNavMessage;\r\n    this.tooltipEl.textContent = tooltipText;\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipTop\", \"1.125rem\");\r\n    this.tooltipEl.style.setProperty(\"--wmTooltipLeft\", \"2.75rem\");\r\n    this.tooltipEl.style.transitionDelay = \"500ms\";\r\n    this.tooltipEl.style.opacity = \"1\";\r\n\r\n    // tooltip only has a maxWidth if it contains whitespace and can break\r\n    const hasNoWhitespace = tooltipText!.match(/^[^\\s]+$/);\r\n    if (hasNoWhitespace) {\r\n      this.tooltipEl.classList.add(\"single-word\");\r\n      this.tooltipEl.style.setProperty(\"--wmTooltipMaxWidth\", \"none\");\r\n    } else {\r\n      this.tooltipEl.classList.remove(\"single-word\");\r\n      this.tooltipEl.style.removeProperty(\"--wmTooltipMaxWidth\");\r\n    }\r\n\r\n    // tooltip is only visible after the transition delay.\r\n    // This also fixes an issue for keyboard users:\r\n    // if they tab to a button out of screen bounds, the page scrolls\r\n    // and hideTooltip() would be triggered before the tooltip would show\r\n    setTimeout(() => {\r\n      this.tooltipVisible = true;\r\n    }, 500);\r\n  }\r\n\r\n  hideTooltip() {\r\n    this.tooltipEl.style.transitionDelay = \"0s\";\r\n    this.tooltipEl.style.opacity = \"0\";\r\n    this.tooltipVisible = false;\r\n  }\r\n\r\n  showTooltipForKeyboardUsers() {\r\n    if (this.isTabbing) {\r\n      this.showTooltip();\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.hideTooltip();\r\n    this.wmNavigationHamburgerClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`hamburger ${this.open ? \"nav-open\" : \"nav-closed\"}`}>\r\n        <button\r\n          class={this.isTabbing ? \"user-is-tabbing\" : undefined}\r\n          aria-expanded={this.open}\r\n          aria-controls={this.navId}\r\n          aria-label={this.showNavMessage}\r\n          onMouseEnter={() => this.showTooltip()}\r\n          onMouseLeave={() => this.hideTooltip()}\r\n          onFocus={() => this.showTooltipForKeyboardUsers()}\r\n          onBlur={() => this.hideTooltip()}\r\n          onClick={() => this.handleClick()}\r\n        >\r\n          <span class=\"icon\"></span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",".link {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  color: inherit;\r\n  text-decoration: none;\r\n  min-height: rem-calc(72);\r\n  text-align: center;\r\n  padding: 1.25rem 0.5rem;\r\n  font-weight: 500;\r\n  outline: none;\r\n  position: relative;\r\n\r\n  &:hover {\r\n    background-color: $light-background-hover;\r\n  }\r\n\r\n  .icon {\r\n    font-size: rem-calc(22);\r\n    color: $sidenav-icon;\r\n  }\r\n\r\n  .text {\r\n    font-size: rem-calc(14);\r\n  }\r\n\r\n  &.user-is-tabbing:focus {\r\n    // from P&SS\r\n    box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%), inset 0 0 4px 3px #61279e;\r\n  }\r\n}\r\n\r\n.link.active {\r\n  background-color: $pale-lilac-gray;\r\n  &:before {\r\n    content: \"\";\r\n    // link to or create semantic name\r\n    background-color: $periwinkle;\r\n    position: absolute;\r\n    height: 100%;\r\n    width: 5px;\r\n    left: 0;\r\n  }\r\n\r\n  .text {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n\r\n  .icon {\r\n    // link to or create semantic name\r\n    color: $periwinkle;\r\n  }\r\n}\r\n","import { h, Component, Prop, Element, Host, State, Listen, Event, EventEmitter } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-navigation-item\",\r\n  styleUrl: \"wm-navigation-item.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class NavigationItem {\r\n  @Element() el!: HTMLWmNavigationItemElement;\r\n  @Prop() href?: string;\r\n  @Prop() text?: string;\r\n  @Prop() active?: boolean;\r\n\r\n  @State() isTabbing?: boolean = false;\r\n  @Event() wmNavigationItemClicked!: EventEmitter;\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  componentWillLoad() {\r\n    if (document.body.classList.contains(\"wmcl-user-is-tabbing\")) {\r\n      this.toggleTabbingOn();\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host role=\"listitem\">\r\n        <a\r\n          class={`link ${this.active ? \"active\" : \"\"} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\r\n          href={this.href}\r\n          onClick={() => this.wmNavigationItemClicked.emit()}\r\n        >\r\n          <div class=\"icon\" aria-hidden=\"true\">\r\n            <slot />\r\n          </div>\r\n          <div class=\"text\">{this.text}</div>\r\n        </a>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,r,o){function n(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,i){function a(t){try{u(o.next(t))}catch(t){i(t)}}function s(t){try{u(o["throw"](t))}catch(t){i(t)}}function u(t){t.done?r(t.value):n(t.value).then(a,s)}u((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,n,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(o=1,n&&(i=s[0]&2?n["return"]:s[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;if(n=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;n=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(i=r.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){r.label=s[1];break}if(s[0]===6&&r.label<i[1]){r.label=i[1];i=s;break}if(i&&r.label<i[2]){r.label=i[2];r.ops.push(s);break}if(i[2])r.ops.pop();r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t];n=0}finally{o=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{a as getWmMode}from"./interfaces-61c6305b.js";import{k as snakeCaseToCamelCase,l as getNewIndexToFocus,i as intl}from"./functions-c58046f2.js";import{g as getRequest}from"./http-service-5d037e16.js";var wmNavigatorCss=":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";var Navigator=function(){function t(t){registerInstance(this,t);this.wmNavigatorLogout=createEvent(this,"wmNavigatorLogout",7);this.retrievedInfo=!this.loadFromUserinfo;this.parsedProducts=[];this.openRight=false;this.userName=undefined;this.email=undefined;this.authType=1;this.connectionName=undefined;this.logoutUrl=undefined;this.products=undefined;this.loadFromUserinfo=false;this.isOpen=false;this.isTabbing=false;this.itemIndexToFocus=0}t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.userName){console.error("wm-navigator: user-name is a required property.")}return[4,this.parseData()];case 1:t.sent();this.setFocusIndex();return[2]}}))}))};t.prototype.parseData=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){switch(e.label){case 0:if(!!!this.loadFromUserinfo)return[3,2];return[4,getRequest("/platform/navigator/userinfo").then((function(e){t.email=e.email;t.currentProductId=e.current_product_id;t.parsedProducts=t.productKeysToCamelCase(e.products);t.logoutUrl=t.logoutUrl?t.logoutUrl:e.logout_url;t.connectionName=t.connectionName?t.connectionName:e.connection_name;if(!!t.email&&!!t.currentProductId){t.retrievedInfo=true}})).catch((function(t){console.error(t)}))];case 1:e.sent();return[3,3];case 2:this.currentProductId=getWmMode(this.el);if(!!this.products){if(typeof this.products==="string"){this.parsedProducts=JSON.parse(this.products)}else{this.parsedProducts=this.products}this.parsedProducts=this.productKeysToCamelCase(this.parsedProducts)}e.label=3;case 3:this.parsedProducts.sort((function(t,e){return t.name<e.name?-1:1}));return[2]}}))}))};t.prototype.productKeysToCamelCase=function(t){t=t.map((function(t){var e=Object.keys(t);var r={};e.forEach((function(e){r[snakeCaseToCamelCase(e)]=t[e]}));return r}));return t};t.prototype.setFocusIndex=function(){if(this.parsedProducts.length>1){var t=this.getProduct(this.currentProductId);if(t){this.itemIndexToFocus=this.parsedProducts.indexOf(t)}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleKeys=function(t){switch(t.key){case"Escape":t.preventDefault();this.closeMenu();break;case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen){this.itemIndexToFocus=getNewIndexToFocus(this.itemIndexToFocus,t.key,this.navigatorItems.length);this.openMenu()}break}};t.prototype.handleKeydown=function(t){var e=t.detail.key;var r=t.detail.navItem;switch(e){case"Tab":this.closeMenu();break;case"Enter":case" ":r.click();break;case"ArrowDown":case"ArrowUp":var o=this.itemIndexToFocus;this.itemIndexToFocus=getNewIndexToFocus(this.itemIndexToFocus,e,this.navigatorItems.length);this.focusItem();this.unfocusItem(o);break}};t.prototype.handleClick=function(t){var e=t.target===this.el||this.el.contains(t.target);if(!e&&this.isOpen){this.closeMenu()}};t.prototype.handleButtonClick=function(){this.isOpen?this.closeMenu():this.openMenu()};t.prototype.openMenu=function(){if(this.wrapperEl){var t=this.wrapperEl.clientWidth;var e=this.el.getBoundingClientRect().left;var r=document.documentElement.clientWidth-this.el.getBoundingClientRect().right;this.openRight=t>e&&r>e}this.isOpen=true;this.focusItem()};t.prototype.closeMenu=function(){this.isOpen=false;this.buttonFocusHandler();this.unfocusItem(this.itemIndexToFocus);this.setFocusIndex()};t.prototype.focusItem=function(){var t=this.navigatorItems[this.itemIndexToFocus];t.tabIndex=0;t.focused=true;window.requestAnimationFrame((function(){return t.focus()}))};t.prototype.unfocusItem=function(t){var e=this.navigatorItems[t];e.tabIndex=-1;e.focused=false};t.prototype.buttonFocusHandler=function(){var t=this.el.shadowRoot.querySelector("priv-navigator-button");var e=t.shadowRoot.querySelector("button");window.requestAnimationFrame((function(){return e.focus()}))};t.prototype.renderUserInfo=function(){return h("div",{class:"user",id:"wm-nav-user","aria-label":intl.formatMessage({id:"navigator.userinfoLabel",defaultMessage:"for {name}, email {email}"},{name:this.userName,email:this.email})},h("p",null,this.userName),h("p",null,this.email))};t.prototype.setAltText=function(){if(this.parsedProducts.length>1){return intl.formatMessage({id:"navigator.userinfoAndProductNavigator",defaultMessage:"User information and product navigator"})}else{return intl.formatMessage({id:"navigator.userinfo",defaultMessage:"User information"})}};t.prototype.renderHeading=function(){return h("h2",null,intl.formatMessage({id:"navigator.watermarkApps",defaultMessage:"Watermark Apps",description:"Applications made by Watermark Insights"}))};t.prototype.renderList=function(){return h("ul",{role:"listbox","aria-label":"".concat(intl.formatMessage({id:"navigator.WatermarkAppNavigation",defaultMessage:"Watermark App Navigation",description:"list of applications by Watermark Insights"})),"aria-describedby":"wm-nav-user"},this.parsedProducts.length>1&&this.renderProductOptions(),this.renderLogoutOption())};t.prototype.renderProductOptions=function(){var t=this;return this.parsedProducts.map((function(e){var r,o,n,i;r=e.name;o=e.iconUrl;i=t.setProductOnClick(e.id);if(!!r&&!!o){n=t.currentProductId===e.id;return h("priv-navigator-item",{selected:n,id:e.id,onClick:i,role:"option","aria-label":r},h("img",{src:o,alt:r}))}}))};t.prototype.setProductOnClick=function(t){var e=this.getProduct(t);if(this.currentProductId===t){return function(){}}else if(e){if(!!this.loadFromUserinfo||this.authType===2){return function(){return window.location.href=e.linkUrl}}else if(this.authType===3){var r=this.connectionName?"/?connection_name=".concat(this.connectionName):"";return function(){return window.location.href=e.samlLinkUrl+r}}}};t.prototype.renderLogoutOption=function(){return h("priv-navigator-item",{class:"logout",selected:!(this.parsedProducts.length>1),id:"nav-logout",onClick:this.setLogoutOnclick(),role:"option"},h("span",{class:"logout"},intl.formatMessage({id:"navigator.logout",defaultMessage:"Log Out"})))};t.prototype.setLogoutOnclick=function(){var t=this;return function(){t.wmNavigatorLogout.emit();if(t.logoutUrl){window.location.href=t.logoutUrl}}};Object.defineProperty(t.prototype,"navigatorItems",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"))},enumerable:false,configurable:true});t.prototype.getProduct=function(t){return this.parsedProducts.find((function(e){return e.id===t}))};t.prototype.render=function(){var t=this;return this.retrievedInfo?h(Host,{class:this.isTabbing?"user-is-tabbing":""},h("priv-navigator-button",{expanded:this.isOpen,altText:this.setAltText(),isTabbing:this.isTabbing}),h("div",{class:"wrapper ".concat(this.isOpen?"":"hide"," ").concat(this.openRight?"right":""),ref:function(e){return t.wrapperEl=e}},this.renderUserInfo(),this.parsedProducts.length>1&&this.renderHeading(),this.renderList())):""};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{products:["parseData"]}},enumerable:false,configurable:true});return t}();Navigator.style=wmNavigatorCss;export{Navigator as wm_navigator};
+var __awaiter=this&&this.__awaiter||function(t,e,r,o){function n(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,i){function a(t){try{u(o.next(t))}catch(t){i(t)}}function s(t){try{u(o["throw"](t))}catch(t){i(t)}}function u(t){t.done?r(t.value):n(t.value).then(a,s)}u((o=o.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(i[0]&1)throw i[1];return i[1]},trys:[],ops:[]},o,n,i,a;return a={next:s(0),throw:s(1),return:s(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function s(t){return function(e){return u([t,e])}}function u(s){if(o)throw new TypeError("Generator is already executing.");while(a&&(a=0,s[0]&&(r=0)),r)try{if(o=1,n&&(i=s[0]&2?n["return"]:s[0]?n["throw"]||((i=n["return"])&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;if(n=0,i)s=[s[0]&2,i.value];switch(s[0]){case 0:case 1:i=s;break;case 4:r.label++;return{value:s[1],done:false};case 5:r.label++;n=s[1];s=[0];continue;case 7:s=r.ops.pop();r.trys.pop();continue;default:if(!(i=r.trys,i=i.length>0&&i[i.length-1])&&(s[0]===6||s[0]===2)){r=0;continue}if(s[0]===3&&(!i||s[1]>i[0]&&s[1]<i[3])){r.label=s[1];break}if(s[0]===6&&r.label<i[1]){r.label=i[1];i=s;break}if(i&&r.label<i[2]){r.label=i[2];r.ops.push(s);break}if(i[2])r.ops.pop();r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t];n=0}finally{o=i=0}if(s[0]&5)throw s[1];return{value:s[0]?s[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-84a6ae22.js";import{a as getWmMode}from"./interfaces-2b97fab2.js";import{k as snakeCaseToCamelCase,l as getNewIndexToFocus,i as intl}from"./functions-1c41e984.js";import{g as getRequest}from"./http-service-3dc3b3e7.js";var wmNavigatorCss=":host,wm-navigator{min-width:0;position:relative;display:inline-block}:host .wrapper,wm-navigator .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:#fff;letter-spacing:normal;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user,wm-navigator .wrapper .user{background:#f4f4f4;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p,wm-navigator .wrapper .user p{margin:0}:host .wrapper .user p:first-child,wm-navigator .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2,wm-navigator .wrapper h2{background:#2e1b46;color:#fff;font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox],wm-navigator .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide,wm-navigator .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right,wm-navigator .wrapper.right{right:auto;left:20px}:host img,wm-navigator img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout,wm-navigator .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";var Navigator=function(){function t(t){registerInstance(this,t);this.wmNavigatorLogout=createEvent(this,"wmNavigatorLogout",7);this.retrievedInfo=!this.loadFromUserinfo;this.parsedProducts=[];this.openRight=false;this.userName=undefined;this.email=undefined;this.authType=1;this.connectionName=undefined;this.logoutUrl=undefined;this.products=undefined;this.loadFromUserinfo=false;this.isOpen=false;this.isTabbing=false;this.itemIndexToFocus=0}t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:if(!this.userName){console.error("wm-navigator: user-name is a required property.")}return[4,this.parseData()];case 1:t.sent();this.setFocusIndex();return[2]}}))}))};t.prototype.parseData=function(){return __awaiter(this,void 0,void 0,(function(){var t=this;return __generator(this,(function(e){switch(e.label){case 0:if(!!!this.loadFromUserinfo)return[3,2];return[4,getRequest("/platform/navigator/userinfo").then((function(e){t.email=e.email;t.currentProductId=e.current_product_id;t.parsedProducts=t.productKeysToCamelCase(e.products);t.logoutUrl=t.logoutUrl?t.logoutUrl:e.logout_url;t.connectionName=t.connectionName?t.connectionName:e.connection_name;if(!!t.email&&!!t.currentProductId){t.retrievedInfo=true}})).catch((function(t){console.error(t)}))];case 1:e.sent();return[3,3];case 2:this.currentProductId=getWmMode(this.el);if(!!this.products){if(typeof this.products==="string"){this.parsedProducts=JSON.parse(this.products)}else{this.parsedProducts=this.products}this.parsedProducts=this.productKeysToCamelCase(this.parsedProducts)}e.label=3;case 3:this.parsedProducts.sort((function(t,e){return t.name<e.name?-1:1}));return[2]}}))}))};t.prototype.productKeysToCamelCase=function(t){t=t.map((function(t){var e=Object.keys(t);var r={};e.forEach((function(e){r[snakeCaseToCamelCase(e)]=t[e]}));return r}));return t};t.prototype.setFocusIndex=function(){if(this.parsedProducts.length>1){var t=this.getProduct(this.currentProductId);if(t){this.itemIndexToFocus=this.parsedProducts.indexOf(t)}}};t.prototype.toggleTabbingOn=function(){this.isTabbing=true};t.prototype.toggleTabbingOff=function(){this.isTabbing=false};t.prototype.handleKeys=function(t){switch(t.key){case"Escape":t.preventDefault();this.closeMenu();break;case"ArrowDown":case"ArrowUp":t.preventDefault();if(!this.isOpen){this.itemIndexToFocus=getNewIndexToFocus(this.itemIndexToFocus,t.key,this.navigatorItems.length);this.openMenu()}break}};t.prototype.handleKeydown=function(t){var e=t.detail.key;var r=t.detail.navItem;switch(e){case"Tab":this.closeMenu();break;case"Enter":case" ":r.click();break;case"ArrowDown":case"ArrowUp":var o=this.itemIndexToFocus;this.itemIndexToFocus=getNewIndexToFocus(this.itemIndexToFocus,e,this.navigatorItems.length);this.focusItem();this.unfocusItem(o);break}};t.prototype.handleClick=function(t){var e=t.target===this.el||this.el.contains(t.target);if(!e&&this.isOpen){this.closeMenu()}};t.prototype.handleButtonClick=function(){this.isOpen?this.closeMenu():this.openMenu()};t.prototype.openMenu=function(){if(this.wrapperEl){var t=this.wrapperEl.clientWidth;var e=this.el.getBoundingClientRect().left;var r=document.documentElement.clientWidth-this.el.getBoundingClientRect().right;this.openRight=t>e&&r>e}this.isOpen=true;this.focusItem()};t.prototype.closeMenu=function(){this.isOpen=false;this.buttonFocusHandler();this.unfocusItem(this.itemIndexToFocus);this.setFocusIndex()};t.prototype.focusItem=function(){var t=this.navigatorItems[this.itemIndexToFocus];t.tabIndex=0;t.focused=true;window.requestAnimationFrame((function(){return t.focus()}))};t.prototype.unfocusItem=function(t){var e=this.navigatorItems[t];e.tabIndex=-1;e.focused=false};t.prototype.buttonFocusHandler=function(){var t=this.el.shadowRoot.querySelector("priv-navigator-button");var e=t.shadowRoot.querySelector("button");window.requestAnimationFrame((function(){return e.focus()}))};t.prototype.renderUserInfo=function(){return h("div",{class:"user",id:"wm-nav-user","aria-label":intl.formatMessage({id:"navigator.userinfoLabel",defaultMessage:"for {name}, email {email}"},{name:this.userName,email:this.email})},h("p",null,this.userName),h("p",null,this.email))};t.prototype.setAltText=function(){if(this.parsedProducts.length>1){return intl.formatMessage({id:"navigator.userinfoAndProductNavigator",defaultMessage:"User information and product navigator"})}else{return intl.formatMessage({id:"navigator.userinfo",defaultMessage:"User information"})}};t.prototype.renderHeading=function(){return h("h2",null,intl.formatMessage({id:"navigator.watermarkApps",defaultMessage:"Watermark Apps",description:"Applications made by Watermark Insights"}))};t.prototype.renderList=function(){return h("ul",{role:"listbox","aria-label":"".concat(intl.formatMessage({id:"navigator.WatermarkAppNavigation",defaultMessage:"Watermark App Navigation",description:"list of applications by Watermark Insights"})),"aria-describedby":"wm-nav-user"},this.parsedProducts.length>1&&this.renderProductOptions(),this.renderLogoutOption())};t.prototype.renderProductOptions=function(){var t=this;return this.parsedProducts.map((function(e){var r,o,n,i;r=e.name;o=e.iconUrl;i=t.setProductOnClick(e.id);if(!!r&&!!o){n=t.currentProductId===e.id;return h("priv-navigator-item",{selected:n,id:e.id,onClick:i,role:"option","aria-label":r},h("img",{src:o,alt:r}))}}))};t.prototype.setProductOnClick=function(t){var e=this.getProduct(t);if(this.currentProductId===t){return function(){}}else if(e){if(!!this.loadFromUserinfo||this.authType===2){return function(){return window.location.href=e.linkUrl}}else if(this.authType===3){var r=this.connectionName?"/?connection_name=".concat(this.connectionName):"";return function(){return window.location.href=e.samlLinkUrl+r}}}};t.prototype.renderLogoutOption=function(){return h("priv-navigator-item",{class:"logout",selected:!(this.parsedProducts.length>1),id:"nav-logout",onClick:this.setLogoutOnclick(),role:"option"},h("span",{class:"logout"},intl.formatMessage({id:"navigator.logout",defaultMessage:"Log Out"})))};t.prototype.setLogoutOnclick=function(){var t=this;return function(){t.wmNavigatorLogout.emit();if(t.logoutUrl){window.location.href=t.logoutUrl}}};Object.defineProperty(t.prototype,"navigatorItems",{get:function(){return Array.from(this.el.shadowRoot.querySelectorAll("priv-navigator-item"))},enumerable:false,configurable:true});t.prototype.getProduct=function(t){return this.parsedProducts.find((function(e){return e.id===t}))};t.prototype.render=function(){var t=this;return this.retrievedInfo?h(Host,{class:this.isTabbing?"user-is-tabbing":""},h("priv-navigator-button",{expanded:this.isOpen,altText:this.setAltText(),isTabbing:this.isTabbing}),h("div",{class:"wrapper ".concat(this.isOpen?"":"hide"," ").concat(this.openRight?"right":""),ref:function(e){return t.wrapperEl=e}},this.renderUserInfo(),this.parsedProducts.length>1&&this.renderHeading(),this.renderList())):""};Object.defineProperty(t,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(t.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{products:["parseData"]}},enumerable:false,configurable:true});return t}();Navigator.style=wmNavigatorCss;export{Navigator as wm_navigator};
 //# sourceMappingURL=wm-navigator.entry.js.map