@watermarkinsights/ripple 3.24.0 → 3.24.1

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

@@ -3,148 +3,148 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-6d2a5824.js');
+const functions = require('./functions-9ddaeb33.js');
 
 const wmInputCss = ":host,wm-input{font-family:inherit;width:100%}:host *,wm-input *{-webkit-box-sizing:border-box;box-sizing:border-box}:host .wrapper,wm-input .wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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{-ms-flex-direction:row;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:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}: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;-webkit-clip-path:inset(50%) !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:\"\\f026\";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:-ms-flexbox;display:flex}:host .wrapper .character-count,wm-input .wrapper .character-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:5rem;background-color:rgba(74, 74, 74, 0.05);font-size:0.875rem;font-weight:500;-ms-flex-item-align:stretch;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%;-ms-flex:1;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;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 
-const Input = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.wmInputValueChanged = index.createEvent(this, "wmInputValueChanged", 7);
-    this.uid = "";
-    this.previousBlurredValue = "";
-    this.numberErrorMessage = functions.intl.formatMessage({
-      id: "input.numberError",
-      defaultMessage: "Please enter a valid number.",
-    });
-    this.label = undefined;
-    this.labelPosition = "top";
-    this.value = "";
-    this.disabled = false;
-    this.info = undefined;
-    this.placeholder = "";
-    this.requiredField = false;
-    this.requiredFieldMessage = undefined;
-    this.errorMessage = undefined;
-    this.characterLimit = undefined;
-    this.preventValidation = undefined;
-    this.type = "text";
-    this.step = 1;
-    this.min = undefined;
-    this.max = undefined;
-    this.announcement = "";
-    this.displayedErrorMessage = "";
-  }
-  get charCount() {
-    return this.value.length;
-  }
-  componentWillLoad() {
-    this.uid = this.el.id ? this.el.id : functions.generateId();
-    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(newValue) {
-    this.displayedErrorMessage = newValue;
-  }
-  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 && functions.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() {
-    const reqMsg = this.requiredFieldMessage ||
-      functions.intl.formatMessage({
-        id: "global.requiredError",
-        defaultMessage: "This field is required.",
-      });
-    return this.requiredField && this.value === "" ? reqMsg : "";
-  }
-  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 = functions.intl.formatMessage({
-      id: "global.charactersEntered",
-      defaultMessage: "{x, number} of {y, number} characters entered.",
-      description: "for screen readers",
-    }, { x: charCount, y: charLimit });
-    const characterLimitReachedMessage = functions.intl.formatMessage({
-      id: "global.characterLimitReached",
-      defaultMessage: "No additional characters will be entered.",
-      description: "for screen readers",
-    });
-    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
-  }
-  generateCharacterLimitLabel(characterLimit) {
-    return functions.intl.formatMessage({
-      id: "global.characterLimit",
-      defaultMessage: "{limit, number} characters allowed.",
-      description: "for screen readers",
-    }, { limit: characterLimit });
-  }
-  renderErrorMessage() {
-    return this.errorMessage || this.displayedErrorMessage;
-  }
-  render() {
-    return (index.h(index.Host, { id: this.uid }, index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "inputfield-wrapper" }, index.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", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), index.h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "errorMessage": ["handleErrorMessage"]
-  }; }
-};
+const Input = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wmInputValueChanged = index.createEvent(this, "wmInputValueChanged", 7);
+    this.uid = "";
+    this.previousBlurredValue = "";
+    this.numberErrorMessage = functions.intl.formatMessage({
+      id: "input.numberError",
+      defaultMessage: "Please enter a valid number.",
+    });
+    this.label = undefined;
+    this.labelPosition = "top";
+    this.value = "";
+    this.disabled = false;
+    this.info = undefined;
+    this.placeholder = "";
+    this.requiredField = false;
+    this.requiredFieldMessage = undefined;
+    this.errorMessage = undefined;
+    this.characterLimit = undefined;
+    this.preventValidation = undefined;
+    this.type = "text";
+    this.step = 1;
+    this.min = undefined;
+    this.max = undefined;
+    this.announcement = "";
+    this.displayedErrorMessage = "";
+  }
+  get charCount() {
+    return this.value.length;
+  }
+  componentWillLoad() {
+    this.uid = this.el.id ? this.el.id : functions.generateId();
+    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(newValue) {
+    this.displayedErrorMessage = newValue;
+  }
+  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 && functions.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() {
+    const reqMsg = this.requiredFieldMessage ||
+      functions.intl.formatMessage({
+        id: "global.requiredError",
+        defaultMessage: "This field is required.",
+      });
+    return this.requiredField && this.value === "" ? reqMsg : "";
+  }
+  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 = functions.intl.formatMessage({
+      id: "global.charactersEntered",
+      defaultMessage: "{x, number} of {y, number} characters entered.",
+      description: "for screen readers",
+    }, { x: charCount, y: charLimit });
+    const characterLimitReachedMessage = functions.intl.formatMessage({
+      id: "global.characterLimitReached",
+      defaultMessage: "No additional characters will be entered.",
+      description: "for screen readers",
+    });
+    return `${charactersEnteredMessage}${charCount >= charLimit ? " " + characterLimitReachedMessage : ""}`;
+  }
+  generateCharacterLimitLabel(characterLimit) {
+    return functions.intl.formatMessage({
+      id: "global.characterLimit",
+      defaultMessage: "{limit, number} characters allowed.",
+      description: "for screen readers",
+    }, { limit: characterLimit });
+  }
+  renderErrorMessage() {
+    return this.errorMessage || this.displayedErrorMessage;
+  }
+  render() {
+    return (index.h(index.Host, { id: this.uid }, index.h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage || this.displayedErrorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { htmlFor: `inputfield-${this.uid}`, class: "label" }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", { class: "inner-wrapper" }, index.h("div", { class: "inputfield-wrapper" }, index.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", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { id: `info-${this.uid}`, class: "info" }, this.info)), index.h("div", { id: `error-${this.uid}`, "aria-live": "assertive", class: "error-message", "aria-atomic": "true" }, this.renderErrorMessage()), index.h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "errorMessage": ["handleErrorMessage"]
+  }; }
+};
 Input.style = wmInputCss;
 
 exports.wm_input = Input;

