@watermarkinsights/ripple 3.6.0 → 3.7.0-0

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

@@ -1,141 +1,141 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-66f8130e.js';
-import { i as intl, g as generateId, e as isRelatedTarget } from './functions-122ab496.js';
+import { i as intl, g as generateId, e as isRelatedTarget } from './functions-cbfc81d1.js';
 
 const wmInputCss = "@charset \"UTF-8\";:host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;flex-direction:column;font-size:0.875rem}:host .wrapper .label,wm-input .wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}:host .wrapper .label .required,wm-input .wrapper .label .required{color:#c0392b}:host .wrapper.label-left,wm-input .wrapper.label-left{flex-direction:row}:host .wrapper.label-left .label-wrapper,wm-input .wrapper.label-left .label-wrapper{line-height:2.5rem}:host .wrapper.label-left .label-wrapper .label,wm-input .wrapper.label-left .label-wrapper .label{display:flex;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}:host .wrapper.label-none label,wm-input .wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}:host .wrapper.invalid .label,wm-input .wrapper.invalid .label{color:#c0392b}:host .wrapper.invalid .label:after,wm-input .wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\";margin-left:0.3125rem}[dir=RTL] :host .wrapper.invalid .label:after,[dir=RTL] wm-input .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}:host .wrapper.rtl.label-left .label,wm-input .wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}:host .wrapper .inner-wrapper,wm-input .wrapper .inner-wrapper{width:100%}:host .wrapper .inputfield-wrapper,wm-input .wrapper .inputfield-wrapper{height:2.5rem;border:1px solid #4a4a4a;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:flex;align-items:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;align-self:stretch}:host .wrapper input,wm-input .wrapper input{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:none;font-family:inherit;font-size:0.875rem;height:100%;flex:1;padding:0.75rem 1rem;width:100%}:host .wrapper input:disabled,wm-input .wrapper input:disabled{background-color:#f0f0f0;color:#737373}:host .wrapper input:focus,wm-input .wrapper input:focus{outline:none}:host .wrapper .info,wm-input .wrapper .info{font-style:italic;line-height:100%;margin:4px 0}:host .wrapper.invalid .inputfield-wrapper,wm-input .wrapper.invalid .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}:host .wrapper.invalid .error-message,wm-input .wrapper.invalid .error-message{color:#c0392b;margin:4px 0;display:block;font-style:italic;line-height:100%}:host .wrapper:focus .inputfield-wrapper,:host .wrapper.focus .inputfield-wrapper,wm-input .wrapper:focus .inputfield-wrapper,wm-input .wrapper.focus .inputfield-wrapper{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}:host .sr-only,wm-input .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;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
