npm - @watermarkinsights/ripple - Versions diffs - 3.25.0-2 → 3.25.0 - Mend

@watermarkinsights/ripple 3.25.0-2 → 3.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (605) hide show

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

@@ -3,148 +3,132 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-53aff314.js');
+const functions = require('./functions-d2d99997.js');
+const intl = require('./intl-a1ccf587.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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;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 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{display:block;font-style:italic;color:#c0392b;font-size:0.875rem;margin-top:0.25rem;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 #19a1a9;-moz-box-shadow:0 0 0 1px #19a1a9;box-shadow:0 0 0 1px #19a1a9;outline:none;border-color:#19a1a9}: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 || intl.globalMessages.requiredError;
+    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) {
+    let message = intl.globalMessages.getCharactersEntered(charCount, charLimit);
+    if (charCount >= charLimit) {
+      message += ` ${intl.globalMessages.characterLimitReached}`;
+    }
+    return message;
+  }
+  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 ? " " + intl.globalMessages.getCharacterLimit(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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

	@@ -1 +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 {\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}
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}

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

@@ -3,41 +3,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1f84c034.js');
-const intl = require('./intl-e14dc0a1.js');
-require('./functions-53aff314.js');
+const intl = require('./intl-a1ccf587.js');
+require('./functions-d2d99997.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.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: intl.closeVerb, "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.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: intl.globalMessages.close, "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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"wm-modal-header.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,muBAAmuB;;MCO/uB,WAAW;;;mBAIK,EAAE;sBACC,EAAE;;EAGhC,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,QACEA,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,EAAEE,~~cAAS~~,~~sBACD~~,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":["h","Host","~~closeVerb~~"],"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 { ~~closeVerb~~ } from \"../../global/intl\";\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 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={~~closeVerb~~}\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}
1	+ {"file":"wm-modal-header.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,muBAAmuB;;MCO/uB,WAAW;;;mBAIK,EAAE;sBACC,EAAE;;EAGhC,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,QACEA,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,EAAEE,mBAAc,CAAC,KAAK,sBACZ,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":["h","Host","globalMessages"],"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 { globalMessages } from \"../../global/intl\";\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 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={globalMessages.close}\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}