package/dist/cjs/wm-input.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-input.entry.cjs.js","mappings":"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","names":["intl","generateId","isRelatedTarget","h","Host"],"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"],"version":3}
+{"file":"wm-input.entry.cjs.js","mappings":"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","names":["intl","generateId","isRelatedTarget","h","Host"],"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"],"version":3}

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

@@ -6,39 +6,39 @@ const index = require('./index-1f84c034.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{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;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) {
-    index.registerInstance(this, hostRef);
-    this.secondaryText = "";
-    this.primaryText = "";
-    this.infoText = "";
-    this.primaryActionDisabled = false;
-    this.deleteStyle = false;
-  }
-  componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-    // Trap focus when user shift+tabs past first element in modal
-    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
-    // if we listen to the whole doc each modal on the page reacts to every event
-    this.el.parentElement.addEventListener("focusLastElement", () => {
-      this.lastElement.focus();
-    });
-  }
-  emitParentPrimaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitPrimaryEvent();
-  }
-  emitParentSecondaryEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitSecondaryEvent();
-  }
-  render() {
-    return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.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 index.getElement(this); }
-};
+const ModalFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.secondaryText = "";
+    this.primaryText = "";
+    this.infoText = "";
+    this.primaryActionDisabled = false;
+    this.deleteStyle = false;
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+    // Trap focus when user shift+tabs past first element in modal
+    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+    // if we listen to the whole doc each modal on the page reacts to every event
+    this.el.parentElement.addEventListener("focusLastElement", () => {
+      this.lastElement.focus();
+    });
+  }
+  emitParentPrimaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitPrimaryEvent();
+  }
+  emitParentSecondaryEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitSecondaryEvent();
+  }
+  render() {
+    return (index.h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.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 index.getElement(this); }
+};
 ModalFooter.style = wmModalFooterCss;
 
 exports.wm_modal_footer = ModalFooter;