-const Input = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.wmInputValueChanged = createEvent(this, "wmInputValueChanged", 7);
-    this.labelPosition = "top";
-    this.value = "";
-    this.disabled = false;
-    this.placeholder = "";
-    this.requiredField = false;
-    this.type = "text";
-    this.step = 1;
-    this.announcement = "";
-    this.previousBlurredValue = "";
-    this.displayedErrorMessage = "";
-    this.uid = "";
-    this.requiredErrorMessage = intl.formatMessage({
-      id: "global.requiredError",
-      defaultMessage: "This field is required.",
-    });
-    this.numberErrorMessage = intl.formatMessage({
-      id: "input.numberError",
-      defaultMessage: "Please enter a valid number.",
-    });
-  }
-  get charCount() {
-    return this.value.length;
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : generateId();
-    this.el.focus = function () {
-      if (!this.disabled) {
-        this.shadowRoot.querySelector("input").focus();
-      }
-    };
-    if (!this.label) {
-      console.error("wm-input requires the label property");
-    }
-  }
-  componentDidLoad() {
-    if (this.value) {
-      this.inputEl.value = this.value;
-      this.previousBlurredValue = this.inputEl.value;
-    }
-  }
-  handleErrorMessage() {
-    this.displayedErrorMessage = this.validate();
-  }
-  handleKeyDown(ev) {
-    // in most browsers, onInput doesn't fire if the input's maxLength is reached
-    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
-    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
-    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
-    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
-    if (hasReachedCharacterLimit) {
-      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-    }
-  }
-  handleBlur(ev) {
-    if (this.value !== this.previousBlurredValue) {
-      this.wmInputValueChanged.emit({ value: this.value });
-    }
-    this.previousBlurredValue = this.value;
-    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
-    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
-    if (!shouldPreventValidation) {
-      this.displayedErrorMessage = this.validate();
-    }
-    this.inputWrapperEl.classList.remove("focus");
-  }
-  handleInput(ev) {
-    this.value = ev.target.value;
-    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
-      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
-    }
-  }
-  handleFocus() {
-    this.inputWrapperEl.classList.add("focus");
-  }
-  validate() {
-    // These rules are in priority order
-    // i.e. an input that is triggering both required and number errors will only show the number one but it's first
-    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];
-    if (this.errorMessage) {
-      return this.errorMessage;
-    }
-    else {
-      // sets newError to first rule that returns an error
-      return validationRules.reduce((prev, current) => (prev ? prev : current()), "");
-    }
-  }
-  validateRequired() {
-    return this.requiredField && this.value === "" ? this.requiredErrorMessage : "";
-  }
-  validateNumber() {
-    return this.type === "number" && this.inputEl.validity.badInput ? this.numberErrorMessage : "";
-  }
-  announce(message) {
-    if (this.liveRegionEl.textContent === message) {
-      message += "\u00A0";
-    }
-    this.announcement = message;
-  }
-  generateCharacterLimitWarning(charCount, charLimit) {
-    const charactersEnteredMessage = intl.formatMessage({
-      id: "global.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-      description: "for screen readers",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = intl.formatMessage({
-      id: "global.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-      description: "for screen readers",
-    });
-    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
-  }
-  generateCharacterLimitLabel(characterLimit) {
-    return intl.formatMessage({
-      id: "global.characterLimit",
-      defaultMessage: "{limit, number} characters allowed.",
-      description: "for screen readers",
-    }, { limit: characterLimit });
-  }
-  renderErrorMessage() {
-    return this.errorMessage || this.displayedErrorMessage;
-  }
-  render() {
-    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", { class: "inner-wrapper" }, h("div", { class: "inputfield-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": `${this.label}${this.characterLimit ? " " + this.generateCharacterLimitLabel(this.characterLimit) : ""}`, "aria-describedby": `info-${this.uid} error-${this.uid}`, onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", required: this.requiredField, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["handleErrorMessage"]
-  }; }
-};
+const Input = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wmInputValueChanged = createEvent(this, "wmInputValueChanged", 7);
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.placeholder = "";
+    this.requiredField = false;
+    this.type = "text";
+    this.step = 1;
+    this.announcement = "";
+    this.previousBlurredValue = "";
+    this.displayedErrorMessage = "";
+    this.uid = "";
+    this.requiredErrorMessage = intl.formatMessage({
+      id: "global.requiredError",
+      defaultMessage: "This field is required.",
+    });
+    this.numberErrorMessage = intl.formatMessage({
+      id: "input.numberError",
+      defaultMessage: "Please enter a valid number.",
+    });
+  }
+  get charCount() {
+    return this.value.length;
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : generateId();
+    this.el.focus = function () {
+      if (!this.disabled) {
+        this.shadowRoot.querySelector("input").focus();
+      }
+    };
+    if (!this.label) {
+      console.error("wm-input requires the label property");
+    }
+  }
+  componentDidLoad() {
+    if (this.value) {
+      this.inputEl.value = this.value;
+      this.previousBlurredValue = this.inputEl.value;
+    }
+  }
+  handleErrorMessage() {
+    this.displayedErrorMessage = this.validate();
+  }
+  handleKeyDown(ev) {
+    // in most browsers, onInput doesn't fire if the input's maxLength is reached
+    // to handle the case where a user continues to type after reaching the character limit, the keyDown event must be used
+    const isModifierKey = ev.ctrlKey || ev.metaKey || ev.altKey;
+    const isCharacter = /^.$/.test(ev.key) && !isModifierKey;
+    const hasReachedCharacterLimit = isCharacter && this.characterLimit && this.inputEl.value.length >= this.characterLimit;
+    if (hasReachedCharacterLimit) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleBlur(ev) {
+    if (this.value !== this.previousBlurredValue) {
+      this.wmInputValueChanged.emit({ value: this.value });
+    }
+    this.previousBlurredValue = this.value;
+    // do not validate if clicking to an element that should prevent validation (e.g. close button on modal)
+    const shouldPreventValidation = this.preventValidation && isRelatedTarget(ev, this.preventValidation);
+    if (!shouldPreventValidation) {
+      this.displayedErrorMessage = this.validate();
+    }
+    this.inputWrapperEl.classList.remove("focus");
+  }
+  handleInput(ev) {
+    this.value = ev.target.value;
+    if (this.characterLimit && this.charCount >= this.characterLimit - 5) {
+      this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));
+    }
+  }
+  handleFocus() {
+    this.inputWrapperEl.classList.add("focus");
+  }
+  validate() {
+    // These rules are in priority order
+    // i.e. an input that is triggering both required and number errors will only show the number one but it's first
+    const validationRules = [this.validateNumber.bind(this), this.validateRequired.bind(this)];
+    if (this.errorMessage) {
+      return this.errorMessage;
+    }
+    else {
+      // sets newError to first rule that returns an error
+      return validationRules.reduce((prev, current) => (prev ? prev : current()), "");
+    }
+  }
+  validateRequired() {
+    return this.requiredField && this.value === "" ? this.requiredErrorMessage : "";
+  }
+  validateNumber() {
+    return this.type === "number" && this.inputEl.validity.badInput ? this.numberErrorMessage : "";
+  }
+  announce(message) {
+    if (this.liveRegionEl.textContent === message) {
+      message += "\u00A0";
+    }
+    this.announcement = message;
+  }
+  generateCharacterLimitWarning(charCount, charLimit) {
+    const charactersEnteredMessage = intl.formatMessage({
+      id: "global.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+      description: "for screen readers",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = intl.formatMessage({
+      id: "global.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+      description: "for screen readers",
+    });
+    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
+  }
+  generateCharacterLimitLabel(characterLimit) {
+    return intl.formatMessage({
+      id: "global.characterLimit",
+      defaultMessage: "{limit, number} characters allowed.",
+      description: "for screen readers",
+    }, { limit: characterLimit });
+  }
+  renderErrorMessage() {
+    return this.errorMessage || this.displayedErrorMessage;
+  }
+  render() {
+    return (h(Host, { id: this.uid }, h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*"))))), h("div", { class: "inner-wrapper" }, h("div", { class: "inputfield-wrapper" }, h("input", { ref: (el) => (this.inputEl = el), id: `inputfield-${this.uid}`, disabled: this.disabled, "aria-label": `${this.label}${this.characterLimit ? " " + this.generateCharacterLimitLabel(this.characterLimit) : ""}`, "aria-describedby": `info-${this.uid} error-${this.uid}`, onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: (ev) => this.handleBlur(ev), onFocus: this.handleFocus.bind(this), placeholder: this.placeholder, autocomplete: "off", required: this.requiredField, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["handleErrorMessage"]
+  }; }
+};
 Input.style = wmInputCss;
 
 export { Input as wm_input };

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

