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/collection/components/wm-search/wm-search.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"wm-search.js","sourceRoot":"","sources":["../../../../src/components/wm-search/wm-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\r\nimport { intl } from \"../../global/functions\";\r\n\r\n@Component({\r\n tag: \"wm-search\",\r\n styleUrl: \"wm-search.scss\",\r\n shadow: { delegatesFocus: true },\r\n})\r\nexport class Search {\r\n @Element() el!: HTMLWmSearchElement;\r\n @Prop({ mutable: true }) searchType: \"basic\" \| \"find\" = \"basic\";\r\n @Prop({ reflect: true }) disabled: boolean = false;\r\n\r\n /*\r\n Props required for both variants.\r\n /\r\n @Prop() placeholder: string = \"\";\r\n @Prop() label: string = \"\";\r\n @Prop({ mutable: true }) numResults: number = 0;\r\n\r\n /\r\n This exposes the input's value on the host component so that the app can access it.\r\n /\r\n @Prop({ mutable: true, reflect: true }) value: string = \"\";\r\n\r\n /\r\n If the user is tabbing, the search and find variant will display a link to jump to a search result.\r\n /\r\n @State() isTabbing: boolean = false;\r\n\r\n /\r\n Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\r\n * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\r\n /\r\n @Prop() highlightedId: string = \"\";\r\n @Prop() highlightedName: string \| null = null;\r\n\r\n /\r\n Indicates which of the search results is currently highlighted. It will be displayed as \"[highlightedNum] of [numResults]\" next to the input in the search and find variant.\r\n * This number updates as the user browses using the buttons.\r\n /\r\n @State() highlightedNum: number = 0;\r\n\r\n @State() previousBlurredValue: string = \"\";\r\n @State() parentModal?: HTMLWmModalElement;\r\n\r\n /\r\n Live region announcement\r\n /\r\n @State() announcement: string = \"\";\r\n\r\n get resultCount(): string {\r\n let message = \"\";\r\n const basicMessage = intl.formatMessage(\r\n {\r\n id: \"search.resultsFound\",\r\n defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\r\n },\r\n { numResults: this.numResults }\r\n );\r\n const findMessage = intl.formatMessage(\r\n {\r\n id: \"search.xOfYResults\",\r\n defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\r\n },\r\n { numResults: this.numResults, current: this.highlightedNum }\r\n );\r\n\r\n if (this.searchType === \"basic\") {\r\n message = basicMessage;\r\n } else if (this.searchType === \"find\") {\r\n message = findMessage;\r\n }\r\n\r\n return message;\r\n }\r\n\r\n /\r\n Emitted when the buttons in the search-and-find variant are pressed.\r\n /\r\n @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\r\n @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\r\n @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\r\n\r\n /\r\n Element refs\r\n /\r\n private resultsLiveRegion!: HTMLElement;\r\n private wrapperEl: HTMLElement \| null = null;\r\n private linkEl: HTMLElement \| null = null;\r\n\r\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\r\n toggleTabbingOn() {\r\n this.isTabbing = true;\r\n this.linkEl && this.linkEl.classList.remove(\"sr-only\");\r\n this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\r\n }\r\n\r\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\r\n toggleTabbingOff() {\r\n this.isTabbing = false;\r\n this.linkEl && this.linkEl.classList.add(\"sr-only\");\r\n this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.placeholder === \"\") {\r\n console.error(\"You must set the placeholder property for the wm-search component.\");\r\n }\r\n\r\n if (this.label === \"\") {\r\n console.error(\"You must set the label property for the wm-search component.\");\r\n }\r\n this.hookToModal();\r\n }\r\n\r\n hookToModal() {\r\n // if the search is in a modal we want to clear the input when the modal closes\r\n let el = this.el as any;\r\n while (!!el) {\r\n if (el.tagName === \"WM-MODAL\") {\r\n this.parentModal = el as HTMLWmModalElement;\r\n }\r\n el = el.parentElement as HTMLElement;\r\n }\r\n\r\n if (this.parentModal) {\r\n const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\r\n events.map((event) => {\r\n this.parentModal!.addEventListener(event, () => {\r\n this.updateValue(\"\");\r\n });\r\n });\r\n }\r\n }\r\n\r\n // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\r\n @Method()\r\n async updateValue(value: string) {\r\n this.value = value;\r\n\r\n //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\r\n //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\r\n this.resetHighlightCountToStart();\r\n\r\n if (this.value) {\r\n this.announceChanges();\r\n }\r\n }\r\n\r\n @Watch(\"numResults\")\r\n resetHighlightCountToStart(): void {\r\n if (this.searchType === \"find\") {\r\n this.highlightedNum = this.numResults ? 1 : 0;\r\n }\r\n }\r\n\r\n announce(message: string) {\r\n if (this.resultsLiveRegion!.textContent === message) {\r\n message += \"\\u00A0\";\r\n }\r\n this.announcement = message;\r\n }\r\n\r\n announceChanges() {\r\n window.requestAnimationFrame(() => {\r\n // requestAnimationFrame to allow all changes to occur before announcing results\r\n let messageToAnnounce = this.resultCount;\r\n\r\n // if a result is found, also include it after the liveregion message\r\n if (this.searchType === \"find\" && this.highlightedName) {\r\n messageToAnnounce += `, ${this.highlightedName}`;\r\n }\r\n\r\n this.announce(messageToAnnounce);\r\n });\r\n }\r\n\r\n changeHighlightedNum(newNum: number): void {\r\n if (this.numResults) {\r\n if (newNum < 1) {\r\n // we were on the first item, going down: go to last item\r\n this.highlightedNum = this.numResults;\r\n } else if (newNum > this.numResults) {\r\n // we were on the last item, going up: go to first item\r\n this.highlightedNum = 1;\r\n } else {\r\n this.highlightedNum = newNum;\r\n }\r\n\r\n this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\r\n this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\r\n this.announceChanges();\r\n }\r\n }\r\n\r\n addFocusStyle() {\r\n if (this.wrapperEl) {\r\n this.wrapperEl.classList.add(\"focus\");\r\n }\r\n }\r\n\r\n removeFocusStyle() {\r\n if (this.wrapperEl) {\r\n this.wrapperEl.classList.remove(\"focus\");\r\n }\r\n }\r\n\r\n handleBlur() {\r\n this.removeFocusStyle();\r\n if (this.previousBlurredValue !== this.value) {\r\n this.wmSearchValueChanged.emit({ value: this.value });\r\n }\r\n this.previousBlurredValue = this.value;\r\n }\r\n\r\n /\r\n Functions that return elements specifically for search-and-find.\r\n /\r\n renderResultsAndBrowseButtons(): HTMLDivElement {\r\n return (\r\n <div class=\"wm-find-elements\">\r\n <div id=\"results-display\" class=\"results\">\r\n {this.resultCount}\r\n </div>\r\n <div class=\"wm-button-collection\">\r\n <wm-button\r\n button-type=\"icononly\"\r\n icon=\"f05d\"\r\n tooltip={intl.formatMessage({\r\n id: \"global.previous\",\r\n description: \"button text\",\r\n defaultMessage: \"previous\",\r\n })}\r\n tooltip-position=\"bottom\"\r\n onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\r\n disabled={this.disabled \|\| this.numResults < 2}\r\n label-for-identical-buttons={intl.formatMessage({\r\n id: \"search.previousResult\",\r\n defaultMessage: \"Press to hear previous matching result\",\r\n })}\r\n />\r\n <wm-button\r\n button-type=\"icononly\"\r\n icon=\"f045\"\r\n tooltip={intl.formatMessage({\r\n id: \"global.next\",\r\n description: \"button text\",\r\n defaultMessage: \"next\",\r\n })}\r\n tooltip-position=\"bottom\"\r\n onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\r\n disabled={this.disabled \|\| this.numResults < 2}\r\n label-for-identical-buttons={intl.formatMessage({\r\n id: \"search.nextResult\",\r\n defaultMessage: \"Press to hear next matching result\",\r\n })}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n\r\n renderJumpToLink(): HTMLAnchorElement \| null {\r\n if (this.numResults && this.highlightedId) {\r\n return (\r\n <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\r\n {intl.formatMessage({\r\n id: \"search.jumpToResult\",\r\n defaultMessage: \"Jump to search result in list\",\r\n })}\r\n </a>\r\n );\r\n } else {\r\n return null;\r\n }\r\n }\r\n /\r\n End search and find render helpers\r\n */\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div\r\n id=\"wm-search-wrapper\"\r\n class={`wm-search-wrapper ${this.searchType}`}\r\n ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\r\n >\r\n <input\r\n disabled={this.disabled}\r\n id=\"wm-search-input\"\r\n placeholder={this.placeholder}\r\n aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\r\n id: \"search.typeToFilterResults\",\r\n defaultMessage: \"Type to filter the results\",\r\n })}`}\r\n onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\r\n onFocus={() => this.addFocusStyle()}\r\n onBlur={() => this.handleBlur()}\r\n aria-autocomplete=\"none\"\r\n autocomplete=\"off\"\r\n value={this.value}\r\n />\r\n <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\r\n {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\r\n <div\r\n id=\"wm-search-live\"\r\n class=\"sr-only\"\r\n aria-live=\"polite\"\r\n aria-atomic=\"true\"\r\n ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\r\n >\r\n {this.announcement}\r\n </div>\r\n </div>\r\n {this.searchType === \"find\" && this.renderJumpToLink()}\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"wm-search.js","sourceRoot":"","sources":["../../../../src/components/wm-search/wm-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Prop, Watch, Host, Method, Listen, State, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\n@Component({\n tag: \"wm-search\",\n styleUrl: \"wm-search.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class Search {\n @Element() el!: HTMLWmSearchElement;\n @Prop({ mutable: true }) searchType: \"basic\" \| \"find\" = \"basic\";\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /*\n Props required for both variants.\n /\n @Prop() placeholder: string = \"\";\n @Prop() label: string = \"\";\n @Prop({ mutable: true }) numResults: number = 0;\n\n /\n This exposes the input's value on the host component so that the app can access it.\n /\n @Prop({ mutable: true, reflect: true }) value: string = \"\";\n\n /\n If the user is tabbing, the search and find variant will display a link to jump to a search result.\n /\n @State() isTabbing: boolean = false;\n\n /\n Prop specifically for the search and find variant. The id points to the id of the option currently highlighted,\n * so that tabbing and screen reader users can jump to this option rather than tab through the list to find it.\n /\n @Prop() highlightedId: string = \"\";\n @Prop() highlightedName: string \| null = null;\n\n /\n Indicates which of the search results is currently highlighted. It will be displayed as \"[highlightedNum] of [numResults]\" next to the input in the search and find variant.\n * This number updates as the user browses using the buttons.\n /\n @State() highlightedNum: number = 0;\n\n @State() previousBlurredValue: string = \"\";\n @State() parentModal?: HTMLWmModalElement;\n\n /\n Live region announcement\n /\n @State() announcement: string = \"\";\n\n get resultCount(): string {\n let message = \"\";\n const basicMessage = intl.formatMessage(\n {\n id: \"search.resultsFound\",\n defaultMessage: \"{numResults, plural, =0 {No results} one {1 result} other {# results}} found\",\n },\n { numResults: this.numResults }\n );\n const findMessage = intl.formatMessage(\n {\n id: \"search.xOfYResults\",\n defaultMessage: \"{numResults, plural, =0 {No results found} other {{current} of {numResults} results}}\",\n },\n { numResults: this.numResults, current: this.highlightedNum }\n );\n\n if (this.searchType === \"basic\") {\n message = basicMessage;\n } else if (this.searchType === \"find\") {\n message = findMessage;\n }\n\n return message;\n }\n\n /\n Emitted when the buttons in the search-and-find variant are pressed.\n /\n @Event() wmSearchBrowseResults!: EventEmitter<{ position: number }>;\n @Event() wmBrowseSearchResults!: EventEmitter<{ position: number }>; // deprecated in favor of wmSearchBrowseResults\n @Event() wmSearchValueChanged!: EventEmitter<{ value: string }>;\n\n /\n Element refs\n /\n private resultsLiveRegion!: HTMLElement;\n private wrapperEl: HTMLElement \| null = null;\n private linkEl: HTMLElement \| null = null;\n\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n toggleTabbingOn() {\n this.isTabbing = true;\n this.linkEl && this.linkEl.classList.remove(\"sr-only\");\n this.linkEl && this.linkEl.classList.add(\"show-for-tabbers\");\n }\n\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n toggleTabbingOff() {\n this.isTabbing = false;\n this.linkEl && this.linkEl.classList.add(\"sr-only\");\n this.linkEl && this.linkEl.classList.remove(\"show-for-tabbers\");\n }\n\n componentWillLoad() {\n if (this.placeholder === \"\") {\n console.error(\"You must set the placeholder property for the wm-search component.\");\n }\n\n if (this.label === \"\") {\n console.error(\"You must set the label property for the wm-search component.\");\n }\n this.hookToModal();\n }\n\n hookToModal() {\n // if the search is in a modal we want to clear the input when the modal closes\n let el = this.el as any;\n while (!!el) {\n if (el.tagName === \"WM-MODAL\") {\n this.parentModal = el as HTMLWmModalElement;\n }\n el = el.parentElement as HTMLElement;\n }\n\n if (this.parentModal) {\n const events = [\"wmCloseTriggered\", \"wmPrimaryTriggered\", \"wmSecondaryTriggered\"];\n events.map((event) => {\n this.parentModal!.addEventListener(event, () => {\n this.updateValue(\"\");\n });\n });\n }\n }\n\n // this undocumented method is needed in hookToModal (needs to be exposed so we can set the callback func)\n @Method()\n async updateValue(value: string) {\n this.value = value;\n\n //For search-and-find, the results should always restart at \"[1 or 0] of ...\" after any new input.\n //Reset the highlight count here just in case the new value doesn't end up changing the number of results.\n this.resetHighlightCountToStart();\n\n if (this.value) {\n this.announceChanges();\n }\n }\n\n @Watch(\"numResults\")\n resetHighlightCountToStart(): void {\n if (this.searchType === \"find\") {\n this.highlightedNum = this.numResults ? 1 : 0;\n }\n }\n\n announce(message: string) {\n if (this.resultsLiveRegion!.textContent === message) {\n message += \"\\u00A0\";\n }\n this.announcement = message;\n }\n\n announceChanges() {\n window.requestAnimationFrame(() => {\n // requestAnimationFrame to allow all changes to occur before announcing results\n let messageToAnnounce = this.resultCount;\n\n // if a result is found, also include it after the liveregion message\n if (this.searchType === \"find\" && this.highlightedName) {\n messageToAnnounce += `, ${this.highlightedName}`;\n }\n\n this.announce(messageToAnnounce);\n });\n }\n\n changeHighlightedNum(newNum: number): void {\n if (this.numResults) {\n if (newNum < 1) {\n // we were on the first item, going down: go to last item\n this.highlightedNum = this.numResults;\n } else if (newNum > this.numResults) {\n // we were on the last item, going up: go to first item\n this.highlightedNum = 1;\n } else {\n this.highlightedNum = newNum;\n }\n\n this.wmSearchBrowseResults.emit({ position: this.highlightedNum });\n this.wmBrowseSearchResults.emit({ position: this.highlightedNum });\n this.announceChanges();\n }\n }\n\n addFocusStyle() {\n if (this.wrapperEl) {\n this.wrapperEl.classList.add(\"focus\");\n }\n }\n\n removeFocusStyle() {\n if (this.wrapperEl) {\n this.wrapperEl.classList.remove(\"focus\");\n }\n }\n\n handleBlur() {\n this.removeFocusStyle();\n if (this.previousBlurredValue !== this.value) {\n this.wmSearchValueChanged.emit({ value: this.value });\n }\n this.previousBlurredValue = this.value;\n }\n\n /\n Functions that return elements specifically for search-and-find.\n /\n renderResultsAndBrowseButtons(): HTMLDivElement {\n return (\n <div class=\"wm-find-elements\">\n <div id=\"results-display\" class=\"results\">\n {this.resultCount}\n </div>\n <div class=\"wm-button-collection\">\n <wm-button\n button-type=\"icononly\"\n icon=\"f05d\"\n tooltip={globalMessages.previous}\n tooltip-position=\"bottom\"\n onClick={() => this.changeHighlightedNum(this.highlightedNum - 1)}\n disabled={this.disabled \|\| this.numResults < 2}\n label-for-identical-buttons={intl.formatMessage({\n id: \"search.previousResult\",\n defaultMessage: \"Press to hear previous matching result\",\n })}\n />\n <wm-button\n button-type=\"icononly\"\n icon=\"f045\"\n tooltip={globalMessages.next}\n tooltip-position=\"bottom\"\n onClick={() => this.changeHighlightedNum(this.highlightedNum + 1)}\n disabled={this.disabled \|\| this.numResults < 2}\n label-for-identical-buttons={intl.formatMessage({\n id: \"search.nextResult\",\n defaultMessage: \"Press to hear next matching result\",\n })}\n />\n </div>\n </div>\n );\n }\n\n renderJumpToLink(): HTMLAnchorElement \| null {\n if (this.numResults && this.highlightedId) {\n return (\n <a ref={(el) => (this.linkEl = el as HTMLAnchorElement)} href={`#${this.highlightedId}`} class=\"sr-only\">\n {intl.formatMessage({\n id: \"search.jumpToResult\",\n defaultMessage: \"Jump to search result in list\",\n })}\n </a>\n );\n } else {\n return null;\n }\n }\n /\n End search and find render helpers\n */\n\n render() {\n return (\n <Host>\n <div\n id=\"wm-search-wrapper\"\n class={`wm-search-wrapper ${this.searchType}`}\n ref={(el) => (this.wrapperEl = el as HTMLDivElement)}\n >\n <input\n disabled={this.disabled}\n id=\"wm-search-input\"\n placeholder={this.placeholder}\n aria-label={`${this.label ? this.label + \". \" : \"\"}${intl.formatMessage({\n id: \"search.typeToFilterResults\",\n defaultMessage: \"Type to filter the results\",\n })}`}\n onInput={(ev: Event) => this.updateValue((ev.target as HTMLInputElement).value)}\n onFocus={() => this.addFocusStyle()}\n onBlur={() => this.handleBlur()}\n aria-autocomplete=\"none\"\n autocomplete=\"off\"\n value={this.value}\n />\n <span class=\"mdi search-icon\">{String.fromCodePoint(parseInt(`0xf349`))}</span>\n {this.searchType === \"find\" && this.renderResultsAndBrowseButtons()}\n <div\n id=\"wm-search-live\"\n class=\"sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n ref={(el) => (this.resultsLiveRegion = el as HTMLElement)}\n >\n {this.announcement}\n </div>\n </div>\n {this.searchType === \"find\" && this.renderJumpToLink()}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/wm-select/wm-select.css CHANGED Viewed

@@ -334,11 +334,11 @@
   border: 1px solid #4a4a4a;
 }
 .search .searchfield-wrapper:focus, .search .searchfield-wrapper.focus {
-  -webkit-box-shadow: 0 0 0 1px #20cbd4;
-  -moz-box-shadow: 0 0 0 1px #20cbd4;
-  box-shadow: 0 0 0 1px #20cbd4;
+  -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: #20cbd4;
+  border-color: #19a1a9;
 }
 .search .searchfield {
   width: 100%;