package/dist/cjs/wm-modal-footer.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-modal-footer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,27BAA27B;;MCMv8B,WAAW;;;yBAGW,EAAE;uBACJ,EAAE;oBACL,EAAE;iCACW,KAAK;uBACf,KAAK;;EAIpC,iBAAiB;IACf,IAAI,CAAC,GAAG,GAAI,IAAI,CAAC,EAAE,CAAC,aAAoC,CAAC,GAAG,CAAC;;;;IAK7D,IAAI,CAAC,EAAE,CAAC,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;MAC1D,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;KAC1B,CAAC,CAAC;GACJ;EAED,sBAAsB;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,gBAAgB,EAAE,CAAC;GAChC;EAED,wBAAwB;IACtB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,kBAAkB,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7DA,iBAAK,KAAK,EAAC,SAAS,eAAW,QAAQ,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC7DA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,KACjBA,uBACE,OAAO,EAAE,MAAM,IAAI,CAAC,wBAAwB,EAAE,EAC9C,EAAE,EAAE,gBAAgB,IAAI,CAAC,GAAG,EAAE,EAC9B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,WAAW,GAAG,EAAiB,IAAI,IAAI,CAAC,IAExF,IAAI,CAAC,aAAa,CACT,CACb,EACDA,sCACe,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,SAAS,wBACnC,IAAI,CAAC,WAAW,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,EAC5C,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,EAAE,EAAE,cAAc,IAAI,CAAC,GAAG,EAAE,EAC5B,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,WAAW,GAAG,EAAiB,IAAI,IAAI,CAAC,IAEzF,IAAI,CAAC,WAAW,CACP,CACR,CACF,EACN;GACH;;;;;;;","names":["h"],"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"],"version":3}
+{"file":"wm-modal-footer.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,27BAA27B;;MCMv8B,WAAW;;;yBAGW,EAAE;uBACJ,EAAE;oBACL,EAAE;iCACW,KAAK;uBACf,KAAK;;EAIpC,iBAAiB;IACf,IAAI,CAAC,GAAG,GAAI,IAAI,CAAC,EAAE,CAAC,aAAoC,CAAC,GAAG,CAAC;;;;IAK7D,IAAI,CAAC,EAAE,CAAC,aAAc,CAAC,gBAAgB,CAAC,kBAAkB,EAAE;MAC1D,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;KAC1B,CAAC,CAAC;GACJ;EAED,sBAAsB;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,gBAAgB,EAAE,CAAC;GAChC;EAED,wBAAwB;IACtB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,kBAAkB,EAAE,CAAC;GAClC;EAED,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,EAAE,EAAE,IAC7DA,iBAAK,KAAK,EAAC,SAAS,eAAW,QAAQ,IAAE,IAAI,CAAC,QAAQ,CAAO,EAC7DA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,KACjBA,uBACE,OAAO,EAAE,MAAM,IAAI,CAAC,wBAAwB,EAAE,EAC9C,EAAE,EAAE,gBAAgB,IAAI,CAAC,GAAG,EAAE,EAC9B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,WAAW,GAAG,EAAiB,IAAI,IAAI,CAAC,IAExF,IAAI,CAAC,aAAa,CACT,CACb,EACDA,sCACe,IAAI,CAAC,WAAW,GAAG,WAAW,GAAG,SAAS,wBACnC,IAAI,CAAC,WAAW,EACpC,OAAO,EAAE,MAAM,IAAI,CAAC,sBAAsB,EAAE,EAC5C,QAAQ,EAAE,IAAI,CAAC,qBAAqB,EACpC,EAAE,EAAE,cAAc,IAAI,CAAC,GAAG,EAAE,EAC5B,GAAG,EAAE,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,WAAW,GAAG,EAAiB,IAAI,IAAI,CAAC,IAEzF,IAAI,CAAC,WAAW,CACP,CACR,CACF,EACN;GACH;;;;;;;","names":["h"],"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"],"version":3}

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

@@ -3,45 +3,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-6d2a5824.js');
+const functions = require('./functions-9ddaeb33.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) {
-    index.registerInstance(this, hostRef);
-    this.closeTooltipMessage = functions.intl.formatMessage({
-      id: "global.closeVerb",
-      defaultMessage: "Close",
-      description: "For a button, to close a user interface element",
-    });
-    this.heading = "";
-    this.subheading = "";
-  }
-  componentWillLoad() {
-    this.uid = this.el.parentElement.uid;
-    // Trap focus when user tabs past last element in modal
-    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
-    // if we listen to the whole doc each modal on the page reacts to every event
-    this.el.parentElement.addEventListener("focusFirstElement", () => {
-      this.closeButtonEl.focus();
-    });
-  }
-  emitParentCloseEvent() {
-    const parentModal = this.el.parentElement;
-    //@ts-ignore
-    parentModal.emitCloseEvent();
-  }
-  // @Listen("click")
-  // directFocusOnClick() {
-  //   this.headingElement.tabIndex = 0;
-  //   this.headingElement.focus();
-  // }
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.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 index.getElement(this); }
-};
+const ModalHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.closeTooltipMessage = functions.intl.formatMessage({
+      id: "global.closeVerb",
+      defaultMessage: "Close",
+      description: "For a button, to close a user interface element",
+    });
+    this.heading = "";
+    this.subheading = "";
+  }
+  componentWillLoad() {
+    this.uid = this.el.parentElement.uid;
+    // Trap focus when user tabs past last element in modal
+    // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+    // if we listen to the whole doc each modal on the page reacts to every event
+    this.el.parentElement.addEventListener("focusFirstElement", () => {
+      this.closeButtonEl.focus();
+    });
+  }
+  emitParentCloseEvent() {
+    const parentModal = this.el.parentElement;
+    //@ts-ignore
+    parentModal.emitCloseEvent();
+  }
+  // @Listen("click")
+  // directFocusOnClick() {
+  //   this.headingElement.tabIndex = 0;
+  //   this.headingElement.focus();
+  // }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "wm-wrapper" }, index.h("div", null, index.h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { class: "subtitle" }, this.subheading))), index.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 index.getElement(this); }
+};
 ModalHeader.style = wmModalHeaderCss;
 
 exports.wm_modal_header = ModalHeader;

