npm - @watermarkinsights/ripple - Versions diffs - 3.24.0 → 3.24.1 - Mend

@watermarkinsights/ripple 3.24.0 → 3.24.1

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 (554) hide show

package/dist/collection/components/wm-input/wm-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wm-input.js","sourceRoot":"","sources":["../../../../src/components/wm-input/wm-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
1	+ {"version":3,"file":"wm-input.js","sourceRoot":"","sources":["../../../../src/components/wm-input/wm-input.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}