@@ -2,37 +2,37 @@ import { r as registerInstance, h, g as getElement } from './index-66f8130e.js';
 
 const wmModalFooterCss = "wm-modal-footer{-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px;margin-top:-1px}wm-modal-footer .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}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{flex-direction:column;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
 
-const ModalFooter = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.secondaryText = "";
-    this.primaryText = "";
-    this.infoText = "";
-    this.primaryActionDisabled = false;
-    this.deleteStyle = false;
-  }
-  //Trap focus when user tabs past first element in modal
-  focusLastEl() {
-    this.lastElement.focus();
-  }
-  componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-  }
-  emitParentPrimaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitPrimaryEvent();
-  }
-  emitParentSecondaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitSecondaryEvent();
-  }
-  render() {
-    return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
-  }
-  get el() { return getElement(this); }
-};
+const ModalFooter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.secondaryText = "";
+    this.primaryText = "";
+    this.infoText = "";
+    this.primaryActionDisabled = false;
+    this.deleteStyle = false;
+  }
+  //Trap focus when user tabs past first element in modal
+  focusLastEl() {
+    this.lastElement.focus();
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+  }
+  emitParentPrimaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitPrimaryEvent();
+  }
+  emitParentSecondaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitSecondaryEvent();
+  }
+  render() {
+    return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
+  }
+  get el() { return getElement(this); }
+};
 ModalFooter.style = wmModalFooterCss;
 
 export { ModalFooter as wm_modal_footer };

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

@@ -1,41 +1,41 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-66f8130e.js';
-import { i as intl } from './functions-122ab496.js';
+import { i as intl } from './functions-cbfc81d1.js';
 
 const 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}";
 
-const ModalHeader = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.heading = "";
-    this.subheading = "";
-    this.closeTooltipMessage = intl.formatMessage({
-      id: "global.closeVerb",
-      defaultMessage: "Close",
-      description: "For a button, to close a user interface element",
-    });
-  }
-  //Trap focus when user tabs past last element in modal
-  focusFirstEl() {
-    this.closeButtonEl.focus();
-  }
-  componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-  }
-  emitParentCloseEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitCloseEvent();
-  }
-  // @Listen("click")
-  // directFocusOnClick() {
-  //   this.headingElement.tabIndex = 0;
-  //   this.headingElement.focus();
-  // }
-  render() {
-    return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${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-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
-  }
-  get el() { return getElement(this); }
-};
+const ModalHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.heading = "";
+    this.subheading = "";
+    this.closeTooltipMessage = intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+  }
+  //Trap focus when user tabs past last element in modal
+  focusFirstEl() {
+    this.closeButtonEl.focus();
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+  }
+  emitParentCloseEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitCloseEvent();
+  }
+  // @Listen("click")
+  // directFocusOnClick() {
+  //   this.headingElement.tabIndex = 0;
+  //   this.headingElement.focus();
+  // }
+  render() {
+    return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${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-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+  }
+  get el() { return getElement(this); }
+};
 ModalHeader.style = wmModalHeaderCss;
 
 export { ModalHeader as wm_modal_header };