package/dist/cjs/wm-modal-header.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"wm-modal-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,muBAAmuB;;MCO/uB,WAAW;;;IAQd,wBAAmB,GAAWA,cAAI,CAAC,aAAa,CAAC;MACvD,EAAE,EAAE,kBAAkB;MACtB,cAAc,EAAE,OAAO;MACvB,WAAW,EAAE,iDAAiD;KAC/D,CAAC,CAAC;mBARwB,EAAE;sBACC,EAAE;;EAShC,iBAAiB;IACf,IAAI,CAAC,GAAG,GAAI,IAAI,CAAC,EAAE,CAAC,aAAoC,CAAC,GAAG,CAAC;;;;IAK7D,IAAI,CAAC,EAAE,CAAC,aAAc,CAAC,gBAAgB,CAAC,mBAAmB,EAAE;MAC3D,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC5B,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,cAAc,EAAE,CAAC;GAC9B;;;;;;EAQD,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,YAAY,IACrBA,qBACEA,gBACE,KAAK,EAAC,OAAO,EACb,EAAE,EAAE,yBAAyB,IAAI,CAAC,GAAG,EAAE,IAItC,IAAI,CAAC,OAAO,EACbA,kBAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACD,EACNA,sCACc,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,mBAAmB,sBAChB,MAAM,EACvB,EAAE,EAAE,kBAAkB,IAAI,CAAC,GAAG,EAAE,EAChC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC,EACrD,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,GAC1C,CACE,CACD,EACP;GACH;;;;;;;","names":["intl","h","Host"],"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"],"version":3}
+{"file":"wm-modal-header.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,muBAAmuB;;MCO/uB,WAAW;;;IAQd,wBAAmB,GAAWA,cAAI,CAAC,aAAa,CAAC;MACvD,EAAE,EAAE,kBAAkB;MACtB,cAAc,EAAE,OAAO;MACvB,WAAW,EAAE,iDAAiD;KAC/D,CAAC,CAAC;mBARwB,EAAE;sBACC,EAAE;;EAShC,iBAAiB;IACf,IAAI,CAAC,GAAG,GAAI,IAAI,CAAC,EAAE,CAAC,aAAoC,CAAC,GAAG,CAAC;;;;IAK7D,IAAI,CAAC,EAAE,CAAC,aAAc,CAAC,gBAAgB,CAAC,mBAAmB,EAAE;MAC3D,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;KAC5B,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC;;IAE1C,WAAW,CAAC,cAAc,EAAE,CAAC;GAC9B;;;;;;EAQD,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,YAAY,IACrBA,qBACEA,gBACE,KAAK,EAAC,OAAO,EACb,EAAE,EAAE,yBAAyB,IAAI,CAAC,GAAG,EAAE,IAItC,IAAI,CAAC,OAAO,EACbA,kBAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,UAAU,CAAQ,CAC5C,CACD,EACNA,sCACc,cAAc,EAC1B,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,IAAI,CAAC,mBAAmB,sBAChB,MAAM,EACvB,EAAE,EAAE,kBAAkB,IAAI,CAAC,GAAG,EAAE,EAChC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC,EACrD,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,EAAE,GAC1C,CACE,CACD,EACP;GACH;;;;;;;","names":["intl","h","Host"],"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"],"version":3}