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-option/wm-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wm-option.js","sourceRoot":"","sources":["../../../../src/components/wm-option/wm-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\n@Component({\n tag: \"wm-option\",\n styleUrl: \"wm-option.scss\",\n shadow: true,\n})\nexport class Option {\n @Element() el!: HTMLElement;\n\n @Prop() value?: string \| null; // if devs pass a value as attribute they should be able to retrieve it by querying the property. This is untouched by the component.\n @Prop({ mutable: true }) subinfo?: string = undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) selected: boolean = false;\n @Prop() focused: boolean = false;\n\n @Event() wmOptionSelected!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmKeyUpPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmKeyDownPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmEscKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmEndKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmEnterKeyPressed!: EventEmitter<HTMLWmOptionElement>;\n @Event() wmLetterPressed!: EventEmitter<string>;\n @Event() wmOptionBlurred!: EventEmitter<{ relatedTarget: EventTarget \| null }>;\n\n private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\n @State() searchTerm: string = \"\";\n private textEl!: HTMLDivElement;\n\n get hostClasses() {\n let classes = [];\n if (this.subinfo) {\n classes.push(\"hassubinfo\");\n }\n if (this.parentSelectEl.multiple) {\n classes.push(\"multi-option\");\n }\n if (!this.el.textContent!.toLowerCase().includes(this.searchTerm)) {\n classes.push(\"filtered-out\");\n }\n return classes.join(\" \");\n }\n\n get parentSelectEl() {\n return this.el.parentElement?.nodeName !== \"WM-SELECT\"\n ? ((this.el.getRootNode() as ShadowRoot).host as HTMLWmSelectElement)\n : (this.el.parentElement as HTMLWmSelectElement);\n }\n\n @Listen(\"keydown\")\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case \"ArrowUp\":\n ev.preventDefault();\n this.wmKeyUpPressed.emit(this.el as HTMLWmOptionElement);\n break;\n\n case \"ArrowDown\":\n ev.preventDefault();\n this.wmKeyDownPressed.emit(this.el as HTMLWmOptionElement);\n break;\n\n case \"Enter\":\n ev.preventDefault();\n if (!this.disabled) {\n this.el.click();\n this.wmEnterKeyPressed.emit(this.el as HTMLWmOptionElement);\n }\n break;\n\n case \" \":\n ev.preventDefault();\n this.el.click();\n break;\n\n case \"Escape\":\n ev.preventDefault();\n ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n this.wmEscKeyPressed.emit();\n break;\n\n case \"Home\":\n ev.preventDefault();\n this.wmHomeKeyPressed.emit();\n break;\n\n case \"End\":\n ev.preventDefault();\n this.wmEndKeyPressed.emit();\n break;\n\n default:\n if (ev.key.length === 1) {\n // emit for single characters (\"a\",\"l\",\"5\", etc), avoid others (\"shift\", \"control\", etc)\n this.wmLetterPressed.emit(ev.key);\n }\n }\n }\n\n @Listen(\"click\")\n handleSelection() {\n if (!this.disabled) {\n // the parent wm-select is in charge of the actual selection\n // using ev.detail because ev.target returns the wm-select for duplicate options\n this.wmOptionSelected.emit(this.el as HTMLWmOptionElement);\n }\n }\n\n @Listen(\"blur\")\n handleBlur(ev: FocusEvent) {\n this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });\n }\n\n @Watch(\"selected\")\n syncAriaSelected() {\n // this function only keeps the aria-selected attr in sync with the selected prop\n // all the logic for selecting / deselecting happens in the parent wm-select\n this.selected ? this.el.setAttribute(\"aria-selected\", \"true\") : this.el.removeAttribute(\"aria-selected\");\n }\n\n @Watch(\"disabled\")\n syncAriaDisabled() {\n this.disabled ? this.el.setAttribute(\"aria-disabled\", \"true\") : this.el.removeAttribute(\"aria-disabled\");\n }\n\n @Watch(\"disabled\")\n updateDisabledOnClick() {\n if (this.disabled && this.el.onclick) {\n this.onClickFunc = this.el.onclick;\n this.el.onclick = null;\n } else if (!this.disabled && this.onClickFunc) {\n this.el.onclick = this.onClickFunc;\n }\n }\n\n handleSearch(ev: CustomEvent) {\n // filter is case-insensitive, so\n this.searchTerm = ev.detail.searchTerm.toLowerCase();\n\n if (this.searchTerm) {\n const regexp = new RegExp(`${this.searchTerm}`, \"gi\");\n const boldedText = this.el.textContent!.replace(regexp, (match) => `<strong>${match}</strong>`);\n // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as \"hel lo\"\n // aria-hidden and sr-only is used to circumvent this\n this.textEl.innerHTML = boldedText;\n } else {\n this.textEl.innerHTML = this.el.textContent!;\n }\n }\n\n componentWillLoad() {\n this.syncAriaSelected();\n this.syncAriaDisabled();\n this.updateDisabledOnClick();\n\n this.parentSelectEl.addEventListener(\"wmSelectSearchChanged\", (ev) => this.handleSearch(ev as CustomEvent));\n }\n\n render() {\n return (\n <Host role=\"option\" tabindex={this.focused ? 0 : -1} class={this.hostClasses}>\n <div class={`option-wrapper ${this.parentSelectEl.multiple ? \"checkbox\" : \"\"}`}>\n <span aria-hidden=\"true\" ref={(el) => (this.textEl = el as HTMLDivElement)}>\n {this.el.textContent}\n </span>\n <span class=\"sr-only\">{this.el.textContent}</span>\n </div>\n <div class=\"subinfo\">{this.subinfo}</div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"wm-option.js","sourceRoot":"","sources":["../../../../src/components/wm-option/wm-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"wm-option\",\r\n styleUrl: \"wm-option.scss\",\r\n shadow: true,\r\n})\r\nexport class Option {\r\n @Element() el!: HTMLElement;\r\n\r\n @Prop() value?: string \| null; // if devs pass a value as attribute they should be able to retrieve it by querying the property. This is untouched by the component.\r\n @Prop({ mutable: true }) subinfo?: string = undefined;\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n @Prop({ reflect: true }) selected: boolean = false;\r\n @Prop() focused: boolean = false;\r\n\r\n @Event() wmOptionSelected!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmKeyUpPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmKeyDownPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmEscKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmHomeKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmEndKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmEnterKeyPressed!: EventEmitter<HTMLWmOptionElement>;\r\n @Event() wmLetterPressed!: EventEmitter<string>;\r\n @Event() wmOptionBlurred!: EventEmitter<{ relatedTarget: EventTarget \| null }>;\r\n\r\n private onClickFunc!: (this: GlobalEventHandlers, ev: MouseEvent) => any;\r\n @State() searchTerm: string = \"\";\r\n private textEl!: HTMLDivElement;\r\n\r\n get hostClasses() {\r\n let classes = [];\r\n if (this.subinfo) {\r\n classes.push(\"hassubinfo\");\r\n }\r\n if (this.parentSelectEl.multiple) {\r\n classes.push(\"multi-option\");\r\n }\r\n if (!this.el.textContent!.toLowerCase().includes(this.searchTerm)) {\r\n classes.push(\"filtered-out\");\r\n }\r\n return classes.join(\" \");\r\n }\r\n\r\n get parentSelectEl() {\r\n return this.el.parentElement?.nodeName !== \"WM-SELECT\"\r\n ? ((this.el.getRootNode() as ShadowRoot).host as HTMLWmSelectElement)\r\n : (this.el.parentElement as HTMLWmSelectElement);\r\n }\r\n\r\n @Listen(\"keydown\")\r\n handleKeydown(ev: KeyboardEvent) {\r\n switch (ev.key) {\r\n case \"ArrowUp\":\r\n ev.preventDefault();\r\n this.wmKeyUpPressed.emit(this.el as HTMLWmOptionElement);\r\n break;\r\n\r\n case \"ArrowDown\":\r\n ev.preventDefault();\r\n this.wmKeyDownPressed.emit(this.el as HTMLWmOptionElement);\r\n break;\r\n\r\n case \"Enter\":\r\n ev.preventDefault();\r\n if (!this.disabled) {\r\n this.el.click();\r\n this.wmEnterKeyPressed.emit(this.el as HTMLWmOptionElement);\r\n }\r\n break;\r\n\r\n case \" \":\r\n ev.preventDefault();\r\n this.el.click();\r\n break;\r\n\r\n case \"Escape\":\r\n ev.preventDefault();\r\n ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\r\n this.wmEscKeyPressed.emit();\r\n break;\r\n\r\n case \"Home\":\r\n ev.preventDefault();\r\n this.wmHomeKeyPressed.emit();\r\n break;\r\n\r\n case \"End\":\r\n ev.preventDefault();\r\n this.wmEndKeyPressed.emit();\r\n break;\r\n\r\n default:\r\n if (ev.key.length === 1) {\r\n // emit for single characters (\"a\",\"l\",\"5\", etc), avoid others (\"shift\", \"control\", etc)\r\n this.wmLetterPressed.emit(ev.key);\r\n }\r\n }\r\n }\r\n\r\n @Listen(\"click\")\r\n handleSelection() {\r\n if (!this.disabled) {\r\n // the parent wm-select is in charge of the actual selection\r\n // using ev.detail because ev.target returns the wm-select for duplicate options\r\n this.wmOptionSelected.emit(this.el as HTMLWmOptionElement);\r\n }\r\n }\r\n\r\n @Listen(\"blur\")\r\n handleBlur(ev: FocusEvent) {\r\n this.wmOptionBlurred.emit({ relatedTarget: ev.relatedTarget });\r\n }\r\n\r\n @Watch(\"selected\")\r\n syncAriaSelected() {\r\n // this function only keeps the aria-selected attr in sync with the selected prop\r\n // all the logic for selecting / deselecting happens in the parent wm-select\r\n this.selected ? this.el.setAttribute(\"aria-selected\", \"true\") : this.el.removeAttribute(\"aria-selected\");\r\n }\r\n\r\n @Watch(\"disabled\")\r\n syncAriaDisabled() {\r\n this.disabled ? this.el.setAttribute(\"aria-disabled\", \"true\") : this.el.removeAttribute(\"aria-disabled\");\r\n }\r\n\r\n @Watch(\"disabled\")\r\n updateDisabledOnClick() {\r\n if (this.disabled && this.el.onclick) {\r\n this.onClickFunc = this.el.onclick;\r\n this.el.onclick = null;\r\n } else if (!this.disabled && this.onClickFunc) {\r\n this.el.onclick = this.onClickFunc;\r\n }\r\n }\r\n\r\n handleSearch(ev: CustomEvent) {\r\n // filter is case-insensitive, so\r\n this.searchTerm = ev.detail.searchTerm.toLowerCase();\r\n\r\n if (this.searchTerm) {\r\n const regexp = new RegExp(`${this.searchTerm}`, \"gi\");\r\n const boldedText = this.el.textContent!.replace(regexp, (match) => `<strong>${match}</strong>`);\r\n // for voiceover, text splitting is read as separate phrases. i.e. hel<b>lo</b> will be read as \"hel lo\"\r\n // aria-hidden and sr-only is used to circumvent this\r\n this.textEl.innerHTML = boldedText;\r\n } else {\r\n this.textEl.innerHTML = this.el.textContent!;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.syncAriaSelected();\r\n this.syncAriaDisabled();\r\n this.updateDisabledOnClick();\r\n\r\n this.parentSelectEl.addEventListener(\"wmSelectSearchChanged\", (ev) => this.handleSearch(ev as CustomEvent));\r\n }\r\n\r\n render() {\r\n return (\r\n <Host role=\"option\" tabindex={this.focused ? 0 : -1} class={this.hostClasses}>\r\n <div class={`option-wrapper ${this.parentSelectEl.multiple ? \"checkbox\" : \"\"}`}>\r\n <span aria-hidden=\"true\" ref={(el) => (this.textEl = el as HTMLDivElement)}>\r\n {this.el.textContent}\r\n </span>\r\n <span class=\"sr-only\">{this.el.textContent}</span>\r\n </div>\r\n <div class=\"subinfo\">{this.subinfo}</div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}