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

@watermarkinsights/ripple 3.25.0 → 3.25.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 (522) hide show

package/dist/ripple/p-a73cf968.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmTimepickerCss","Timepicker","exports","this","twelveHrValid","twentyFourHrValid","uid","timeFormat","times","openUp","buttonAriaLabel","intl","formatMessage","id","defaultMessage","description","class_1","prototype","toggleTabbingOn","isTabbing","toggleTabbingOff","handleKey","ev","key","preventDefault","isExpanded","open","moveDown","selectedOption","moveUp","handleOptionClick","textContent","stopPropagation","close","focusOption","optionsList","setDropdownPosition","length","updateErrorState","displayedErrorMessage","errorMessage","componentWillLoad","label","console","error","el","generateId","generateTimes","componentDidLoad","optionsEl","classList","add","Array","from","querySelectorAll","value","processInput","isValidTime","input","test","startTime","i","h_1","Math","floor","hour","toString","padStart","m","min","concat","findNearestTimeInterval","time","formattedTime","formatToStorage","minutes","parseInt","slice","roundedMinutes","round","roundedHour","replace","handleListSelection","_this","option","filter","o","formatToDisplay","setValue","previousValue","inputEl","wmTimepickerNewValidValue","emit","wmTimepickerOnChange","isValid","newErrorMessage","determineErrorMessage","message","requiredError","requiredFieldMessage","invalidError","requiredField","splitTime","exec","hours","amPm","undefined","toUpperCase","includes","_a","itemToSelect","shouldOpenUp","remove","window","requestAnimationFrame","returnFocus","setTimeout","buttonEl","focus","item","forEach","tabIndex","position","prevItem","previousElementSibling","scrollTop","getBoundingClientRect","top","nextItem","nextElementSibling","bottom","offsetHeight","findIndex","x","clientHeight","prevEl","nextEl","handleInput","handleInputBlur","shouldPreventValidation","preventValidation","isRelatedTarget","tpWrapper","renderOptions","map","index","h","role","onClick","render","Host","invalid","onBlur","class","labelPosition","ref","t","htmlFor","onInput","disabled","placeholder","autocomplete","onFocus","onMouseDown","tabindex"],"sources":["src/components/wm-timepicker/wm-timepicker.scss?tag=wm-timepicker&encapsulation=shadow","src/components/wm-timepicker/wm-timepicker.tsx"],"sourcesContent":[":host,\nwm-timepicker {\n font-family: inherit;\n\n * {\n box-sizing: border-box;\n }\n\n .sr-only {\n @include srOnly;\n }\n\n @include label;\n\n .wrapper {\n .inner-wrapper {\n @include displayFlex();\n align-items: center;\n height: rem-calc(40);\n border: 1px solid $input-border-color;\n @include border-radius(3px);\n max-width: 236px; /* input is 200px or smaller, button is 36px */\n justify-content: space-between;\n position: relative;\n\n input {\n -moz-border-top-left-radius: 3px;\n -webkit-border-top-left-radius: 3px;\n border-top-left-radius: 3px;\n -moz-border-bottom-left-radius: 3px;\n -webkit-border-bottom-left-radius: 3px;\n border-bottom-left-radius: 3px;\n border: none;\n font-size: rem-calc(14);\n padding: rem-calc(10 15 8);\n min-width: 0;\n height: 100%;\n flex: 1;\n margin: 0;\n font-family: inherit;\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 button {\n all: unset;\n cursor: pointer;\n padding: rem-calc(0px 6px);\n height: rem-calc(38);\n background-color: $button-default-background;\n border: none;\n -moz-border-top-right-radius: 3px;\n -webkit-border-top-right-radius: 3px;\n border-top-right-radius: 3px;\n -moz-border-bottom-right-radius: 3px;\n -webkit-border-bottom-right-radius: 3px;\n border-bottom-right-radius: 3px;\n\n // reset styles inherited from Planning in browsers without shadow DOM\n -moz-border-top-left-radius: 0;\n -webkit-border-top-left-radius: 0;\n border-top-left-radius: 0;\n -moz-border-bottom-left-radius: 0;\n -webkit-border-bottom-left-radius: 0;\n border-bottom-left-radius: 0;\n @include box-shadow(none);\n\n .clock::after {\n @include mdi-icon;\n content: \"\\f150\";\n color: $button-default-text;\n font-size: rem-calc(24);\n padding: 0;\n line-height: rem-calc(40);\n }\n\n &:hover {\n background: mix(black, $button-default-background, 10%);\n @include box-shadow(none);\n }\n\n &:disabled {\n background-color: rgba(74, 74, 74, 0.05);\n pointer-events: none;\n @include box-shadow(none);\n .clock::after {\n color: #7b7b7b;\n }\n }\n\n [dir=\"RTL\"] & {\n right: auto;\n left: 0;\n }\n\n &:focus {\n outline: none;\n }\n\n &.user-is-tabbing:focus {\n @include focus-style;\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n }\n\n .options {\n margin: 0;\n padding: 0;\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n // value can be passed in to the component and overwrite the following\n max-height: rem-calc(305);\n @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n @include transition(transform 0.25s ease);\n @include scale($xVal: 1, $yVal: 0);\n @include transformOrigin(center top);\n @include border-radius(3px);\n position: absolute;\n top: 2.5rem;\n right: 0;\n background: #fff;\n z-index: 100;\n width: 100%;\n font-size: rem-calc(14);\n\n &.upwards {\n top: unset;\n bottom: 2.5rem;\n @include transformOrigin(center bottom);\n }\n\n &.hidden {\n visibility: hidden;\n }\n\n [role=\"option\"] {\n display: block;\n cursor: pointer;\n position: relative;\n padding: rem-calc(20);\n background: #fff;\n font-family: inherit;\n list-style: none;\n color: $body-text-color;\n\n &:hover {\n background: $background;\n outline: none;\n }\n\n &:focus {\n outline: none;\n background: $background;\n }\n\n &:not(:last-child) {\n border-bottom: 2px solid rgba(#2e1b46, 0.05);\n }\n }\n }\n\n .options.open {\n @include scale($xVal: 1, $yVal: 1);\n }\n }\n\n &.invalid {\n .inner-wrapper {\n @include invalidBorder;\n }\n\n .error {\n @include errorMessage;\n margin-bottom: 4px;\n top: 100%;\n left: 0;\n }\n }\n\n &:focus,\n &.focus {\n .inner-wrapper {\n @include field-focus;\n }\n }\n }\n}\n","import { h, Component, Host, Element, Prop, Watch, State, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl, generateId, shouldOpenUp, isRelatedTarget } from \"../../global/functions\";\n\n@Component({\n tag: \"wm-timepicker\",\n styleUrl: \"wm-timepicker.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class Timepicker {\n @Element() el!: HTMLWmTimepickerElement;\n private inputEl!: HTMLInputElement;\n private optionsEl!: HTMLUListElement;\n private tpWrapper!: HTMLDivElement;\n private buttonEl!: HTMLButtonElement;\n private optionsList!: HTMLLIElement[];\n\n @Prop() disabled: boolean = false;\n @Prop({ reflect: true, mutable: true }) value: string = \"\";\n @Prop() errorMessage?: string | null;\n @Prop() label: string = \"\";\n @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n @Prop() requiredField: boolean = false;\n @Prop() requiredFieldMessage?: string;\n @Prop() preventValidation?: string; // id or series of ids, validation will not occur when clicking an element with this id\n @State() selectedOption!: HTMLLIElement;\n @State() isExpanded: boolean = false;\n @State() isTabbing: boolean = false;\n @Event() wmTimepickerNewValidValue!: EventEmitter<{ value: string }>;\n @Event() wmTimepickerOnChange!: EventEmitter<{\n // deprecated in favor of wmTimepickerNewValidValue and standard input event\n value: string;\n isValid: boolean;\n }>;\n private twelveHrValid = /^(0?[0-9]|1[0-2])\\s*:?\\s*([0-5][0-9])?\\s?(a|p|am|pm)?$/i;\n private twentyFourHrValid = /^(0?[0-9]|1[0-9]|2[0-4])\\s*:?\\s*([0-5][0-9])?$/;\n private uid: string = \"\";\n private timeFormat: string = \"hh:mm\";\n private times: string[] = [];\n private openUp: boolean = false;\n private buttonAriaLabel: string = intl.formatMessage({\n id: \"time.selectTime\",\n defaultMessage: \"Select time\",\n description: \"Button text for screen readers.\",\n });\n @State() displayedErrorMessage?: string | null;\n\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n toggleTabbingOn() {\n this.isTabbing = true;\n }\n\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n toggleTabbingOff() {\n this.isTabbing = false;\n }\n\n @Listen(\"keydown\")\n handleKey(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n ev.preventDefault();\n if (this.isExpanded === false) {\n this.open(\"next\");\n } else {\n this.moveDown(this.selectedOption);\n }\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n if (this.isExpanded === false) {\n this.open(\"previous\");\n } else {\n this.moveUp(this.selectedOption);\n }\n break;\n case \"Enter\":\n case \" \":\n if (this.isExpanded) {\n ev.preventDefault();\n this.handleOptionClick(this.selectedOption.textContent!);\n }\n break;\n case \"Escape\":\n ev.preventDefault();\n if (this.isExpanded) {\n ev.stopPropagation(); // for instance if select is in a modal, esc should close the select but not the modal\n this.close();\n }\n break;\n case \"Tab\":\n if (this.isExpanded) {\n this.close(false);\n }\n break;\n case \"Home\":\n ev.preventDefault();\n if (this.isExpanded) {\n this.focusOption(this.optionsList[0]);\n this.setDropdownPosition(\"first\");\n }\n break;\n case \"End\":\n ev.preventDefault();\n if (this.isExpanded) {\n this.focusOption(this.optionsList[this.optionsList.length - 1]);\n this.setDropdownPosition(\"last\");\n }\n break;\n }\n }\n\n @Watch(\"errorMessage\")\n updateErrorState() {\n this.displayedErrorMessage = this.errorMessage;\n }\n\n componentWillLoad() {\n if (this.label === \"\") {\n console.error(\n \"You must include a label prop for the timepicker (for accessibility reasons), even if the label position is none.\"\n );\n }\n\n this.uid = this.el.id ? this.el.id : generateId();\n this.updateErrorState();\n this.timeFormat = intl.formatMessage({\n id: \"time.timeFormat\",\n defaultMessage: \"hh:mm\",\n });\n\n this.times = this.generateTimes();\n }\n\n componentDidLoad() {\n this.optionsEl.classList.add(\"hidden\");\n this.optionsList = Array.from(this.optionsEl.querySelectorAll(\"li\"));\n\n if (this.value) {\n this.processInput();\n }\n }\n\n isValidTime(input: string) {\n return this.twelveHrValid.test(input) || this.twentyFourHrValid.test(input);\n }\n\n generateTimes() {\n let times = [];\n let startTime = 0;\n\n for (let i = 0; startTime < 24 * 60; i++) {\n const h = Math.floor(startTime / 60);\n const hour = h.toString().padStart(2, \"0\");\n const m = (startTime % 60).toString();\n const min = m.padStart(2, \"0\");\n times[i] = `${hour}:${min}`;\n startTime = startTime + 15;\n }\n\n return times;\n }\n\n findNearestTimeInterval(time: string) {\n let formattedTime = this.formatToStorage(time);\n const minutes = parseInt(formattedTime.slice(3, 5));\n\n // first find the closest 15 min increment\n if (minutes % 15 !== 0) {\n const hour = parseInt(formattedTime.slice(0, 2));\n let roundedMinutes = (Math.round(minutes / 15) * 15).toString().padStart(2, \"0\");\n if (roundedMinutes === \"60\") {\n roundedMinutes = \"00\";\n let roundedHour = hour + 1;\n if (roundedHour === 24) {\n roundedHour = 0;\n }\n formattedTime = formattedTime.replace(\n `${hour.toString().padStart(2, \"0\")}:`,\n `${roundedHour.toString().padStart(2, \"0\")}:`\n );\n }\n if (parseInt(roundedMinutes) < 8) {\n roundedMinutes = \"00\";\n }\n time = formattedTime.replace(`:${minutes.toString().padStart(2, \"0\")}`, `:${roundedMinutes}`);\n }\n\n return time;\n }\n\n handleListSelection(time: string) {\n time = this.findNearestTimeInterval(time);\n\n const option = this.optionsList.filter((o) => o.textContent == this.formatToDisplay(time))[0];\n option && this.focusOption(option);\n }\n\n setValue(time: string) {\n const previousValue = this.value;\n this.inputEl.value = this.formatToDisplay(time);\n this.value = this.formatToStorage(time);\n // update the selection in the list\n // so it opens on the closest item\n this.handleListSelection(time);\n\n if (previousValue !== this.value) {\n this.wmTimepickerNewValidValue.emit({ value: this.value });\n }\n // deprecated in favor of wmTimepickerNewValidValue and input\n this.wmTimepickerOnChange.emit({\n value: this.value,\n isValid: !!this.displayedErrorMessage,\n });\n }\n\n processInput() {\n if (this.isValidTime(this.value)) {\n this.setValue(this.value);\n }\n const newErrorMessage = this.determineErrorMessage();\n this.displayedErrorMessage = newErrorMessage;\n }\n\n determineErrorMessage(): string | undefined | null {\n let message: string | undefined | null = this.errorMessage;\n const requiredError =\n this.requiredFieldMessage ||\n intl.formatMessage({\n id: \"time.requiredError\",\n defaultMessage: \"A time is required.\",\n });\n const invalidError = intl.formatMessage({\n id: \"time.invalidTime\",\n defaultMessage: \"Please enter a valid time.\",\n });\n const isValid = this.isValidTime(this.value);\n\n if (isValid && !this.errorMessage) {\n message = null;\n } else if (!isValid && !this.errorMessage) {\n if (this.requiredField && !this.value) {\n message = requiredError;\n } else if (this.value) {\n message = invalidError;\n } else {\n message = null;\n }\n }\n\n return message;\n }\n\n splitTime(time: string): [number, string, string?] {\n const splitTime = this.twelveHrValid.exec(time) || this.twentyFourHrValid.exec(time);\n let hours = parseInt(splitTime![1]);\n let minutes = splitTime![2] || \"00\";\n let amPm = splitTime ? splitTime[3] : undefined;\n\n // handles edge case uncaught by regex '0pm'\n if (hours === 0 && amPm?.toUpperCase().includes(\"P\")) {\n // if user types '0pm' we change it to midnight\n amPm = \"AM\";\n }\n return [hours, minutes, amPm];\n }\n\n formatToDisplay(time: string) {\n let [hours, minutes, amPm] = this.splitTime(time);\n // at the moment the component only displays in 12hr AM/PM\n if (hours === 12 && !amPm) {\n amPm = \"PM\";\n }\n if (hours === 0 || hours === 24) {\n hours = 12;\n }\n if (hours > 12) {\n hours -= 12;\n amPm = \"PM\";\n }\n if (amPm && amPm.toUpperCase().includes(\"P\")) {\n amPm = \"PM\";\n } else {\n amPm = \"AM\";\n }\n\n return `${hours.toString().padStart(2, \"0\")}:${minutes} ${amPm}`;\n }\n\n formatToStorage(time: string) {\n let [hours, minutes, amPm] = this.splitTime(time);\n if (hours === 24) {\n hours = 0;\n }\n if (hours === 12 && amPm && amPm.toUpperCase().includes(\"A\")) {\n hours -= 12;\n }\n if (amPm && amPm.toUpperCase().includes(\"P\") && hours !== 12) {\n hours += 12;\n }\n return `${hours.toString().padStart(2, \"0\")}:${minutes}`;\n }\n\n open(itemToSelect?: \"next\" | \"previous\") {\n this.openUp = shouldOpenUp(this.el, this.optionsEl);\n this.isExpanded = true;\n this.optionsEl.classList.remove(\"hidden\");\n\n if (this.errorMessage || !this.value) {\n this.handleListSelection(\"09:00\");\n }\n this.setDropdownPosition(\"center\", this.selectedOption);\n this.focusOption(this.selectedOption);\n\n window.requestAnimationFrame(() => {\n if (itemToSelect === \"next\") {\n this.moveDown(this.selectedOption);\n } else if (itemToSelect === \"previous\") {\n this.moveUp(this.selectedOption);\n }\n });\n }\n\n close(returnFocus: boolean = true) {\n this.isExpanded = false;\n\n window.setTimeout(() => {\n this.optionsEl.classList.add(\"hidden\");\n // Returns focus to button after popup closes (no need if user is tabbing)\n // Delay is necessary for screenreader to get new expanded state before focus\n // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here\n // also UX wise, it makes sense for the button to only be focused after the animation is complete\n if (returnFocus) {\n this.buttonEl.focus();\n }\n }, 150);\n }\n\n focusOption(item: HTMLLIElement): void {\n this.optionsList.forEach((option) => {\n option.tabIndex = -1;\n });\n\n item.tabIndex = 0;\n this.selectedOption = item;\n item.focus();\n }\n\n setDropdownPosition(position: string, item?: HTMLLIElement) {\n switch (position) {\n case \"top\":\n const prevItem = item?.previousElementSibling as HTMLLIElement;\n this.optionsEl.scrollTop =\n prevItem.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;\n break;\n case \"bottom\":\n const nextItem = item?.nextElementSibling as HTMLLIElement;\n this.optionsEl.scrollTop =\n nextItem.getBoundingClientRect().bottom -\n this.optionsEl.getBoundingClientRect().top +\n this.optionsEl.scrollTop -\n this.optionsEl.offsetHeight;\n break;\n case \"center\":\n this.optionsEl.scrollTop =\n (this.optionsList.findIndex((x) => x.textContent === item?.textContent) - 2) * item!.offsetHeight;\n break;\n case \"first\":\n this.optionsEl.scrollTop = 0;\n break;\n case \"last\":\n this.optionsEl.scrollTop = this.optionsList[0].clientHeight * this.optionsList.length;\n break;\n }\n }\n\n moveUp(el: HTMLLIElement) {\n const prevEl = el.previousElementSibling as HTMLLIElement;\n if (prevEl) {\n // scroll option to top of dropdown if partially obscured / out of view\n if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {\n this.setDropdownPosition(\"top\", el);\n }\n this.focusOption(prevEl);\n } else {\n this.focusOption(this.optionsList[this.optionsList.length - 1]);\n this.setDropdownPosition(\"last\");\n }\n }\n\n moveDown(el: HTMLLIElement) {\n const nextEl = el.nextElementSibling as HTMLLIElement;\n if (nextEl) {\n // scroll option to bottom of dropdown if partially obscured / out of view\n if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {\n this.setDropdownPosition(\"bottom\", el);\n }\n this.focusOption(nextEl);\n } else {\n this.focusOption(this.optionsList[0]);\n this.setDropdownPosition(\"first\");\n }\n }\n\n handleOptionClick(time: string) {\n this.close();\n this.setValue(time);\n this.processInput();\n }\n\n handleInput() {\n this.value = this.inputEl.value;\n if (this.isValidTime(this.value)) {\n this.handleListSelection(this.findNearestTimeInterval(this.value));\n this.setDropdownPosition(\"center\", this.selectedOption);\n }\n }\n\n handleInputBlur(ev: FocusEvent) {\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.processInput();\n }\n this.tpWrapper.classList.remove(\"focus\");\n }\n\n renderOptions() {\n return this.times.map((time, index) => (\n <li id={`option${index + 1}`} role=\"option\" onClick={() => this.handleOptionClick(time)}>\n {this.formatToDisplay(time)}\n </li>\n ));\n }\n\n render() {\n return (\n <Host id={this.uid} invalid={!!this.displayedErrorMessage ? \"true\" : null} onBlur={() => this.close(false)}>\n <div\n class={`wrapper label-${this.labelPosition} ${!!this.displayedErrorMessage ? \"invalid\" : \"\"}`}\n ref={(t) => (this.tpWrapper = t as HTMLDivElement)}\n >\n <div class=\"label-wrapper\">\n {this.labelPosition !== \"none\" && (\n <label id={`label-${this.uid}`} class=\"label\" htmlFor={`time-input-${this.uid}`}>\n {this.label}\n {this.requiredField && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n )}\n </div>\n <div>\n <div class=\"inner-wrapper\">\n <input\n id={`time-input-${this.uid}`}\n aria-label={this.label}\n aria-describedby={`error-${this.uid}`}\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n onBlur={(ev) => this.handleInputBlur(ev)}\n onInput={() => this.handleInput()}\n disabled={this.disabled}\n aria-required={this.requiredField ? \"true\" : null}\n placeholder={this.timeFormat}\n autocomplete=\"off\"\n onFocus={() => this.tpWrapper.classList.add(\"focus\")}\n />\n <button\n id={`btn-${this.uid}`}\n class={this.isTabbing ? \"user-is-tabbing\" : \"\"}\n ref={(el) => (this.buttonEl = el as HTMLButtonElement)}\n disabled={this.disabled}\n aria-controls={`list-${this.uid}`}\n aria-expanded={this.isExpanded ? \"true\" : \"false\"}\n aria-label={this.buttonAriaLabel}\n aria-describedby={`time-input-${this.uid}`}\n onClick={() => (this.isExpanded ? this.close() : this.open())}\n // This addresses an issue in Safari, where clicking buttons does not focus them\n // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event\n onMouseDown={(ev) => {\n ev.preventDefault();\n this.buttonEl.focus();\n }}\n >\n <span class=\"clock\" />\n </button>\n <ul\n class={`options ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\n id={`list-${this.uid}`}\n role=\"listbox\"\n aria-labelledby={`label-${this.uid}`}\n aria-describedby={this.isExpanded ? \"collapsed\" : null} //For screenreader, to announce state when expanded\n tabindex={-1}\n ref={(el) => (this.optionsEl = el as HTMLUListElement)}\n >\n {this.renderOptions()}\n </ul>\n </div>\n <div id={`error-${this.uid}`} class=\"error\" aria-live=\"assertive\" aria-atomic=\"true\">\n {this.displayedErrorMessage}\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ripple/p-aed625c1.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmModalHeaderCss","ModalHeader","exports","class_1","prototype","componentWillLoad","_this","this","uid","el","parentElement","addEventListener","closeButtonEl","focus","emitParentCloseEvent","parentModal","emitCloseEvent","render","h","Host","class","id","concat","heading","subheading","icon","tooltip","globalMessages","close","ref","onClick"],"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"],"mappings":"8OAAA,IAAMA,EAAmB,ouB,ICOZC,EAAWC,EAAA,6B,qCAIK,G,gBACG,E,CAG9BC,EAAAC,UAAAC,kBAAA,eAAAC,EAAAC,KACEA,KAAKC,IAAOD,KAAKE,GAAGC,cAAqCF,IAKzDD,KAAKE,GAAGC,cAAeC,iBAAiB,qBAAqB,WAC3DL,EAAKM,cAAcC,O,KAIvBV,EAAAC,UAAAU,qBAAA,WACE,IAAMC,EAAcR,KAAKE,GAAGC,cAE5BK,EAAYC,gB,EASdb,EAAAC,UAAAa,OAAA,eAAAX,EAAAC,KACE,OACEW,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,cACTF,EAAA,WACEA,EAAA,MACEE,MAAM,QACNC,GAAI,yBAAAC,OAAyBf,KAAKC,MAIjCD,KAAKgB,QACNL,EAAA,QAAME,MAAM,YAAYb,KAAKiB,cAGjCN,EAAA,2BACc,eACZO,KAAK,OACLC,QAASC,EAAeC,MAAK,mBACZ,OACjBP,GAAI,kBAAAC,OAAkBf,KAAKC,KAC3BqB,IAAK,SAACpB,GAAE,OAAMH,EAAKM,cAAgBH,CAA3B,EACRqB,QAAS,WAAM,OAAAxB,EAAKQ,sBAAL,K,uHArDH,I"}

package/dist/ripple/p-b5b521e4.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["privChartPopoverCss","ChartPopover","exports","this","chartEl","el","parentElement","getRootNode","host","popoverWidth","popoverClicked","Object","defineProperty","class_1","prototype","nodeName","wmChartPopoverButtonTriggered","wmProgressIndicatorButtonTriggered","handleClickOnDocument","open","handleClick","ev","popoverBtnClicked","btnEl","target","contains","handleButtonClick","sliceRef","click","eventToEmit","emit","renderLiveRegion","liveRegion","innerHTML","wrapper","document","createElement","titleEl","popoverTitle","appendChild","textEl","popoverText","buttonText","buttonEl","intl","formatMessage","id","defaultMessage","positionPopover","style","top","coords","y","window","innerWidth","x","left","render","_this","titleAffordance","h","Host","class","concat","tabindex","focusable","ref","onClick","height","width","fill","d"],"sources":["src/components/charts/priv-chart-popover/priv-chart-popover.scss?tag=priv-chart-popover","src/components/charts/priv-chart-popover/priv-chart-popover.tsx"],"sourcesContent":["priv-chart-popover {\n position: fixed;\n\n z-index: 10;\n border-radius: rem-calc(3);\n @include box-shadow(0 11px 15px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.12));\n background-color: $light-background;\n font-size: 0.875rem;\n text-align: left;\n\n &.user-is-tabbing {\n .button-text {\n background: linear-gradient(90deg, #3862e9 66%, transparent 0) repeat-x;\n background-size: 6px 3px;\n background-position: 0 1em;\n border-radius: 0;\n line-height: normal;\n }\n }\n}\n\n.sr-only {\n @include srOnly;\n}\n\n.popover {\n width: rem-calc(168);\n padding: rem-calc(10 15);\n box-sizing: border-box;\n\n & .title {\n font-size: 1em;\n font-weight: 500;\n margin: 0;\n padding-top: 0;\n padding-left: 0;\n padding-bottom: rem-calc(4);\n\n &.positive {\n color: $success;\n }\n\n &.negative {\n color: $error;\n }\n }\n\n & .text {\n margin: 0;\n margin-bottom: rem-calc(8);\n }\n\n & .popover-button {\n @include box-shadow(none);\n position: relative;\n display: inline-block;\n margin-left: rem-calc(16);\n padding-left: 0;\n padding-right: 0;\n height: auto;\n border: none;\n background: transparent;\n cursor: pointer;\n\n text-decoration: none;\n letter-spacing: 0;\n text-transform: none;\n text-align: initial;\n font-size: rem-calc(14);\n font-weight: 700;\n color: $button-default-text;\n line-height: normal;\n\n & .btn-icon {\n position: absolute;\n top: rem-calc(3);\n left: rem-calc(-16);\n }\n\n &:focus {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border: 0;\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n background: none;\n color: #454077;\n span {\n text-decoration: underline;\n }\n }\n }\n}\n","import { h, Component, Prop, Host, Element, Watch, Listen, Event, EventEmitter } from \"@stencil/core\";\nimport { intl } from \"../../../global/functions\";\n\n@Component({\n tag: \"priv-chart-popover\",\n styleUrl: \"priv-chart-popover.scss\",\n})\nexport class ChartPopover {\n @Element() el!: HTMLPrivChartPopoverElement;\n private chartEl: Element = (this.el.parentElement!.getRootNode() as ShadowRoot).host;\n private btnEl?: HTMLButtonElement;\n private liveRegion?: HTMLDivElement;\n\n @Event()\n wmChartPopoverButtonTriggered!: EventEmitter<HTMLWmChartSliceElement>;\n @Event()\n wmProgressIndicatorButtonTriggered!: EventEmitter<HTMLWmProgressSliceElement>;\n get eventToEmit() {\n return this.chartEl.nodeName === \"WM-CHART\"\n ? this.wmChartPopoverButtonTriggered\n : this.wmProgressIndicatorButtonTriggered;\n }\n\n @Prop() sliceRef?: HTMLWmChartSliceElement;\n @Prop() popoverTitle?: string;\n @Prop() popoverText?: string;\n @Prop() buttonText?: string;\n @Prop({ mutable: true }) open: boolean = false;\n @Prop() coords: { x?: number; y?: number } = {};\n private popoverWidth: number = 168;\n\n private popoverClicked = false;\n\n @Listen(\"click\", { capture: false, target: \"document\" })\n handleClickOnDocument() {\n // because this listener is set document-wide, whenever something inside it is clicked\n // the event target returned will always be the host (wm-chart)\n // the element within wm-chart is determined by the other listener and saved as var popoverClicked for use here\n // capture = false in @Listen ensures order of execution\n this.open = this.popoverClicked;\n this.popoverClicked = false;\n }\n\n @Listen(\"click\", { capture: false })\n handleClick(ev: MouseEvent) {\n let popoverBtnClicked = false;\n if (this.btnEl) {\n popoverBtnClicked = ev.target === this.btnEl || this.btnEl.contains(ev.target as HTMLElement);\n }\n // if the click is on the popover (except the popover button),\n // set popoverClicked to true. It will be used by the other listener above\n this.popoverClicked = !popoverBtnClicked && (ev.target === this.el || this.el.contains(ev.target as HTMLElement));\n }\n\n handleButtonClick() {\n if (this.sliceRef) {\n this.sliceRef.click();\n this.eventToEmit.emit(this.sliceRef);\n }\n this.open = false;\n }\n\n renderLiveRegion() {\n if (this.liveRegion) {\n this.liveRegion.innerHTML = \"\";\n\n const wrapper = document.createElement(\"div\");\n\n const titleEl = document.createElement(\"span\");\n titleEl.innerHTML = this.popoverTitle + \" \" || \"\";\n wrapper.appendChild(titleEl);\n\n const textEl = document.createElement(\"span\");\n textEl.innerHTML = this.popoverText + \" \" || \"\";\n wrapper.appendChild(textEl);\n\n if (this.buttonText) {\n const buttonEl = document.createElement(\"span\");\n buttonEl.innerHTML =\n this.buttonText +\n \" \" +\n intl.formatMessage({\n id: \"chart.infoButton\",\n defaultMessage: \"Button. Click for more information.\",\n });\n wrapper.appendChild(buttonEl);\n }\n this.liveRegion.appendChild(wrapper);\n }\n }\n\n @Watch(\"coords\")\n positionPopover() {\n this.el!.style.top = this.coords.y + \"px\";\n if (window.innerWidth - this.coords.x! >= this.popoverWidth + 10) {\n this.el!.style.left = this.coords.x + \"px\"; // opens on the right\n } else {\n this.el!.style.left = this.coords.x! - this.popoverWidth + \"px\"; // opens on the left\n }\n }\n\n render() {\n const titleAffordance = this.popoverTitle && (this.popoverTitle[0] === \"-\" ? \"negative\" : this.popoverTitle[0] === \"+\" ? \"positive\" : \"\"); \n return (\n <Host>\n {!!this.open ? (\n <div aria-hidden=\"true\" class=\"popover\">\n <h1 class={`title ${titleAffordance}`}>{this.popoverTitle}</h1>\n <p class=\"text\">{this.popoverText}</p>\n {this.buttonText ? (\n // @ts-ignore\n <button\n tabindex=\"-1\"\n // @ts-ignore\n focusable=\"false\"\n ref={(el) => (this.btnEl = el as HTMLButtonElement)}\n class=\"popover-button\"\n onClick={() => this.handleButtonClick()}\n >\n <svg class=\"btn-icon\" height=\"9\" width=\"9\">\n <path fill=\"#575195\" d=\"M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z\" />\n </svg>\n <span class=\"button-text\">{this.buttonText}</span>\n </button>\n ) : (\n \"\"\n )}\n </div>\n ) : (\n \"\"\n )}\n <div\n ref={(el) => (this.liveRegion = el as HTMLDivElement)}\n class=\"live-region sr-only\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n {this.open && this.renderLiveRegion()}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ripple/p-b7451e73.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmToggletipCss","Toggletip","exports","this","tooltipMessage","intl","formatMessage","id","defaultMessage","Object","defineProperty","class_1","prototype","tooltip","tooltipText","componentWillLoad","validTooltipPlacement","label","console","error","tempTooltip","includes","tooltipPosition","concat","warn","handleKeydown","ev","key","preventDefault","isOpen","stopPropagation","close","toggleTabbingOn","isTabbing","toggleTabbingOff","handleClick","target","el","contains","announceToggletip","open","hideTooltip","handleBlur","liveRegionEl","innerHTML","showTooltip","setToggletipPosition","tooltipEl","classList","add","remove","_this","setTimeout","shouldOpenUp","toggletipEl","replace","shouldOpenDown","shouldShiftRight","shouldShiftLeft","render","h","Host","class","type","onClick","onMouseEnter","onMouseLeave","onFocus","onBlur","ref","role"],"sources":["src/components/wm-toggletip/wm-toggletip.scss?tag=wm-toggletip&encapsulation=shadow","src/components/wm-toggletip/wm-toggletip.tsx"],"sourcesContent":["@mixin toggletipTriangleBase() {\n content: \"\";\n position: absolute;\n border: solid transparent;\n height: 0;\n width: 0;\n pointer-events: none;\n}\n@mixin toggletipTriangleTop() {\n @include toggletipTriangleBase();\n bottom: 100%;\n border-bottom-color: $charcoal;\n border-bottom-width: rem-calc(4);\n border-left-width: rem-calc(6);\n border-right-width: rem-calc(6);\n margin-left: rem-calc(-6);\n left: 50%;\n}\n@mixin toggletipTriangleBottom() {\n @include toggletipTriangleBase();\n top: 100%;\n border-top-color: $charcoal;\n border-top-width: rem-calc(4);\n border-left-width: rem-calc(6);\n border-right-width: rem-calc(6);\n margin-left: rem-calc(-6);\n left: 50%;\n}\n@mixin toggletipTriangleLeft() {\n @include toggletipTriangleBase();\n bottom: 100%;\n border-right-color: $charcoal;\n border-right-width: rem-calc(4);\n border-top-width: rem-calc(6);\n border-bottom-width: rem-calc(6);\n border-left-width: 0px;\n top: calc(50% - 6px);\n left: rem-calc(-3);\n}\n@mixin toggletipTriangleRight() {\n @include toggletipTriangleBase();\n bottom: 100%;\n border-left-color: $charcoal;\n border-left-width: rem-calc(4);\n border-top-width: rem-calc(6);\n border-bottom-width: rem-calc(6);\n border-right-width: 0px;\n top: calc(50% - 6px);\n right: rem-calc(-3);\n}\n@mixin toggletipTriangleTopLeft() {\n @include toggletipTriangleTop();\n margin-left: unset;\n left: rem-calc(14);\n}\n@mixin toggletipTriangleTopRight() {\n @include toggletipTriangleTop();\n left: unset;\n margin-left: unset;\n right: rem-calc(14);\n}\n@mixin toggletipTriangleBottomLeft() {\n @include toggletipTriangleBottom();\n margin-left: unset;\n left: rem-calc(14);\n}\n@mixin toggletipTriangleBottomRight() {\n @include toggletipTriangleBottom();\n left: unset;\n margin-left: unset;\n right: rem-calc(14);\n}\n\n:host,\nwm-toggletip {\n display: inline-block;\n position: relative;\n height: 40px;\n width: 40px;\n\n .button {\n display: flex;\n background: none;\n border: none;\n padding: 0;\n width: inherit;\n height: inherit;\n border-radius: 50%;\n justify-content: center;\n align-items: center;\n position: relative;\n cursor: pointer;\n &:before {\n @include mdi-icon;\n content: \"\\f2fc\";\n font-size: 16px;\n color: $charcoal;\n background: radial-gradient(white 40%, transparent 0%); // adds white \"font-color\" to icon\n }\n &:focus {\n outline: none;\n &.user-is-tabbing {\n @include focus-style;\n }\n }\n }\n\n .tooltip {\n position: absolute;\n opacity: 0;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n pointer-events: none;\n\n font-family: inherit;\n font-size: rem-calc(14);\n text-transform: none;\n font-weight: normal;\n background: black;\n color: #fff;\n padding: rem-calc(6);\n line-height: normal;\n z-index: 30;\n white-space: nowrap;\n\n &.hover {\n clip: auto;\n width: auto;\n height: auto;\n opacity: 1;\n transition: opacity 500ms 500ms;\n padding: rem-calc(6);\n white-space: nowrap;\n }\n }\n\n .toggletip {\n position: absolute;\n max-width: rem-calc(220);\n width: max-content;\n padding: rem-calc(8) rem-calc(12);\n border-radius: rem-calc(3);\n background: $charcoal;\n color: white;\n font-size: 14px;\n z-index: 30;\n\n &.top {\n &:before {\n @include toggletipTriangleBottom();\n }\n }\n\n &.bottom {\n &:before {\n @include toggletipTriangleTop();\n }\n }\n\n &.right {\n &:before {\n @include toggletipTriangleLeft();\n }\n }\n\n &.left {\n &:before {\n @include toggletipTriangleRight();\n }\n }\n\n &.bottom-right {\n &:before {\n @include toggletipTriangleTopLeft();\n }\n }\n\n &.bottom-left {\n &:before {\n @include toggletipTriangleTopRight();\n }\n }\n\n &.top-right {\n &:before {\n @include toggletipTriangleBottomLeft();\n }\n }\n\n &.top-left {\n &:before {\n @include toggletipTriangleBottomRight();\n }\n }\n\n &.hidden {\n transform: scale(0, 0) !important; // ensure el doesn't take space on screen when hidden\n visibility: hidden;\n }\n }\n\n .toggletip,\n .tooltip {\n &.top {\n transform: translate(-50%, 0%);\n bottom: 40px;\n left: 20px;\n }\n\n &.bottom {\n transform: translate(-50%, 0%);\n top: 40px;\n left: 20px;\n }\n\n &.right {\n transform: translate(100%, calc(-50% - 20px));\n right: 0px;\n }\n\n &.left {\n transform: translate(-100%, calc(-50% - 20px));\n left: 0px;\n }\n\n &.bottom-right {\n top: 40px;\n left: 0px;\n }\n\n &.bottom-left {\n top: 40px;\n right: 0px;\n }\n\n &.top-right {\n bottom: 40px;\n left: 0px;\n }\n\n &.top-left {\n bottom: 40px;\n right: 0px;\n }\n }\n\n .sr-only {\n @include srOnly;\n }\n}\n","import { Component, Host, h, Element, Prop, State, Listen } from \"@stencil/core\";\n\nimport { shouldOpenUp, shouldOpenDown, shouldShiftLeft, shouldShiftRight, intl } from \"../../global/functions\";\nimport { TooltipPlacement } from \"../../global/interfaces\";\n@Component({\n tag: \"wm-toggletip\",\n styleUrl: \"wm-toggletip.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class Toggletip {\n @Element() el!: HTMLWmToggletipElement;\n\n @Prop() label?: string;\n @Prop({ mutable: true }) tooltip?: string; // mutable for deprecation transition\n @Prop() tooltipText?: string; // DEPRECATED\n get tempTooltip() {\n // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out\n return this.tooltip || this.tooltipText;\n }\n @Prop({ mutable: true, reflect: true }) tooltipPosition: TooltipPlacement = \"bottom-right\";\n @State() isOpen: boolean = false;\n @State() isTabbing: boolean = false;\n\n private toggletipEl!: HTMLDivElement;\n private tooltipEl!: HTMLDivElement;\n private liveRegionEl!: HTMLDivElement;\n private tooltipMessage = intl.formatMessage({\n id: \"toggletip.moreInformation\",\n defaultMessage: \"More information\",\n });\n\n componentWillLoad() {\n const validTooltipPlacement = [\n \"top\",\n \"right\",\n \"bottom\",\n \"left\",\n \"top-right\",\n \"top-left\",\n \"bottom-right\",\n \"bottom-left\",\n ];\n\n if (!this.label) {\n console.error(\"wm-toggletip must have a label property\");\n }\n if (!this.tempTooltip) {\n console.error(\"wm-toggletip must have a tooltip property\");\n }\n if (!validTooltipPlacement.includes(this.tooltipPosition)) {\n console.error(\n `wm-toggletip: tooltip-position has an invalid value of \"${this.tooltipPosition}\", make sure to use one of the following values: ${validTooltipPlacement}`\n );\n }\n if (this.tooltipText) {\n console.warn(\"wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.\");\n }\n }\n\n @Listen(\"keydown\")\n handleKeydown(ev: KeyboardEvent) {\n switch (ev.key) {\n case \"Escape\":\n ev.preventDefault();\n if (this.isOpen) {\n ev.stopPropagation(); // prevent closing modal if within one\n this.close();\n }\n break;\n case \"Tab\":\n if (this.isOpen) {\n this.close();\n }\n }\n }\n\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n toggleTabbingOn() {\n this.isTabbing = true;\n }\n\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n toggleTabbingOff() {\n this.isTabbing = false;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: MouseEvent) {\n if (this.isOpen) {\n if (ev.target === this.el || this.el.contains(ev.target as HTMLElement)) {\n // Re-announce if clicking any part of the component while open\n this.announceToggletip();\n } else {\n this.close();\n }\n }\n }\n\n open() {\n this.isOpen = true;\n this.announceToggletip();\n }\n\n close() {\n this.isOpen = false;\n this.hideTooltip();\n }\n\n handleBlur() {\n this.hideTooltip();\n // clear liveregion on blur to prevent old announcement text from being picked up by screen readers\n this.liveRegionEl.innerHTML = \"\";\n }\n\n showTooltip() {\n // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class\n // Otherwise, the tooltip will flash on-screen and possibly create scrollbars\n this.setToggletipPosition();\n this.tooltipEl.classList.add(\"hover\");\n }\n\n hideTooltip() {\n this.tooltipEl.classList.remove(\"hover\");\n }\n\n announceToggletip() {\n this.liveRegionEl.innerHTML = \"\";\n setTimeout(() => {\n this.liveRegionEl.innerHTML = this.tempTooltip!;\n }, 10);\n }\n\n setToggletipPosition() {\n // Vertical\n if (this.tooltipPosition.includes(\"bottom\") && shouldOpenUp(this.el, this.toggletipEl)) {\n this.tooltipPosition = this.tooltipPosition.replace(\"bottom\", \"top\") as TooltipPlacement;\n } else if (this.tooltipPosition.includes(\"top\") && shouldOpenDown(this.el, this.toggletipEl)) {\n this.tooltipPosition = this.tooltipPosition.replace(\"top\", \"bottom\") as TooltipPlacement;\n }\n\n // Horizontal\n if (this.tooltipPosition.includes(\"left\") && shouldShiftRight(this.el, this.toggletipEl)) {\n this.tooltipPosition = this.tooltipPosition.replace(\"left\", \"right\") as TooltipPlacement;\n } else if (this.tooltipPosition.includes(\"right\") && shouldShiftLeft(this.el, this.toggletipEl)) {\n this.tooltipPosition = this.tooltipPosition.replace(\"right\", \"left\") as TooltipPlacement;\n }\n }\n\n render() {\n return (\n <Host>\n <button\n class={`button ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}\n type=\"button\"\n aria-label={this.label}\n onClick={() => {\n this.setToggletipPosition();\n this.open();\n }}\n // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events\n onMouseEnter={() => this.showTooltip()}\n onMouseLeave={() => this.hideTooltip()}\n onFocus={() => this.showTooltip()}\n onBlur={() => this.handleBlur()}\n ></button>\n <div\n ref={(el) => (this.tooltipEl = el as HTMLDivElement)}\n class={`tooltip ${this.tooltipPosition} ${this.isOpen ? \"hidden\" : \"\"}`}\n aria-hidden=\"true\"\n >\n {this.tooltipMessage}\n </div>\n <div\n ref={(el) => (this.toggletipEl = el as HTMLDivElement)}\n class={`toggletip ${this.isOpen ? \"\" : \"hidden\"} ${this.tooltipPosition}`}\n >\n {this.tempTooltip}\n </div>\n <div\n ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n class=\"live-region sr-only\"\n role=\"status\"\n // Aria-live is implicit with role=\"status\", however this is not registered by Apple VoiceOver\n aria-live=\"polite\"\n aria-atomic=\"true\"\n ></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ripple/p-bafdcb4e.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmSnackbarCss","Snackbar","exports","this","parsedNotifications","isTabbing","timers","newNotification","class_1","prototype","updateSnacks","newValue","_this","parsedData","JSON","parse","length","prevNotificationsLength","i","id","toString","message","link","newWindow","__spreadArray","newTimer","window","setTimeout","snackExpired","storeElToFocusOnDismiss","componentWillLoad","uid","el","generateId","componentDidUpdate","focusLinkAndDisableTimer","toggleTabbingOn","toggleTabbingOff","latestNotification","shadowRoot","querySelector","concat","focus","stopTimer","triggeringButton","document","activeElement","focusOnDismiss","snackDismissed","notification","endSnack","wmSnackbarSnackFinished","emit","userFinishedSnack","snackLinkClicked","wmSnackbarActionTriggered","userTriggeredAction","forEach","notif","index","clearTimeout","filter","timer","ind","renderSnackbars","map","h","class","tabindex","onFocus","globalMessages","onClick","onKeyDown","ev","key","onMouseEnter","showTooltip","target","close","onMouseLeave","hideTooltip","onBlur","renderLiveRegion","srAnnouncement","region","innerHTML","wrapper","createElement","appendChild","render","snackbars","wrappingClass"],"sources":["src/components/wm-snackbar/wm-snackbar.scss?tag=wm-snackbar&encapsulation=shadow","src/components/wm-snackbar/wm-snackbar.tsx"],"sourcesContent":[":host,\nwm-snackbar {\n * {\n box-sizing: border-box;\n margin: unset; //Edge\n }\n\n .wm-snackbars {\n position: fixed;\n bottom: rem-calc(0);\n left: rem-calc(20);\n right: rem-calc(20);\n padding: rem-calc(4 10 30);\n z-index: 2001;\n max-width: rem-calc(568);\n max-height: rem-calc(280);\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n\n &.empty {\n @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .wm-snack-wrapper {\n width: 100%;\n height: 100%;\n\n &:not(:last-child) {\n margin-bottom: rem-calc(20);\n }\n\n .wm-snackbar {\n @include shadow8;\n @include displayFlex;\n @include alignItems(center);\n @include transition(all 0.25s 0ms cubic-bezier(0.4, 0, 1, 1));\n font-size: rem-calc(14);\n color: #fff;\n padding: rem-calc(15 30);\n background: #4a4a4a;\n opacity: 0;\n left: 0;\n position: relative;\n font-family: inherit;\n\n .link {\n letter-spacing: 0;\n text-transform: none;\n font-size: rem-calc(14);\n border: none;\n background: transparent;\n padding-left: 0;\n padding-right: 0;\n height: auto;\n border-radius: 0;\n line-height: 1;\n color: $snackbar-link-color;\n margin: rem-calc(0 50 0 10);\n text-decoration: none;\n font-weight: 600;\n cursor: pointer;\n\n &.new-window::after {\n @include mdi-icon;\n display: inline;\n content: \"\\f137\";\n margin-left: rem-calc(4);\n }\n\n &:hover {\n text-decoration: underline;\n }\n\n &:focus {\n outline: none;\n border: none;\n }\n\n &::-moz-focus-inner {\n border: 0;\n outline: none;\n }\n }\n\n &:not(:last-child) {\n margin-bottom: rem-calc(20);\n }\n\n &.active:not(button) {\n opacity: 1;\n }\n\n .wm-snackbarmsg {\n @include displayFlex;\n @include justifyContent(space-between);\n @include alignItems(center);\n // font-size: rem-calc(14);\n width: 100%;\n position: relative;\n padding: 0;\n\n .msgtext {\n width: 100%;\n }\n\n .closesnack {\n @include box-shadow(none);\n @include border-radius(50%);\n background-color: #3b3b3b;\n color: #ffffff;\n cursor: pointer;\n border: none;\n font-size: rem-calc(16);\n padding: 0;\n height: auto;\n line-height: 1;\n min-width: rem-calc(44);\n min-height: rem-calc(44);\n text-align: center;\n letter-spacing: normal;\n\n @media screen and (min-width: rem-calc(768)) {\n min-width: rem-calc(30);\n min-height: rem-calc(30);\n }\n\n &:before {\n @include mdi-icon;\n content: \"\\f156\";\n }\n\n &:hover {\n background-color: #fff;\n color: $snackbar-color;\n }\n\n &:focus {\n outline: none;\n }\n\n &::-moz-focus-inner {\n border: 0;\n outline: none;\n }\n\n &:active {\n @include scale($xVal: 0.9, $yVal: 0.9);\n }\n }\n }\n\n .sr-only {\n @include srOnly;\n top: 0;\n left: 0;\n }\n }\n }\n }\n .sr-only {\n @include srOnly;\n top: 0;\n left: 0;\n }\n}\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .closesnack:focus:not(:active) {\n @extend %focus-on-dark;\n\n > .tooltip {\n clip: auto;\n width: auto;\n height: auto;\n opacity: 1;\n transition: opacity 500ms 500ms;\n padding: rem-calc(6);\n top: rem-calc(44);\n left: rem-calc(44);\n white-space: nowrap;\n transform: translateX(-50%);\n @media screen and (min-width: rem-calc(768)) {\n top: rem-calc(33);\n left: auto;\n }\n }\n}\n\n.user-is-tabbing .wm-snack-wrapper .wm-snackbar .wm-snackbarmsg .link:focus:not(:active) {\n outline: none;\n background: linear-gradient(90deg, $snackbar-link-color 66%, transparent 0) repeat-x;\n background-size: rem-calc(6px 3px);\n background-position: 0 1em;\n border-radius: 0;\n line-height: normal;\n}\n","import { h, Component, Element, Prop, Event, EventEmitter, Watch, Listen } from \"@stencil/core\";\nimport { generateId, hideTooltip, showTooltip } from \"../../global/functions\";\nimport { Notification } from \"../../global/interfaces\";\nimport { globalMessages } from \"../../global/intl\";\n@Component({\n tag: \"wm-snackbar\",\n styleUrl: \"wm-snackbar.scss\",\n shadow: true,\n})\nexport class Snackbar {\n @Element() el!: HTMLElement;\n //Prop receives notifications as JSON string, which is later parsed into an array of objects.\n @Prop({ mutable: true, reflect: true }) notifications: string = \"[]\";\n\n private parsedNotifications: Array<Notification> = []; //Holds the parsed array\n private uid!: string;\n private focusOnDismiss!: HTMLElement;\n private isTabbing: boolean = false; //For screenreader purposes, to ensure link receives focus even after screenreader interprets \"enter\" as a \"click\"\n private timers: Array<number> = [];\n private newNotification: boolean = false;\n\n @Event() wmSnackbarSnackFinished!: EventEmitter<Object>;\n @Event() userFinishedSnack!: EventEmitter<Object>; // deprecated in favor of wmSnackbarSnackFinished\n @Event() wmSnackbarActionTriggered!: EventEmitter<Object>;\n @Event() userTriggeredAction!: EventEmitter<Object>; // deprecated in favor of wmSnackbarActionTriggered\n\n @Watch(\"notifications\")\n updateSnacks(newValue: string) {\n const parsedData = JSON.parse(newValue);\n const length = parsedData.length;\n const prevNotificationsLength = this.parsedNotifications.length;\n this.parsedNotifications = [];\n\n //Parse notifications received as props and store a reference to them\n for (let i = 0; i < length; i++) {\n let newNotification: any = {\n id: parsedData[i].id.toString(),\n message: parsedData[i].message.toString(),\n link: parsedData[i].link.toString(),\n newWindow: !!parsedData[i].newWindow,\n };\n this.parsedNotifications = [...this.parsedNotifications, newNotification];\n }\n\n //If a new notification was added, set a timer and store a reference to the current active element so that if focus must move to the notification, it can return the user where they were once they dismiss the notification.\n if (prevNotificationsLength < this.parsedNotifications.length) {\n const newTimer = window.setTimeout(() => this.snackExpired(), 20000);\n this.timers = [newTimer, ...this.timers];\n this.storeElToFocusOnDismiss();\n this.newNotification = true;\n } else {\n this.newNotification = false;\n }\n }\n\n componentWillLoad() {\n this.uid = this.el.id ? this.el.id : generateId();\n }\n\n //A change in the notificaiton prop will trigger the update function. The update's only role is to determine how focus should be managed when a notification is added.\n componentDidUpdate() {\n //If the user is tabbing and there's a new notification, focus the link and disable timer.\n this.isTabbing && this.newNotification && this.focusLinkAndDisableTimer();\n this.newNotification = false;\n }\n\n @Listen(\"wmUserIsTabbing\", { target: \"window\" })\n toggleTabbingOn() {\n this.isTabbing = true;\n }\n\n @Listen(\"wmUserIsNotTabbing\", { target: \"window\" })\n toggleTabbingOff() {\n this.isTabbing = false;\n }\n\n focusLinkAndDisableTimer() {\n //If the new notification has a link, focus the link and clear the timeout. This is for accessibility purposes, for keyboard/screenreader users.\n const latestNotification = this.parsedNotifications[0];\n\n if (latestNotification.link) {\n let link = this.el.shadowRoot!.querySelector(`#action-${latestNotification.id}`) as HTMLAnchorElement;\n link.focus();\n this.stopTimer(latestNotification);\n }\n }\n\n storeElToFocusOnDismiss() {\n let triggeringButton = document.activeElement! as HTMLElement;\n while (triggeringButton && triggeringButton.shadowRoot) {\n triggeringButton = triggeringButton.shadowRoot.activeElement as HTMLButtonElement;\n }\n this.focusOnDismiss = triggeringButton;\n }\n\n snackDismissed(notification: Notification) {\n this.endSnack(notification);\n //Focus should only be returned if it was moved in the first place, i.e., there was a link and the user was tabbing. Otherwise, for a mouse user, the user's focus would jump back to the triggering element.\n notification.link && this.isTabbing && this.focusOnDismiss.focus();\n }\n\n //Remove snack from notification list once timer runs out\n snackExpired() {\n const notification = this.parsedNotifications[this.parsedNotifications.length - 1];\n this.endSnack(notification);\n }\n\n endSnack(notification: Notification) {\n //App listens for userFinishedSnack event and deletes the emitted notification.\n this.stopTimer(notification);\n this.wmSnackbarSnackFinished.emit({\n id: notification.id,\n message: notification.message,\n link: notification.link,\n newWindow: notification.newWindow,\n });\n // deprecated\n this.userFinishedSnack.emit({\n id: notification.id,\n message: notification.message,\n link: notification.link,\n });\n }\n\n snackLinkClicked(notification: Notification) {\n //App listens for userTriggeredAction event, deletes emitted notification, and takes over focus.\n this.stopTimer(notification);\n this.wmSnackbarActionTriggered.emit({\n id: notification.id,\n message: notification.message,\n link: notification.link,\n newWindow: notification.newWindow,\n });\n // deprecated\n this.userTriggeredAction.emit({\n id: notification.id,\n message: notification.message,\n link: notification.link,\n });\n }\n\n //Delete the timer corresponding to the dismissed notification\n stopTimer(notification: Notification) {\n this.parsedNotifications.forEach((notif, index) => {\n if (notif.id === notification.id) {\n clearTimeout(this.timers[index]);\n this.timers = this.timers.filter((timer, ind) => {\n if (ind !== index) {\n return timer;\n }\n });\n }\n });\n }\n\n renderSnackbars() {\n return this.parsedNotifications.map((notification) => (\n <div class=\"wm-snack-wrapper\">\n <div id={`snack-${this.uid}`} class=\"wm-snackbar active neutral\">\n <div\n class=\"sr-only\"\n tabindex={notification.link ? 0 : -1}\n onFocus={() => notification.link && this.snackDismissed(notification)}\n />\n\n <div class=\"wm-snackbarmsg\">\n <div class=\"msgtext\">\n <span>{notification.message}</span>\n {notification.link && (\n <a\n id={`action-${notification.id}`}\n class={`link ${notification.newWindow ? \"new-window\" : \"\"}`}\n aria-label={`Click to ${notification.link}...${\n notification.newWindow ? \" \" + globalMessages.newWindow : \"\"\n }`}\n tabindex={0}\n onClick={() => {\n this.snackLinkClicked(notification);\n }}\n onKeyDown={(ev: KeyboardEvent) => ev.key === \"Enter\" && this.snackLinkClicked(notification)}\n >\n <span aria-hidden=\"true\">{notification.link}</span>\n </a>\n )}\n </div>\n <button\n id={`close-button-${notification.id}`}\n aria-label=\"Close this notification\"\n class=\"closesnack\"\n tabindex={notification.link ? 0 : -1}\n onClick={() => this.snackDismissed(notification)}\n onMouseEnter={(ev) => showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n onMouseLeave={() => hideTooltip()}\n onFocus={(ev) => this.isTabbing && showTooltip(\"bottom\", ev.target as HTMLElement, globalMessages.close)}\n onBlur={() => hideTooltip()}\n ></button>\n </div>\n <div\n class=\"sr-only\"\n tabindex={notification.link ? 0 : -1}\n onFocus={() => notification.link && this.snackDismissed(notification)}\n />\n </div>\n </div>\n ));\n }\n\n renderLiveRegion() {\n const latestNotification = this.parsedNotifications[0];\n const link = this.isTabbing ? \"\" : latestNotification.link;\n const srAnnouncement = `${latestNotification.message} ${link}`;\n\n const region = this.el.shadowRoot!.querySelector(`#wm-live-region-${this.uid}`) as HTMLElement;\n\n if (region) {\n region.innerHTML = \"\";\n const wrapper = document.createElement(\"span\");\n wrapper.innerHTML = srAnnouncement;\n region.appendChild(wrapper);\n }\n }\n\n render() {\n this.newNotification && this.renderLiveRegion();\n const snackbars = this.renderSnackbars();\n const wrappingClass = this.parsedNotifications.length === 0 ? \"empty\" : \"\";\n\n return (\n <div class={`wm-snackbars ${wrappingClass} ${this.isTabbing ? \"user-is-tabbing\" : \"\"}`}>\n <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"false\" id={`wm-live-region-${this.uid}`}></div>\n {snackbars}\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ripple/p-bb45e122.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,H as s,g as a,f as o}from"./p-1c23de4a.js";import{d as n,g as r}from"./p-c6a0f7e5.js";const h=":host{font-family:inherit;display:inline-block}:host {-webkit-box-sizing:border-box;box-sizing:border-box}:host .tab-item{list-style-type:none;height:100%;display:inline-block}:host .tab-item .tab{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;border-radius:0;color:#575195;text-decoration:none;letter-spacing:0.7px;font-size:0.875rem;font-weight:500;opacity:1;position:relative;text-transform:uppercase;display:inline-block;height:3.3333333333em;line-height:3.3333333333em;padding-right:1.5rem;padding-left:1.5rem}:host .tab-item .tab[aria-selected=true]{font-weight:700;opacity:1;background:-webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor)) bottom/0 0 no-repeat;background:linear-gradient(currentColor, currentColor) bottom/0 0 no-repeat;background-size:calc(100% - 50px) 3px}:host .tab-item .tab[aria-selected=true].dark{color:#fff}:host .tab-item .tab,:host .tab-item .tab:hover,:host .tab-item .tab:active{outline:none}:host .tab-item .tab:focus{outline:none}:host .tab-item .tab.dark:not([aria-selected=true]){opacity:0.8;color:#fff}:host .tab-item .tab.user-is-tabbing:focus:not(:active){outline:none;-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .tab-item .tab.user-is-tabbing:focus:not(:active)::-moz-focus-inner{border:0}:host .tab-item .tab.user-is-tabbing:focus:not(:active).dark{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #c6b4e3;outline:none}:host.hide{display:none}";const b=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.keydownOnTabItem=e(this,"keydownOnTabItem",7);this.tabItemLoaded=e(this,"tabItemLoaded",7);this.tabClicked=t=>{t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})};this.tabPressed=t=>{const e=t.key;if(e==="Enter"\|\|e===" "){t.preventDefault();this.wmTabSelected.emit({tabId:this.tabId});this.tabSelected.emit({tabId:this.tabId})}else if(e.includes("Arrow")){t.preventDefault();this.keydownOnTabItem.emit({tabItem:this.el,key:t.key})}};this.selected=false;this.show=true;this.tabId=""}get parentTabList(){return this.el.parentElement}toggleTabbingOn(){this.linkEl&&this.linkEl.classList.add("user-is-tabbing")}toggleTabbingOff(){this.linkEl&&this.linkEl.classList.remove("user-is-tabbing")}componentDidLoad(){this.tabItemLoaded.emit()}render(){let t=this.show?"":"hide ";t+=this.parentTabList&&this.parentTabList.customBackground=="dark"?"dark":"";let e={};const a=this.parentTabList&&this.parentTabList.customPadding;if(a){const t=parseInt(a,10)2\|\|0;const i=a.split(/([0-9]+)/).pop();e={"padding-left":this.parentTabList.customPadding,"padding-right":this.parentTabList.customPadding,"background-size":`calc(100% - ${t}${i}) 3px`}}return i(s,{role:"presentation"},i("li",{class:"tab-item",role:"presentation"},i("a",{class:`tab ${t}`,style:e,role:"tab",ref:t=>this.linkEl=t,onClick:this.tabClicked,id:`tab-link-${this.tabId}`,onKeyDown:t=>this.tabPressed(t),"aria-selected":this.selected?"true":"false",tabindex:this.selected?0:-1},i("slot",null))))}static get delegatesFocus(){return true}get el(){return a(this)}};b.style=h;const l=":host,wm-tab-list{position:relative;white-space:nowrap;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;display:block}:host ,wm-tab-list {-webkit-box-sizing:border-box;box-sizing:border-box}:host .tabcontainer,wm-tab-list .tabcontainer{margin:0;margin-left:-24px;width:100%;height:4.0625rem;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;padding:0}:host .tabcontainer.dark,wm-tab-list .tabcontainer.dark{background:#353b48;margin:0}:host wm-select,wm-tab-list wm-select{padding:0.375rem 0}";const c=class{constructor(i){t(this,i);this.wmTabSelected=e(this,"wmTabSelected",7);this.tabSelected=e(this,"tabSelected",7);this.debouncedSetLayout=n((()=>{if(!this.listWidth){this.setListWidth()}o(this.el)}),250);this.customBackground=undefined;this.customPadding=undefined;this.selectedTab=undefined;this.controllerEnabled=false}get menuLayout(){if(this.listWidth){return this.el.offsetWidth<this.listWidth-24}else{return false}}get tabItems(){return Array.from(this.el.querySelectorAll("wm-tab-item"))}get selectedTabItem(){return this.tabItems.filter((t=>t.selected))[0]}getLinkEl(t){return t.shadowRoot.querySelector("a")}get panels(){const t=Array.from(document.querySelectorAll("wm-tab-panel"));const e=this.tabItems.map((t=>t.tabId));return t.filter((t=>e.includes(t.tabId)))}getPanel(t){return this.panels.find((e=>e.tabId===t))}setListWidth(){let t=this.tabItems.reduce(((t,e)=>t+e.offsetWidth),0);this.listWidth=t&&t>0?t:this.listWidth}setSelected(t){this.tabItems.map((e=>e.selected=e.tabId===t));const e=this.panels.length===1&&this.tabItems.length>1;if(e){this.setAttributesOnPanel(this.panels[0],this.selectedTabItem);this.panels[0].active=true}else{this.panels.map((e=>e.active=e.tabId===t))}}showItems(){this.tabItems.map((t=>t.show=true))}hideItems(){this.tabItems.map((t=>t.show=false))}componentWillLoad(){this.el.focus=()=>{this.selectedTabItem&&this.selectedTabItem.focus()}}componentDidLoad(){this.setLayout();const t=this.selectedTab\|\|this.tabItems[0].tabId;this.setSelected(t)}tabItemLoaded(t){this.setAriaOnPanelAndTab(t.target)}setAriaOnPanelAndTab(t){const e=this.getPanel(t.tabId);if(!e){if(this.panels.length===1){this.setAttributesOnTab(t,this.panels[0])}}else{this.setAttributesOnPanel(e,t);this.setAttributesOnTab(t,e)}}setAttributesOnTab(t,e){const i=this.getLinkEl(t);if(i){i.setAttribute("aria-controls",e.id);i.setAttribute("href",`#${e.id}`)}}removeAttributesOnTab(t){const e=this.getLinkEl(t);if(e){e.removeAttribute("aria-controls");e.removeAttribute("href")}}setAttributesOnPanel(t,e){const i=this.getLinkEl(e);if(i){t.setAttribute("aria-labelledby",i.id);t.setAttribute("tab-id",e.tabId)}}handleTabSelected(t){if(this.controllerEnabled){this.setSelected(t.detail.tabId)}}handleKeydown(t){const e=t.detail.key;const i=this.tabItems.indexOf(t.detail.tabItem);if(e==="ArrowLeft"\|\|e==="ArrowRight"){this.handleLeftRightArrow(i,e)}}handleLeftRightArrow(t,e){if(e){t=e==="ArrowLeft"?t-1:t+1}if(t<0){t=this.tabItems.length-1}else if(t===this.tabItems.length){t=0}const i=this.tabItems[t];this.getLinkEl(i).focus()}setLayout(){this.debouncedSetLayout()}renderMenuOrTabs(){if(this.menuLayout){this.hideItems();return i("wm-select",{label:"Tab Selection","label-position":"none"},this.renderOptions())}else{this.showItems();let t={};if(this.customPadding){t={"margin-left":"-"+this.customPadding}}return i("ul",{class:`tabcontainer ${this.customBackground\|\|""}`,style:t,role:"tablist"},i("slot",null))}}renderOptions(){return this.tabItems.map((t=>i("wm-option",{id:`tab-link-${t.tabId}`,selected:t.tabId===this.selectedTab,onClick:e=>{e.preventDefault();this.wmTabSelected.emit({tabId:t.tabId});this.tabSelected.emit({tabId:t.tabId})}},t.textContent)))}render(){return i(s,{class:this.menuLayout?"menu":""},this.renderMenuOrTabs())}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{selectedTab:["setSelected"]}}};c.style=l;const d="wm-tab-panel{visibility:inherit}wm-tab-panel.tab-hidden{display:none}wm-tab-panel:active{outline:none}wm-tab-panel:focus{outline:none}wm-tab-panel.user-is-tabbing:focus{outline:-webkit-focus-ring-color auto 5px}";const p=class{constructor(i){t(this,i);this.tabPanelLoaded=e(this,"tabPanelLoaded",7);this.active=false;this.tabId=""}componentWillLoad(){!this.el.id&&this.el.setAttribute("id",r())}componentDidLoad(){this.tabPanelLoaded.emit({tabId:this.tabId})}toggleTabbingOn(){this.el.classList.add("user-is-tabbing")}toggleTabbingOff(){this.el.classList.remove("user-is-tabbing")}render(){return i(s,{role:"tabpanel",class:{"tab-hidden":!this.active}})}get el(){return a(this)}};p.style=d;export{b as wm_tab_item,c as wm_tab_list,p as wm_tab_panel};
2	- //# sourceMappingURL=p-bb45e122.entry.js.map

package/dist/ripple/p-bb45e122.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmTabItemCss","TabItem","this","tabClicked","ev","preventDefault","wmTabSelected","emit","tabId","tabSelected","tabPressed","key","includes","keydownOnTabItem","tabItem","el","parentTabList","parentElement","toggleTabbingOn","linkEl","classList","add","toggleTabbingOff","remove","componentDidLoad","tabItemLoaded","render","classes","show","customBackground","styles","padding","customPadding","bkgSize","parseInt","units","split","pop","h","Host","role","class","style","ref","onClick","id","onKeyDown","selected","tabindex","wmTabListCss","TabList","debouncedSetLayout","debounce","listWidth","setListWidth","forceUpdate","menuLayout","offsetWidth","tabItems","Array","from","querySelectorAll","selectedTabItem","filter","t","getLinkEl","tab","shadowRoot","querySelector","panels","allPanels","document","tabIds","map","p","getPanel","find","newCalc","reduce","sum","setSelected","singlePanel","length","setAttributesOnPanel","active","panel","showItems","hideItems","componentWillLoad","focus","setLayout","selectedTab","setAriaOnPanelAndTab","target","setAttributesOnTab","link","setAttribute","removeAttributesOnTab","removeAttribute","handleTabSelected","controllerEnabled","detail","handleKeydown","index","indexOf","handleLeftRightArrow","tabToFocus","renderMenuOrTabs","label","renderOptions","margins","textContent","wmTabPanelCss","TabPanel","generateId","tabPanelLoaded"],"sources":["./src/components/wm-tabs/wm-tab-item/wm-tab-item.scss?tag=wm-tab-item&encapsulation=shadow","./src/components/wm-tabs/wm-tab-item/wm-tab-item.tsx","./src/components/wm-tabs/wm-tab-list/wm-tab-list.scss?tag=wm-tab-list&encapsulation=shadow","./src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.scss?tag=wm-tab-panel","./src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"sourcesContent":[":host {\n * {\n box-sizing: border-box;\n }\n font-family: inherit;\n display: inline-block;\n\n .tab-item {\n list-style-type: none;\n height: 100%;\n display: inline-block;\n\n .tab {\n @include border-radius(0);\n color: $button-default-text;\n text-decoration: none;\n letter-spacing: 0.7px;\n font-size: rem-calc(14);\n font-weight: 500;\n opacity: 1;\n position: relative;\n text-transform: uppercase;\n display: inline-block;\n height: calc(40 / 12 * 1em);\n line-height: calc(40 / 12 * 1em);\n padding-right: rem-calc(24);\n padding-left: rem-calc(24);\n\n &[aria-selected=\"true\"] {\n font-weight: 700;\n opacity: 1;\n background: linear-gradient(currentColor, currentColor) bottom / 0 0 no-repeat;\n background-size: calc(100% - 50px) 3px;\n\n &.dark {\n color: $button-primary-text;\n }\n }\n\n &,\n &:hover,\n &:active {\n outline: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &.dark:not([aria-selected=\"true\"]) {\n opacity: 0.8;\n color: $button-primary-text;\n }\n\n &.user-is-tabbing:focus:not(:active) {\n outline: none;\n @include focus-style;\n &.dark {\n @include focus-on-dark;\n }\n }\n }\n }\n\n &.hide {\n display: none;\n }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen, Host } from \"@stencil/core\";\n\n@Component({\n tag: \"wm-tab-item\",\n styleUrl: \"wm-tab-item.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class TabItem {\n @Element() el!: HTMLWmTabItemElement;\n\n private get parentTabList(): HTMLWmTabListElement | null {\n return this.el.parentElement as HTMLWmTabListElement;\n }\n\n /**\n * Indicates whether the tab is currently active\n */\n @Prop() selected: boolean = false;\n\n @Prop() show: boolean = true;\n\n /**\n * The id of the tab, linked to a tab panel.\n */\n @Prop() tabId: string = \"\";\n\n /**\n * Reference to focusable link element\n */\n linkEl?: HTMLAnchorElement;\n\n @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n @Event() keydownOnTabItem!: EventEmitter<{\n tabItem: HTMLWmTabItemElement;\n key: string;\n }>;\n\n @Event() tabItemLoaded!: EventEmitter<{ tab: HTMLWmTabItemElement }>;\n\n private tabClicked = (ev: MouseEvent) => {\n ev.preventDefault();\n this.wmTabSelected.emit({ tabId: this.tabId });\n this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n };\n\n private tabPressed = (ev: KeyboardEvent) => {\n const key = ev.key;\n\n if (key === \"Enter\" || key === \" \") {\n ev.preventDefault();\n this.wmTabSelected.emit({ tabId: this.tabId });\n this.tabSelected.emit({ tabId: this.tabId }); // deprecated\n } else if (key.includes(\"Arrow\")) {\n ev.preventDefault();\n this.keydownOnTabItem.emit({ tabItem: this.el, key: ev.key });\n }\n };\n\n @Listen(\"keydown\", { target: \"document\" })\n toggleTabbingOn() {\n this.linkEl && this.linkEl.classList.add(\"user-is-tabbing\");\n }\n\n @Listen(\"click\", { target: \"document\" })\n toggleTabbingOff() {\n this.linkEl && this.linkEl.classList.remove(\"user-is-tabbing\");\n }\n\n componentDidLoad() {\n this.tabItemLoaded.emit();\n }\n\n render() {\n let classes = this.show ? \"\" : \"hide \";\n classes += this.parentTabList && this.parentTabList.customBackground == \"dark\" ? \"dark\" : \"\";\n\n let styles = {};\n const padding = this.parentTabList && this.parentTabList.customPadding;\n if (padding) {\n const bkgSize = parseInt(padding, 10) * 2 || 0;\n const units = padding.split(/([0-9]+)/).pop();\n styles = {\n \"padding-left\": this.parentTabList!.customPadding,\n \"padding-right\": this.parentTabList!.customPadding,\n \"background-size\": `calc(100% - ${bkgSize}${units}) 3px`,\n };\n }\n\n return (\n <Host role=\"presentation\">\n <li class=\"tab-item\" role=\"presentation\">\n <a\n class={`tab ${classes}`}\n style={styles}\n role=\"tab\"\n ref={(el) => (this.linkEl = el as HTMLAnchorElement)}\n onClick={this.tabClicked}\n id={`tab-link-${this.tabId}`}\n onKeyDown={(ev: KeyboardEvent) => this.tabPressed(ev)}\n aria-selected={this.selected ? \"true\" : \"false\"}\n tabindex={this.selected ? 0 : -1}\n >\n <slot></slot>\n </a>\n </li>\n </Host>\n );\n }\n}\n",":host,\nwm-tab-list {\n * {\n box-sizing: border-box;\n }\n\n position: relative;\n white-space: nowrap;\n height: fit-content;\n display: block;\n\n .tabcontainer {\n margin: 0;\n margin-left: -24px;\n width: 100%;\n height: rem-calc(65);\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0;\n\n &.dark {\n background: rgb(53, 59, 72);\n margin: 0;\n }\n }\n\n wm-select {\n padding: rem-calc(6) 0;\n }\n}\n","import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n tag: \"wm-tab-list\",\n styleUrl: \"wm-tab-list.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class TabList {\n @Element() el!: any;\n\n @Prop() customBackground?: \"dark\" | \"\";\n @Prop() customPadding?: string;\n @Prop() selectedTab?: string;\n\n /**\n * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n */\n @Prop() controllerEnabled: boolean = false;\n\n /**\n * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n */\n private get menuLayout(): boolean {\n if (this.listWidth) {\n return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n } else {\n return false; // in case listWidth couldn't get computed, we render regular tabs\n }\n }\n\n /**\n * Emitted by wm-select options when tabs have the menu format\n */\n @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n private get tabItems(): Array<HTMLWmTabItemElement> {\n return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n }\n\n get selectedTabItem(): HTMLWmTabItemElement {\n return this.tabItems.filter((t) => t.selected)[0];\n }\n\n private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n return tab.shadowRoot!.querySelector(\"a\")!;\n }\n\n private get panels(): Array<HTMLWmTabPanelElement> {\n const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n const tabIds = this.tabItems.map((t) => t.tabId);\n return allPanels.filter((p) => tabIds.includes(p.tabId));\n }\n\n private getPanel(tabId: string) {\n return this.panels.find((p) => p.tabId === tabId);\n }\n\n private listWidth?: number;\n\n private setListWidth() {\n let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n }\n\n @Watch(\"selectedTab\")\n setSelected(id: string) {\n this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n if (singlePanel) {\n /**\n * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n */\n this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n this.panels[0].active = true;\n } else {\n this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n }\n }\n\n showItems() {\n this.tabItems.map((t) => (t.show = true));\n }\n\n hideItems() {\n this.tabItems.map((t) => (t.show = false));\n }\n\n componentWillLoad() {\n this.el.focus = () => {\n // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n this.selectedTabItem && this.selectedTabItem.focus();\n };\n }\n\n componentDidLoad() {\n this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n this.setSelected(selectedTab);\n }\n\n @Listen(\"tabItemLoaded\")\n tabItemLoaded(ev: CustomEvent) {\n this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n }\n\n setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n const panel = this.getPanel(tab.tabId);\n\n // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n if (!panel) {\n if (this.panels.length === 1) {\n this.setAttributesOnTab(tab, this.panels[0]);\n }\n } else {\n // Otherwise, set attributes on each tab item that loads and its associated panel\n this.setAttributesOnPanel(panel, tab);\n this.setAttributesOnTab(tab, panel);\n }\n }\n\n setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n const link = this.getLinkEl(tab);\n\n if (link) {\n link.setAttribute(\"aria-controls\", panel.id);\n link.setAttribute(\"href\", `#${panel.id}`);\n }\n }\n\n removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n const link = this.getLinkEl(tab);\n\n if (link) {\n link.removeAttribute(\"aria-controls\");\n link.removeAttribute(\"href\");\n }\n }\n\n setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n const link = this.getLinkEl(tab);\n\n if (link) {\n panel.setAttribute(\"aria-labelledby\", link.id);\n panel.setAttribute(\"tab-id\", tab.tabId);\n }\n }\n\n @Listen(\"wmTabSelected\")\n handleTabSelected(ev: CustomEvent) {\n if (this.controllerEnabled) {\n this.setSelected(ev.detail.tabId);\n }\n }\n\n @Listen(\"keydownOnTabItem\")\n handleKeydown(ev: CustomEvent) {\n const key = ev.detail.key;\n const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n this.handleLeftRightArrow(index, key);\n }\n }\n\n handleLeftRightArrow(index: number, key: string) {\n if (key) {\n index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n }\n\n if (index < 0) {\n index = this.tabItems.length - 1;\n } else if (index === this.tabItems.length) {\n index = 0;\n }\n\n const tabToFocus = this.tabItems[index];\n this.getLinkEl(tabToFocus).focus();\n }\n\n /**\n * Change layout if parent size drops below tab list width\n */\n @Listen(\"resize\", { target: \"window\" })\n setLayout() {\n this.debouncedSetLayout();\n }\n\n debouncedSetLayout = debounce(() => {\n if (!this.listWidth) {\n this.setListWidth();\n }\n forceUpdate(this.el);\n }, 250);\n\n renderMenuOrTabs() {\n if (this.menuLayout) {\n this.hideItems();\n return (\n <wm-select label=\"Tab Selection\" label-position=\"none\">\n {this.renderOptions()}\n </wm-select>\n );\n } else {\n this.showItems();\n let margins = {};\n if (this.customPadding) {\n margins = {\n \"margin-left\": \"-\" + this.customPadding,\n };\n }\n return (\n <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n <slot></slot>\n </ul>\n );\n }\n }\n\n renderOptions() {\n return this.tabItems.map((t) => (\n <wm-option\n id={`tab-link-${t.tabId}`}\n selected={t.tabId === this.selectedTab}\n onClick={(ev) => {\n ev.preventDefault();\n this.wmTabSelected.emit({ tabId: t.tabId });\n this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n }}\n >\n {t.textContent}\n </wm-option>\n ));\n }\n\n render() {\n return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n }\n}\n","wm-tab-panel {\n visibility: inherit;\n\n &.tab-hidden {\n display: none;\n }\n\n &:active {\n outline: none;\n }\n\n &:focus {\n outline: none;\n }\n\n &.user-is-tabbing:focus {\n outline: -webkit-focus-ring-color auto 5px;\n }\n}\n","import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n tag: \"wm-tab-panel\",\n styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n @Element() el!: HTMLWmTabPanelElement;\n\n /**\n * Indicates whether the panel should be displayed or not.\n */\n @Prop({ mutable: true }) active: boolean = false;\n\n /**\n * The id of the panel, linked to a tabItem in the tablist.\n */\n @Prop({ mutable: true }) tabId: string = \"\";\n\n @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n componentWillLoad() {\n !this.el.id && this.el.setAttribute(\"id\", generateId());\n }\n\n componentDidLoad() {\n this.tabPanelLoaded.emit({ tabId: this.tabId });\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n toggleTabbingOn() {\n this.el.classList.add(\"user-is-tabbing\");\n }\n\n @Listen(\"click\", { target: \"document\" })\n toggleTabbingOff() {\n this.el.classList.remove(\"user-is-tabbing\");\n }\n\n render() {\n return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n }\n}\n"],"mappings":"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"}

package/dist/ripple/p-bd84628c.system.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmTagInputCss","TagInput","exports","this","uid","el","id","generateId","openUp","tooltipVisible","debouncedUpdate","debounce","forceUpdate","_this","row","column","csvToArray","selectedTags","options","Object","defineProperty","class_1","prototype","shadowRoot","activeElement","Array","from","dropdownEl","querySelectorAll","tagAreaEl","tagEls","filter","tag","classList","contains","wmRowEls","colValues","col1","col2","col3","col4","join","toLowerCase","inputEl","value","includes","list","tagInputType","tagsList","forEach","correspondingRowEl","locked","push","maxTags","length","intl","formatMessage","defaultMessage","description","addNewHelpText","selectionHelpText","maxTagsReachedMessage","tagAreaInstructions","tagsAddedMessage","defaultConfig","maxTagsReached","tagsAdded","userProvidedConfig","safeParseJSON","messageConfig","assign","inputElStyles","getComputedStyle","tagElStyles","inputElBuffer","paddingLeft","paddingRight","marginLeft","marginRight","reduce","prev","curr","parseInt","replace","minimumWidth","Math","max","measureText","placeholder","width","generateTagAddedMessage","tagName","generateTagAlreadyAddedMessage","componentWillLoad","createPlaceholderDefault","addNew","label","console","error","consolidateSelectedTags","focus","firstFocusableTag","nonLockedTagEls","focusTag","resizeObserver","ResizeObserver","observe","componentDidLoad","remove","componentDidRender","positionInput","includesCaseInsensitive","optionsList","concat","hasOptions","addAndSearchPlaceholder","searchPlaceholder","addPlaceholder","reflectSelectedTags","newValue","oldValue","isAddition","changedTag","val","map","querySelector","listToCSV","detail","tagChanged","wmTagInputChanged","emit","handleErrorMessageChange","errorMessage","announce","handleRowUpdate","closeIfNotElOrChild","ev","isntElOrChild","target","isExpanded","closeDropdown","dismissTooltip","hideTooltip","handleInputKeyDown","test","key","characterLimit","generateCharacterLimitWarning","stopPropagation","preventDefault","handleInputEnter","handleInputArrowDown","handleInputArrowUp","tablePosition","moveLeftCell","moveRightCell","handleInputBackspace","handleInputFocus","openDropdown","clearListItemFocus","handleInputChanged","charCount","clearCellFocus","announceExistingOptions","focusedListItem","handleListItemClick","submitInput","trim","handleTableRowClick","localRowEls","canAddNew","hasNonWhiteSpaceCharacters","match","addTag","addOption","resetInput","moveDownRow","moveDownListItem","moveUpRow","moveUpListItem","window","requestAnimationFrame","nonLockedTagsList","handleListItemKeyDown","typedEvTarget","click","focusedElement","item","dataset","option","rowId","referencedRow","isLocked","removeTag","tagLimitReached","handleTagAreaKeyDown","moveLeftTag","moveRightTag","handleTagAreaDelete","focusedTag","handleBlur","component","relatedTarget","fieldWrapperEl","handleCellMouseEnter","cell","contentWrapper","isTruncated","scrollWidth","clientWidth","showTooltip","innerText","handleTagAreaFocus","handleRemoveButtonClick","listItemEls","firstListItem","focusListItem","nextElementSibling","lastListItem","previousElementSibling","filteredRows","rowToFocus","focusCell","numCols","colHeaders","lastTag","firstTag","newOptionsList","optionAlreadyExists","removeOption","filterCaseInsensitive","newTagsList","tagAlreadyAdded","tagExistsAsOption","x","textToAnnounce","tagRemovedMessage","devOptionsList","setAttribute","scrollIntoView","block","element","position","rowCells","cellToFocus","add","clearTagFocus","resetPosition","shouldOpenUp","clientHeight","message","liveRegionEl","textContent","liveRegionMessage","numResults","optionEls","existingOptionsMessage","num","charLimit","globalMessages","getCharactersEntered","characterLimitReached","style","spaceAvailable","getBoundingClientRect","right","inputMinimumWidth","top","offsetTop","toString","lowercaseList","str","sortCaseInsensitive","sort","a","b","renderTags","lockedTags","unlockedTags","idx","tagText","targetList","h","class","role","tabIndex","onClick","__spreadArray","renderDropdown","ref","renderHelpText","tabindex","renderAddNewButton","renderListItems","isFocused","isSelected","onKeyDown","onBlur","helpText","componentMessages","renderTagCounter","renderTable","onScroll","colWidths","renderTableHeaders","renderTableRows","noResultsMessage","header","overflowRule","colWrap","renderTableCells","localId","onMouseEnter","onMouseLeave","render","Host","labelPosition","htmlFor","requiredField","onFocus","autocomplete","getCharacterLimit","maxLength","undefined","onInput","info"],"sources":["src/components/wm-tag-input/wm-tag-input.scss?tag=wm-tag-input&encapsulation=shadow","src/components/wm-tag-input/wm-tag-input.tsx"],"sourcesContent":[":host,\nwm-tag-input {\n font-family: inherit;\n width: 100%;\n display: block;\n\n * {\n box-sizing: border-box;\n font-size: 14px;\n }\n\n @include label;\n\n .wrapper {\n width: 100%;\n height: 100%;\n position: relative;\n }\n\n .field-wrapper {\n position: relative;\n width: 100%;\n border: 1px solid $input-border-color;\n @include border-radius(3px);\n\n &.focused {\n @include field-focus;\n }\n\n &.invalid {\n @include invalidBorder;\n }\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(74, 74, 74, 0.05);\n font-size: rem-calc(14);\n font-weight: 500;\n align-self: stretch;\n }\n\n .tags-and-input-wrapper {\n position: relative;\n width: 100%;\n padding: rem-calc(8) rem-calc(4) rem-calc(8) 0;\n margin-bottom: rem-calc(-8);\n }\n\n .upper-row {\n width: 100%;\n display: flex;\n flex: 1;\n justify-content: space-between;\n &:before {\n align-self: flex-start;\n @include mdi-icon;\n content: \"\\f349\"; // magnifying glass\n color: $tag-input-search-icon-color;\n padding: rem-calc(12) rem-calc(8) rem-calc(12) rem-calc(12);\n }\n }\n\n .lower-row {\n width: 100%;\n min-height: rem-calc(30);\n }\n\n #max-tags {\n display: flex;\n align-items: center;\n min-height: rem-calc(30);\n background-color: $tag-input-max-tags-bg;\n padding: rem-calc(8) rem-calc(16);\n color: $tag-input-max-tags-color;\n font-size: rem-calc(14);\n border-top: 1px solid $tag-input-max-tags-border;\n border-radius: 0 0 3px 3px;\n }\n\n .tag-area {\n display: flex;\n flex-wrap: wrap;\n margin: 0;\n padding: 0;\n\n &:focus {\n outline: none;\n }\n\n [role=\"option\"] {\n display: inline-flex;\n align-items: center;\n height: rem-calc(28);\n list-style: none;\n color: $charcoal;\n background-color: rgba(3, 0, 0, 0.1);\n padding: rem-calc(8) rem-calc(10);\n margin-bottom: rem-calc(8);\n margin-right: rem-calc(4);\n margin-left: rem-calc(4);\n transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n white-space: pre;\n\n &.highlight {\n animation: fadeIn 1s;\n @keyframes fadeIn {\n 0% {\n background-color: rgba(3, 0, 0, 0.1);\n }\n 50% {\n background-color: #c8dfcc;\n }\n\n 100% {\n background-color: rgba(3, 0, 0, 0.1);\n }\n }\n }\n\n &.focused {\n background-color: #d1d1d1;\n }\n\n &.locked {\n background-color: $tag-input-locked-tag-bg;\n color: white;\n }\n\n .icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: rem-calc(20);\n width: rem-calc(20);\n padding: 0;\n margin-left: rem-calc(8);\n &.remove-btn {\n border: 1px solid $periwinkle;\n color: $periwinkle;\n border-radius: 50%;\n cursor: pointer;\n transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1), color 500ms cubic-bezier(0.4, 0, 0.2, 1);\n\n &:hover {\n color: white;\n background-color: $periwinkle;\n }\n\n &:before {\n @include mdi-icon;\n content: \"\\f156\";\n }\n }\n\n &.lock {\n color: white;\n &:before {\n @include mdi-icon;\n content: \"\\f341\";\n }\n }\n }\n }\n }\n\n input {\n font-family: inherit;\n border: none;\n height: rem-calc(28);\n padding: 0;\n margin-bottom: rem-calc(8);\n margin-right: rem-calc(4);\n padding-left: rem-calc(8);\n right: 0px;\n\n &.hidden {\n display: none;\n }\n &:focus {\n outline: none;\n }\n }\n\n .dropdown-wrapper {\n margin: 0;\n padding: 0;\n @include box-shadow(0 4px 15px 0 rgba(0, 0, 0, 0.2));\n @include transition(transform 0.25s ease);\n @include scale($xVal: 1, $yVal: 0);\n @include transformOrigin(center top);\n @include border-radius(3px);\n position: absolute;\n top: calc(100% + 2px);\n right: 0;\n background: #fff;\n z-index: 100;\n width: 100%;\n font-size: rem-calc(14);\n\n .dropdown {\n -webkit-overflow-scrolling: touch;\n overflow: auto;\n max-height: rem-calc(200);\n margin: 0;\n padding: 0;\n }\n\n &.open {\n @include scale($xVal: 1, $yVal: 1);\n }\n\n &.upwards {\n top: unset;\n bottom: calc(100% + 2px);\n @include transformOrigin(center bottom);\n }\n\n li,\n div {\n display: flex;\n align-items: center;\n padding: 0 rem-calc(16);\n background: #fff;\n list-style: none;\n height: rem-calc(43);\n white-space: pre;\n\n &[role=\"option\"],\n &.add-new-btn {\n cursor: pointer;\n color: $periwinkle;\n font-weight: bold;\n width: 100%;\n border: none;\n\n &[aria-selected=\"true\"] {\n color: $gray;\n font-style: italic;\n font-weight: normal;\n cursor: unset;\n }\n &:hover:not([aria-selected=\"true\"]),\n &.focused {\n outline: none;\n background: $background;\n }\n }\n\n &.help-text {\n color: $charcoal;\n height: auto;\n min-height: rem-calc(43);\n padding-top: rem-calc(4);\n padding-bottom: rem-calc(4);\n white-space: normal;\n }\n\n &:not(:last-child) {\n border-bottom: 2px solid rgba(#2e1b46, 0.05);\n }\n }\n }\n\n .info-text {\n font-style: italic;\n margin-top: rem-calc(4);\n }\n\n .table-wrapper {\n min-height: rem-calc(160);\n overflow: auto;\n margin-top: rem-calc(24);\n\n #table {\n width: 100%;\n border-spacing: 0px;\n &.fixed-widths {\n table-layout: fixed;\n }\n\n .headers {\n height: rem-calc(40);\n background-color: #eeedf4;\n th {\n text-align: left;\n font-size: rem-calc(12);\n font-weight: 700;\n text-transform: uppercase;\n padding: 0 rem-calc(24);\n }\n }\n }\n\n tr {\n // the following colors are in a css-specificity order, do not move\n &:nth-child(even) {\n background-color: $tag-input-row-zebra-bg;\n }\n\n &.selected {\n background-color: $tag-input-row-selected-bg;\n // box-shadow to add border without affecting surrounding cell borders\n box-shadow: inset 0 0 0 1px $tag-input-row-selected-border;\n font-weight: 500;\n }\n\n &.focused:not(.locked),\n &:hover:not(.locked) {\n background-color: $tag-input-row-focused;\n box-shadow: none;\n }\n\n &.locked {\n td {\n cursor: auto;\n }\n\n td:first-child {\n .cell-content-wrapper:before {\n @include mdi-icon;\n content: \"\\f33e\";\n margin-right: rem-calc(8);\n color: $tag-input-row-lock-color;\n }\n }\n }\n }\n\n td {\n height: rem-calc(60);\n vertical-align: middle;\n padding: 0 rem-calc(24);\n cursor: pointer;\n &.focused {\n // from wm-navigation\n box-shadow: inset 0 2px 2px 0 rgb(244 243 246 / 20%), inset 0 2px 2px 0 rgb(0 0 0 / 10%),\n inset 0 0 4px 3px #61279e;\n }\n .cell-content-wrapper.trunc {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .description {\n display: none;\n }\n }\n }\n\n .no-results {\n padding: rem-calc(20) rem-calc(24);\n }\n\n .sr-only {\n @include srOnly;\n }\n\n #error {\n @include errorMessage;\n }\n}\n","import {\n h,\n Component,\n Host,\n Element,\n Prop,\n Listen,\n State,\n Event,\n EventEmitter,\n Watch,\n forceUpdate,\n} from \"@stencil/core\";\nimport {\n csvToArray,\n debounce,\n generateId,\n hideTooltip,\n intl,\n measureText,\n safeParseJSON,\n shouldOpenUp,\n showTooltip,\n} from \"../../global/functions\";\nimport { globalMessages } from \"../../global/intl\";\n\ninterface TablePosition {\n row: number;\n column: number;\n}\n\ninterface MessageConfig {\n addNewHelpText: string;\n selectionHelpText: string;\n tagAreaInstructions: string;\n maxTagsReached: string;\n tagsAdded: string;\n}\n\n@Component({\n tag: \"wm-tag-input\",\n styleUrl: \"wm-tag-input.scss\",\n shadow: { delegatesFocus: true },\n})\nexport class TagInput {\n @Element() el!: HTMLWmTagInputElement;\n private inputEl!: HTMLInputElement;\n private dropdownEl!: HTMLDivElement;\n private tagAreaEl!: HTMLUListElement;\n private liveRegionEl!: HTMLDivElement;\n private fieldWrapperEl!: HTMLDivElement;\n\n @Prop() label!: string;\n @Prop() labelPosition: \"top\" | \"left\" | \"none\" = \"top\";\n @Prop({ mutable: true }) options: string = \"\"; // csv\n @Prop({ reflect: true, mutable: true }) selectedTags: string = \"\"; // csv\n @Prop() info?: string;\n @Prop() errorMessage?: string;\n @Prop() addNew: boolean = true;\n @Prop({ mutable: true }) placeholder?: string;\n @Prop() requiredField: boolean = false;\n @Prop() characterLimit: number = 50;\n @Prop() maxTags?: number;\n @Prop() tagInputType: \"dropdown\" | \"table\" = \"dropdown\";\n @Prop() colHeaders!: string;\n @Prop() colWidths?: string;\n @Prop() colWrap?: string;\n @Prop() messageConfig: string = \"\"; // JSON\n @Event() wmTagInputChanged!: EventEmitter<{\n value: string[] | HTMLWmTagInputRowElement[];\n tagChanged: string | HTMLWmTagInputRowElement;\n }>;\n\n private uid: string = this.el.id ? this.el.id : generateId();\n private openUp: boolean = false;\n private tooltipVisible: boolean = false;\n @State() focusedListItem!: HTMLLIElement | null;\n @State() focusedTag: HTMLLIElement | null = null;\n @State() tablePosition: TablePosition = { row: 0, column: 1 };\n @State() isExpanded: boolean = false;\n @State() tagsList: string[] = csvToArray(this.selectedTags);\n @State() optionsList: string[] = csvToArray(this.options);\n @State() charCount: number = 0;\n @State() liveRegionMessage = \"\";\n\n get focusedElement(): Element | null {\n return this.el.shadowRoot!.activeElement;\n }\n get listItemEls(): HTMLLIElement[] {\n return Array.from(this.dropdownEl.querySelectorAll(\"li\"));\n }\n get tagEls(): HTMLLIElement[] {\n return this.tagAreaEl ? Array.from(this.tagAreaEl.querySelectorAll(\".tag\")) : [];\n }\n get nonLockedTagEls(): HTMLLIElement[] {\n return this.tagEls.filter((tag) => !tag.classList.contains(\"locked\"));\n }\n get optionEls(): HTMLLIElement[] {\n return Array.from(this.dropdownEl.querySelectorAll(\".option\"));\n }\n get wmRowEls(): HTMLWmTagInputRowElement[] {\n return Array.from(this.el.querySelectorAll(\"wm-tag-input-row\"));\n }\n get localRowEls(): HTMLElement[] {\n return Array.from(this.el.shadowRoot!.querySelectorAll(\"tr\"));\n }\n get filteredRows(): HTMLWmTagInputRowElement[] {\n return this.wmRowEls.filter((row) => {\n const colValues = [row.col1, row.col2, row.col3, row.col4].join(\"\").toLowerCase();\n return this.inputEl && this.inputEl.value ? colValues.includes(this.inputEl.value.toLowerCase()) : true;\n });\n }\n get nonLockedTagsList() {\n let list: string[] = [];\n\n if (this.tagInputType === \"table\") {\n this.tagsList.forEach((id) => {\n const correspondingRowEl = this.wmRowEls.filter((row) => id === row.id)[0];\n if (!correspondingRowEl.locked) {\n list.push(id);\n }\n });\n } else if (this.tagInputType === \"dropdown\") {\n list = this.tagsList;\n }\n\n return list;\n }\n get tagLimitReached(): boolean {\n return !!(this.maxTags && this.tagsList.length >= this.maxTags);\n }\n\n get noResultsMessage() {\n return intl.formatMessage({\n id: \"tagInput.noResults\",\n defaultMessage: \"No results match your search.\",\n description: \"Message displayed when a user's search returns empty.\",\n });\n }\n\n get componentMessages(): MessageConfig {\n const addNewHelpText = intl.formatMessage({\n id: \"tagInput.addNewHelpText\",\n defaultMessage: \"Press the Enter or Comma key to add a new tag.\",\n description: \"Help text appearing in a dropdown. Use imperative\",\n });\n const selectionHelpText = intl.formatMessage({\n id: \"tagInput.selectionHelpText\",\n defaultMessage: \"Search and select a tag.\",\n description: \"Help text appearing in a dropdown. Use imperative\",\n });\n const maxTagsReachedMessage = intl.formatMessage({\n id: \"tagInput.maxTagsReached\",\n defaultMessage: \"No more tags can be added because the limit has been reached.\",\n });\n const tagAreaInstructions = intl.formatMessage({\n id: \"tagInput.tagAreaInstructions\",\n defaultMessage: \"tag selection. Press Backspace or Delete to remove a tag.\",\n });\n const tagsAddedMessage = intl.formatMessage({\n id: \"tagInput.tagsAdded\",\n defaultMessage: \"Tags added\",\n description: \"For the user to understand how close they are to the tag limit, followed by x/y count\",\n });\n\n const defaultConfig: MessageConfig = {\n addNewHelpText: addNewHelpText,\n selectionHelpText: selectionHelpText,\n maxTagsReached: maxTagsReachedMessage,\n tagAreaInstructions: tagAreaInstructions,\n tagsAdded: tagsAddedMessage,\n };\n\n const userProvidedConfig = safeParseJSON(this.messageConfig);\n\n return userProvidedConfig ? { ...defaultConfig, ...userProvidedConfig } : defaultConfig;\n }\n\n get inputMinimumWidth(): number {\n // 150px is the minimum width of the input field, or the length of the placeholder text\n const inputElStyles = getComputedStyle(this.inputEl);\n const tagElStyles = getComputedStyle(this.tagEls[this.tagEls.length - 1]);\n const inputElBuffer = [\n inputElStyles.paddingLeft,\n inputElStyles.paddingRight,\n inputElStyles.marginLeft,\n inputElStyles.marginRight,\n tagElStyles.marginRight,\n ].reduce((prev, curr) => prev + parseInt(curr.replace(\"px\", \"\")), 0);\n\n const minimumWidth = Math.max(150, measureText(this.inputEl, this.placeholder!).width + inputElBuffer);\n return minimumWidth;\n }\n\n generateTagAddedMessage(tag: string): string {\n return intl.formatMessage(\n {\n id: \"tagInput.tagAdded\",\n defaultMessage: \"{tagName} added.\",\n description: \"A confirmation for adding a tag.\",\n },\n { tagName: tag }\n );\n }\n\n generateTagAlreadyAddedMessage(tag: string): string {\n return intl.formatMessage(\n {\n id: \"tagInput.tagAlreadyAdded\",\n defaultMessage: \"{tagName} has already been added.\",\n description: \"An alert for adding a tag that is already present.\",\n },\n { tagName: tag }\n );\n }\n\n componentWillLoad() {\n if (!this.placeholder) {\n this.placeholder = this.createPlaceholderDefault(this.addNew, !!this.options);\n }\n if (!this.label) {\n console.error(\"wm-tag-input must have a label property\");\n }\n\n this.consolidateSelectedTags();\n\n this.el.focus = () => {\n const firstFocusableTag = this.nonLockedTagEls[0];\n if (firstFocusableTag) {\n this.tagAreaEl.focus();\n this.focusTag(firstFocusableTag);\n } else {\n this.inputEl.focus();\n }\n };\n\n // on resize of component, trigger componentDidRender -> positionInput\n const resizeObserver = new ResizeObserver(() => this.debouncedUpdate());\n resizeObserver.observe(this.el);\n }\n\n componentDidLoad() {\n // prevent highlighting of pre-selected tags\n this.tagEls.forEach((el) => el.classList.remove(\"highlight\"));\n }\n\n componentDidRender() {\n this.positionInput();\n }\n\n consolidateSelectedTags() {\n this.tagsList.forEach((tag) => {\n if (!this.includesCaseInsensitive(this.optionsList, tag)) {\n this.options += `${this.options.length > 0 ? \",\" : \"\"}${tag}`;\n }\n });\n\n this.optionsList = csvToArray(this.options);\n }\n\n createPlaceholderDefault(addNew: boolean, hasOptions: boolean): string {\n const addAndSearchPlaceholder = intl.formatMessage({\n id: \"tagInput.placeholderAddAndSearch\",\n defaultMessage: \"Add or search for a tag\",\n description: \"Placeholder text. Use imperative\",\n });\n const searchPlaceholder = intl.formatMessage({\n id: \"tagInput.placeholderSearch\",\n defaultMessage: \"Search and select a tag\",\n description: \"Placeholder text. Use imperative\",\n });\n const addPlaceholder = intl.formatMessage({\n id: \"tagInput.placeholderAdd\",\n defaultMessage: \"Add a new tag\",\n description: \"Placeholder text. Use imperative\",\n });\n\n let placeholder = \"\";\n if (addNew && hasOptions) {\n placeholder = addAndSearchPlaceholder;\n } else if (!addNew && hasOptions) {\n placeholder = searchPlaceholder;\n } else if (addNew) {\n placeholder = addPlaceholder;\n }\n return placeholder;\n }\n\n @Watch(\"tagsList\")\n reflectSelectedTags(newValue: string[], oldValue: string[]) {\n const isAddition = newValue.length > oldValue.length;\n let changedTag: string | HTMLWmTagInputRowElement = \"\";\n let selectedTags: string[] | HTMLWmTagInputRowElement[] = this.tagsList;\n\n if (isAddition) {\n changedTag = newValue.filter((val) => !oldValue.includes(val))[0];\n } else {\n changedTag = oldValue.filter((val) => !newValue.includes(val))[0];\n }\n\n // event emitted by type table uses element references instead of strings\n if (this.tagInputType === \"table\") {\n changedTag = this.wmRowEls.filter((row) => row.id === changedTag)[0];\n selectedTags = this.tagsList.map((id) => this.el.querySelector(`#${id}`) as HTMLWmTagInputRowElement);\n }\n\n this.selectedTags = this.listToCSV(this.tagsList);\n let detail = { value: selectedTags, tagChanged: changedTag };\n this.wmTagInputChanged.emit(detail);\n }\n\n @Watch(\"errorMessage\")\n handleErrorMessageChange() {\n if (this.errorMessage) {\n this.announce(this.errorMessage);\n }\n }\n\n @Listen(\"wmTagInputRowUpdated\")\n handleRowUpdate() {\n forceUpdate(this.el);\n }\n\n @Listen(\"click\", { target: \"document\" })\n closeIfNotElOrChild(ev: MouseEvent): void {\n const isntElOrChild = ev.target !== this.el && !this.el.shadowRoot!.contains(ev.target as HTMLElement);\n\n if (this.tagInputType === \"dropdown\" && isntElOrChild && this.isExpanded) {\n this.closeDropdown();\n }\n }\n\n // From wm-button\n // we need to listen for scroll events during the capture phase because they do not bubble up\n // there can be layouts where the main content has 100vh and overflows\n // in these cases window will register no scroll events unless we catch on they way down\n @Listen(\"scroll\", { target: \"window\", capture: true })\n dismissTooltip() {\n if (this.tooltipVisible) {\n hideTooltip();\n this.tooltipVisible = false;\n }\n }\n\n debouncedUpdate = debounce(() => forceUpdate(this.el), 30);\n\n handleInputKeyDown(ev: KeyboardEvent) {\n if (/^.$/.test(ev.key) && this.inputEl.value.length >= this.characterLimit) {\n this.announce(this.generateCharacterLimitWarning(this.inputEl.value.length, this.characterLimit));\n }\n\n // prevent keydown triggering on tag area\n ev.stopPropagation();\n switch (ev.key) {\n case \"Enter\":\n case \",\":\n ev.preventDefault();\n this.handleInputEnter();\n break;\n case \"ArrowDown\":\n ev.preventDefault();\n this.handleInputArrowDown();\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n this.handleInputArrowUp();\n break;\n case \"ArrowLeft\":\n ev.preventDefault();\n if (this.tagInputType === \"table\" && this.tablePosition.row) {\n this.moveLeftCell();\n }\n break;\n case \"ArrowRight\":\n ev.preventDefault();\n if (this.tagInputType === \"table\" && this.tablePosition.row) {\n this.moveRightCell();\n }\n break;\n case \"Escape\":\n if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n this.closeDropdown();\n }\n break;\n case \"ArrowLeft\":\n case \"Backspace\":\n this.handleInputBackspace();\n break;\n }\n }\n\n handleInputFocus() {\n if (this.tagInputType === \"dropdown\") {\n this.openDropdown();\n this.clearListItemFocus();\n }\n // force update needed to apply styled state of field-wrapper el\n forceUpdate(this.el);\n }\n\n handleInputChanged(value: string) {\n this.charCount = value.length;\n\n if (this.tagInputType === \"dropdown\") {\n this.clearListItemFocus();\n if (this.charCount >= this.characterLimit - 5) {\n this.announce(this.generateCharacterLimitWarning(this.charCount, this.characterLimit));\n }\n if (!this.isExpanded) {\n this.openDropdown();\n }\n } else if (this.tagInputType === \"table\") {\n this.clearCellFocus();\n }\n this.announceExistingOptions();\n }\n\n handleInputEnter() {\n if (this.tagInputType === \"dropdown\") {\n if (this.focusedListItem) {\n this.handleListItemClick(this.focusedListItem);\n } else {\n this.submitInput(this.addNew, this.inputEl.value.trim());\n }\n } else if (this.tagInputType === \"table\" && this.tablePosition.row > 0) {\n this.handleTableRowClick(this.localRowEls[this.tablePosition.row].id);\n }\n }\n\n submitInput(canAddNew: boolean, value: string) {\n const hasNonWhiteSpaceCharacters = value.match(/\\S/);\n if (canAddNew && hasNonWhiteSpaceCharacters) {\n this.addTag(value);\n this.optionsList = this.addOption(value);\n this.resetInput();\n }\n }\n\n handleInputArrowDown() {\n if (this.tagInputType === \"table\") {\n this.moveDownRow();\n } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n this.moveDownListItem();\n } else if (this.tagInputType === \"dropdown\") {\n this.openDropdown();\n }\n }\n\n handleInputArrowUp() {\n if (this.tagInputType === \"table\") {\n this.moveUpRow();\n } else if (this.tagInputType === \"dropdown\" && this.isExpanded) {\n this.moveUpListItem();\n } else if (this.tagInputType === \"dropdown\") {\n this.openDropdown();\n }\n }\n\n handleInputBackspace() {\n if (this.inputEl.value === \"\" && this.tagsList.length > 0) {\n // wait for events to finish firing before redirecting focus\n // prevents double input in input area and tag area\n window.requestAnimationFrame(() => {\n if (this.nonLockedTagsList.length > 0) {\n this.tagAreaEl.focus();\n this.focusTag(this.tagEls[this.tagEls.length - 1]);\n }\n });\n }\n }\n\n handleListItemKeyDown(ev: KeyboardEvent) {\n const typedEvTarget = ev.target as HTMLElement;\n\n switch (ev.key) {\n case \"Enter\":\n case \" \":\n ev.preventDefault();\n typedEvTarget.click();\n break;\n case \"ArrowDown\":\n ev.preventDefault();\n this.moveDownListItem();\n break;\n case \"ArrowUp\":\n ev.preventDefault();\n this.moveUpListItem();\n break;\n case \"Escape\":\n if (this.focusedElement !== this.inputEl) {\n this.inputEl.focus();\n } else if (this.tagInputType === \"dropdown\") {\n this.closeDropdown();\n }\n break;\n }\n }\n\n handleListItemClick(item: HTMLElement) {\n const tag = item.dataset.option!.trim() || \"\";\n\n if (this.includesCaseInsensitive(this.tagsList, tag)) {\n this.announce(this.generateTagAlreadyAddedMessage(tag));\n } else {\n this.resetInput();\n this.addTag(tag);\n this.optionsList = this.addOption(tag);\n this.focusedListItem = null;\n }\n }\n\n handleTableRowClick(rowId: string) {\n const referencedRow = this.el.querySelector(`#${rowId}`) as HTMLWmTagInputRowElement;\n const isLocked = referencedRow.locked;\n\n if (!isLocked) {\n if (this.includesCaseInsensitive(this.tagsList, rowId)) {\n this.removeTag(rowId);\n } else if (!this.tagLimitReached) {\n this.addTag(rowId);\n this.resetInput();\n }\n }\n }\n\n handleTagAreaKeyDown(ev: KeyboardEvent) {\n switch (ev.key) {\n case \"ArrowLeft\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.moveLeftTag();\n break;\n case \"ArrowRight\":\n case \"ArrowDown\":\n ev.preventDefault();\n this.moveRightTag();\n break;\n case \"Backspace\":\n case \"Delete\":\n this.handleTagAreaDelete();\n break;\n }\n }\n\n handleTagAreaDelete() {\n const isLocked = this.focusedTag && this.focusedTag.classList.contains(\"locked\");\n\n if (this.focusedTag && this.focusedTag.dataset.tag && !isLocked) {\n this.removeTag(this.focusedTag.dataset.tag);\n\n if (this.nonLockedTagsList.length === 0) {\n // focus input if no tags are left\n this.inputEl.focus();\n } else if (this.focusedTag === this.tagEls[this.tagEls.length - 1]) {\n // reassign focus if removing the last tag but there are still tags remaining\n this.focusedTag = this.tagEls[this.tagEls.length - 2];\n this.focusTag(this.focusedTag);\n }\n }\n }\n\n handleBlur(ev: FocusEvent, component: HTMLElement) {\n const isntElOrChild =\n ev.relatedTarget !== component && !this.el.shadowRoot!.contains(ev.relatedTarget as HTMLElement);\n\n this.dismissTooltip();\n this.clearCellFocus();\n\n if (isntElOrChild) {\n this.fieldWrapperEl.classList.remove(\"focused\");\n if (this.tagInputType === \"dropdown\") {\n this.closeDropdown();\n }\n }\n }\n\n handleCellMouseEnter(ev: MouseEvent) {\n const cell = ev.target as HTMLElement;\n const contentWrapper = cell.querySelector(\".cell-content-wrapper\")!;\n const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\n\n if (isTruncated) {\n // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\n showTooltip(\"bottom\", cell, cell.innerText!);\n this.tooltipVisible = true;\n }\n }\n\n handleTagAreaFocus() {\n if (this.tagInputType === \"dropdown\") {\n this.closeDropdown();\n }\n\n const firstFocusableTag = this.nonLockedTagEls[0];\n firstFocusableTag && this.focusTag(firstFocusableTag);\n }\n\n handleRemoveButtonClick(tag: string) {\n this.moveLeftTag();\n this.removeTag(tag);\n }\n\n moveDownListItem() {\n if (this.listItemEls.length > 0) {\n const firstListItem = this.listItemEls[0];\n\n if (!this.focusedListItem) {\n this.focusListItem(firstListItem);\n } else if (this.focusedListItem.nextElementSibling) {\n this.focusListItem(this.focusedListItem.nextElementSibling as HTMLLIElement);\n } else {\n this.focusListItem(firstListItem);\n }\n }\n }\n\n moveUpListItem() {\n if (this.listItemEls.length > 0) {\n const lastListItem = this.listItemEls[this.listItemEls.length - 1];\n\n if (!this.focusedListItem) {\n this.focusListItem(lastListItem);\n } else if (this.focusedListItem.previousElementSibling) {\n this.focusListItem(this.focusedListItem.previousElementSibling as HTMLLIElement);\n } else {\n this.clearListItemFocus();\n }\n }\n }\n\n moveDownRow() {\n if (this.filteredRows.length > 0) {\n if (this.tablePosition.row === 0) {\n this.tablePosition.row = 1;\n } else if (this.tablePosition.row === this.filteredRows.length) {\n this.tablePosition.row = 1;\n } else {\n this.tablePosition.row++;\n }\n\n // skip locked rows\n const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\n if (rowToFocus.locked) {\n this.moveDownRow();\n } else {\n this.focusCell(this.tablePosition);\n }\n }\n }\n\n moveUpRow() {\n if (this.filteredRows.length > 0) {\n if (this.tablePosition.row === 0) {\n this.tablePosition.row = this.filteredRows.length;\n } else if (this.tablePosition.row === 1) {\n this.tablePosition.row = 0;\n } else {\n this.tablePosition.row--;\n }\n\n // skip locked rows\n const rowToFocus = this.wmRowEls[this.tablePosition.row - 1] as HTMLWmTagInputRowElement;\n if (rowToFocus && rowToFocus.locked) {\n this.moveUpRow();\n } else if (rowToFocus) {\n this.focusCell(this.tablePosition);\n } else {\n this.clearCellFocus();\n }\n }\n }\n\n moveLeftCell() {\n if (this.tablePosition.column != 1) {\n this.tablePosition.column--;\n this.focusCell(this.tablePosition);\n }\n }\n\n moveRightCell() {\n const numCols = csvToArray(this.colHeaders).length;\n\n if (this.tablePosition.column < numCols) {\n this.tablePosition.column++;\n this.focusCell(this.tablePosition);\n }\n }\n\n moveLeftTag() {\n const lastTag = this.tagEls[this.tagEls.length - 1];\n if (this.focusedTag && this.tagEls.includes(this.focusedTag.previousElementSibling as HTMLLIElement)) {\n this.focusedTag = this.focusedTag.previousElementSibling as HTMLLIElement;\n } else {\n this.focusedTag = lastTag;\n }\n // skip locked tags\n if (this.focusedTag.classList.contains(\"locked\") && this.nonLockedTagEls.length > 0) {\n this.moveLeftTag();\n } else {\n this.focusTag(this.focusedTag);\n }\n }\n\n moveRightTag() {\n const firstTag = this.tagEls[0];\n if (this.focusedTag && this.tagEls.includes(this.focusedTag.nextElementSibling as HTMLLIElement)) {\n this.focusedTag = this.focusedTag.nextElementSibling as HTMLLIElement;\n } else {\n this.focusedTag = firstTag;\n }\n // skip locked tags\n if (this.focusedTag.classList.contains(\"locked\")) {\n this.moveRightTag();\n } else {\n this.focusTag(this.focusedTag);\n }\n }\n\n addOption(option: string): string[] {\n let newOptionsList = this.optionsList;\n const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, option);\n if (!optionAlreadyExists) {\n newOptionsList = newOptionsList.concat(option);\n }\n return newOptionsList;\n }\n\n removeOption(option: string) {\n this.optionsList = this.filterCaseInsensitive(this.optionsList, option);\n }\n\n addTag(tag: string): void {\n let newTagsList = this.tagsList;\n const tagAlreadyAdded = this.includesCaseInsensitive(this.tagsList, tag);\n const tagExistsAsOption = this.optionsList.filter((x) => x.toLowerCase() === tag.toLowerCase())[0];\n\n if (!tagAlreadyAdded) {\n let textToAnnounce = tag;\n if (this.tagInputType === \"table\") {\n const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n textToAnnounce = referencedRow.col1!;\n }\n this.announce(this.generateTagAddedMessage(textToAnnounce));\n this.tagsList = newTagsList.concat(tagExistsAsOption || tag);\n // if maxTags has been reached, focus should go to the tagArea\n if (this.tagLimitReached) {\n this.tagAreaEl.focus();\n }\n }\n }\n\n removeTag(tag: string) {\n let textToAnnounce = tag;\n if (this.tagInputType === \"table\") {\n const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n textToAnnounce = referencedRow.col1!;\n }\n const tagRemovedMessage = intl.formatMessage(\n { id: \"tagInput.tagRemoved\", defaultMessage: \"{tag} removed\" },\n { tag: textToAnnounce }\n );\n this.announce(tagRemovedMessage);\n this.tagsList = this.filterCaseInsensitive(this.tagsList, tag);\n\n if (this.tagInputType === \"dropdown\") {\n // if a tag was introduced by the user, also remove it from the dropdown options\n const devOptionsList = csvToArray(this.options);\n if (this.includesCaseInsensitive(this.optionsList, tag) && !this.includesCaseInsensitive(devOptionsList, tag)) {\n this.removeOption(tag);\n }\n }\n }\n\n focusListItem(item: HTMLLIElement): void {\n this.focusedListItem = item;\n this.inputEl.setAttribute(\"aria-activedescendant\", this.focusedListItem.id);\n item.scrollIntoView({ block: \"nearest\" });\n }\n\n focusTag(element: HTMLLIElement): void {\n if (element.classList.contains(\"locked\")) {\n this.focusedTag = null;\n this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\n } else {\n this.focusedTag = element;\n this.tagAreaEl.setAttribute(\"aria-activedescendant\", this.focusedTag.id);\n }\n }\n\n focusCell(position: TablePosition) {\n this.clearCellFocus(false);\n\n if (position.row) {\n const rowToFocus = this.localRowEls[position.row];\n const rowCells = rowToFocus.querySelectorAll(\"td\");\n const cellToFocus = rowCells[position.column - 1];\n const contentWrapper = cellToFocus.querySelector(\".cell-content-wrapper\")!;\n const isTruncated = contentWrapper.scrollWidth > contentWrapper.clientWidth;\n\n rowToFocus.classList.add(\"focused\");\n cellToFocus.classList.add(\"focused\");\n cellToFocus.scrollIntoView({ block: \"nearest\" });\n this.inputEl.setAttribute(\"aria-activedescendant\", cellToFocus.id);\n\n this.dismissTooltip();\n if (isTruncated) {\n // innerText is necessary vs textContent, as innerText ignores sr-only / display: none text\n showTooltip(\"bottom\", cellToFocus, cellToFocus.innerText!);\n this.tooltipVisible = true;\n }\n }\n }\n\n clearTagFocus() {\n this.tagAreaEl.setAttribute(\"aria-activedescendant\", \"\");\n this.focusedTag = null;\n }\n\n clearCellFocus(resetPosition: boolean = true) {\n this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\n if (resetPosition) {\n this.tablePosition = { row: 0, column: 1 };\n }\n\n this.localRowEls.forEach((row) => {\n row.classList.remove(\"focused\");\n row.querySelectorAll(\"td\").forEach((cell) => {\n cell.classList.remove(\"focused\");\n });\n });\n }\n\n openDropdown() {\n // given an offset of -2px because the dropdown is transformed downwards to avoid overlapping the focus border\n this.openUp = shouldOpenUp(this.el, this.dropdownEl, this.el.clientHeight, -2);\n this.isExpanded = true;\n }\n\n closeDropdown() {\n this.clearListItemFocus();\n this.isExpanded = false;\n }\n\n clearListItemFocus() {\n this.focusedListItem = null;\n this.inputEl.setAttribute(\"aria-activedescendant\", \"\");\n\n this.listItemEls.forEach((el) => {\n el.classList.remove(\"focused\");\n });\n }\n\n resetInput() {\n this.charCount = 0;\n this.inputEl.value = \"\";\n }\n\n announce(message: string) {\n // \\u00A0 is a non-breaking space character, which causes the message to be read as a new one\n if (this.liveRegionEl.textContent === message) {\n message += \"\\u00A0\";\n }\n this.liveRegionMessage = message;\n }\n\n announceExistingOptions() {\n // request animation frame to wait for re-rendering of filtered options\n window.requestAnimationFrame(() => {\n let numResults = 0;\n\n if (this.tagInputType === \"dropdown\") {\n numResults = this.optionEls.length;\n } else if (this.tagInputType === \"table\") {\n numResults = this.filteredRows.length;\n }\n\n const existingOptionsMessage = intl.formatMessage(\n {\n id: \"tagInput.existingOptions\",\n defaultMessage: \"{num, plural, one {1 existing option.} other {# existing options.}}\",\n },\n { num: numResults }\n );\n\n this.announce(existingOptionsMessage);\n });\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 positionInput() {\n const lastTag = this.tagEls[this.tagEls.length - 1];\n // default placement to fall back to when no tags are present, or not enough space is available\n this.inputEl.style.position = \"static\";\n this.inputEl.style.width = \"100%\";\n\n if (lastTag) {\n const spaceAvailable = this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right;\n if (spaceAvailable >= this.inputMinimumWidth) {\n // because the input has right: 0px\n // all thats needed to properly place it is setting position: absolute, top, and width\n this.inputEl.style.position = \"absolute\";\n this.inputEl.style.top = lastTag.offsetTop.toString() + \"px\";\n this.inputEl.style.width =\n (this.tagAreaEl.getBoundingClientRect().right - lastTag.getBoundingClientRect().right - 8).toString() + \"px\";\n }\n }\n }\n\n /// Helpers\n\n listToCSV(list: string[]): string {\n return list.join(\",\");\n }\n\n includesCaseInsensitive(list: string[], element: string): boolean {\n const lowercaseList = list.map((str) => str.toLowerCase());\n return lowercaseList.includes(element.toLowerCase());\n }\n\n filterCaseInsensitive(list: string[], element: string): string[] {\n return list.filter((x) => x.toLowerCase() !== element.toLowerCase());\n }\n\n sortCaseInsensitive(list: string[]) {\n // The vanilla .sort method places words that start with capital letters above others (ASCII order)\n // so we need to pass in our own compare function to sort case-insensitive\n return list.sort((a, b) => {\n a = a.toLowerCase();\n b = b.toLowerCase();\n return a > b ? 1 : a < b ? -1 : 0;\n });\n }\n\n /// Renders\n\n renderTags() {\n let lockedTags: HTMLLIElement[] = [];\n let unlockedTags: HTMLLIElement[] = [];\n\n this.tagsList.forEach((tag, idx) => {\n const id = `tag${idx + 1}`;\n let tagText = \"\";\n let isLocked = false;\n\n if (this.tagInputType === \"dropdown\") {\n tagText = tag;\n } else if (this.tagInputType === \"table\") {\n // display table tags using col1 of the row with the same id\n // if one can't be found, display as empty\n const referencedRow = this.el.querySelector(`#${tag}`) as HTMLWmTagInputRowElement;\n tagText = referencedRow ? referencedRow.col1! : \"\";\n isLocked = referencedRow ? referencedRow.locked : false;\n }\n\n // make sure locked tags always appear in front of list\n const targetList = isLocked ? lockedTags : unlockedTags;\n targetList.push(\n <li\n id={id}\n class={`tag highlight ${this.focusedTag && this.focusedTag.id === id ? \"focused\" : \"\"} ${\n isLocked ? \"locked\" : \"\"\n }`}\n data-tag={tag}\n role=\"option\"\n >\n {tagText}\n {isLocked ? (\n <div class=\"icon lock\"></div>\n ) : (\n <button class=\"icon remove-btn\" tabIndex={-1} onClick={() => this.handleRemoveButtonClick(tag)}></button>\n )}\n </li>\n );\n });\n\n return [...lockedTags, ...unlockedTags];\n }\n\n renderDropdown() {\n return (\n <div\n class={`dropdown-wrapper ${this.isExpanded ? \"open\" : \"\"} ${this.openUp ? \"upwards\" : \"\"}`}\n ref={(el) => (this.dropdownEl = el as HTMLDivElement)}\n >\n <div id=\"help-text\" class=\"help-text\">\n {this.renderHelpText()}\n </div>\n <ul\n class=\"dropdown\"\n id=\"dropdown\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n aria-expanded={this.isExpanded ? \"true\" : false}\n aria-label={this.label}\n tabindex={-1}\n >\n {this.inputEl && this.renderAddNewButton()}\n {this.renderListItems(this.optionsList)}\n </ul>\n </div>\n );\n }\n\n renderListItems(optionsList: string[]) {\n optionsList = this.sortCaseInsensitive(optionsList);\n\n // filter by input\n if (this.inputEl && this.inputEl.value) {\n optionsList = this.optionsList.filter((option) =>\n option.toLowerCase().includes(this.inputEl.value.toLowerCase())\n );\n }\n\n return optionsList.map((option, idx) => {\n const id = `option${idx + 1}`;\n const isFocused = this.focusedListItem && this.focusedListItem.id === id;\n const isSelected = this.includesCaseInsensitive(this.tagsList, option);\n\n return (\n <li\n class={`option ${isFocused ? \"focused\" : \"\"}`}\n role=\"option\"\n id={id}\n data-option={option}\n aria-selected={isSelected ? \"true\" : \"false\"}\n aria-disabled={isSelected ? \"true\" : \"false\"}\n onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\n onBlur={(ev) => this.handleBlur(ev, this.el)}\n onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\n >\n {option}\n </li>\n );\n });\n }\n\n renderAddNewButton() {\n const hasNonWhiteSpaceCharacters = this.inputEl.value.match(/\\S/);\n const optionAlreadyExists = this.includesCaseInsensitive(this.optionsList, this.inputEl.value.trim());\n if (this.addNew && hasNonWhiteSpaceCharacters && !optionAlreadyExists) {\n const id = `add-new-btn`;\n const isFocused = this.focusedListItem && this.focusedListItem.id === id;\n return (\n <li\n role=\"option\"\n class={`add-new-btn ${isFocused ? \"focused\" : \"\"}`}\n id={id}\n data-option={this.inputEl.value}\n onKeyDown={(ev) => this.handleListItemKeyDown(ev)}\n onBlur={(ev) => this.handleBlur(ev, this.el)}\n onClick={(ev) => this.handleListItemClick(ev.target as HTMLElement)}\n tabIndex={isFocused ? 0 : -1}\n >\n {`Add \"${this.inputEl.value.trim()}\"`}\n </li>\n );\n } else return \"\";\n }\n\n renderHelpText() {\n let helpText = \"\";\n\n if (this.optionsList.length > 0) {\n helpText += this.componentMessages.selectionHelpText;\n }\n if (this.addNew) {\n helpText += \" \" + this.componentMessages.addNewHelpText;\n }\n\n return helpText;\n }\n\n renderTagCounter() {\n if (this.maxTags) {\n return (\n <div class=\"lower-row\">\n <div id=\"max-tags\">\n {`${this.componentMessages.tagsAdded}: ${this.tagsList.length}/${this.maxTags}`}\n {this.tagLimitReached && ` - ${this.componentMessages.maxTagsReached}`}\n </div>\n </div>\n );\n }\n }\n\n renderTable() {\n return (\n <div class=\"table-wrapper\" onScroll={() => this.dismissTooltip()}>\n <table\n id=\"table\"\n role=\"grid\"\n class={`${this.colWidths ? \"fixed-widths\" : \"\"}`}\n aria-label={this.label}\n aria-multiselectable=\"true\"\n >\n {this.renderTableHeaders()}\n {this.filteredRows.length ? this.renderTableRows() : <div class=\"no-results\">{this.noResultsMessage}</div>}\n </table>\n </div>\n );\n }\n\n renderTableHeaders() {\n return (\n <tr class=\"headers\" role=\"row\">\n {csvToArray(this.colHeaders).map((header, idx) => {\n let overflowRule = \"wrap\";\n if (this.colWrap && csvToArray(this.colWrap)[idx]) {\n overflowRule = csvToArray(this.colWrap)[idx];\n }\n return (\n <th\n class={`header-cell ${overflowRule}`}\n role=\"columnheader\"\n // @ts-ignore\n width={this.colWidths ? csvToArray(this.colWidths)[idx] : \"\"}\n >\n {header}\n </th>\n );\n })}\n </tr>\n );\n }\n\n renderTableRows() {\n return this.filteredRows.map((row) => {\n const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\n\n return (\n <tr\n id={row.id}\n class={`${row.locked ? \"locked\" : \"\"} ${isSelected ? \"selected\" : \"\"}`}\n role=\"row\"\n onClick={() => this.handleTableRowClick(row.id)}\n >\n {this.renderTableCells(row)}\n </tr>\n );\n });\n }\n\n renderTableCells(row: HTMLWmTagInputRowElement) {\n const colValues = [row.col1, row.col2, row.col3, row.col4].filter((val) => !!val);\n const isSelected: boolean = this.includesCaseInsensitive(this.tagsList, row.id);\n\n return colValues.map((val, idx) => {\n const localId = `${row.id}-col${idx + 1}`;\n let overflowRule = \"wrap\";\n if (this.colWrap && csvToArray(this.colWrap)[idx]) {\n overflowRule = csvToArray(this.colWrap)[idx];\n }\n\n return (\n <td\n id={localId}\n role=\"gridcell\"\n aria-describedby={`${localId}-description`}\n aria-selected={isSelected.toString()}\n onMouseEnter={(ev) => this.handleCellMouseEnter(ev)}\n onMouseLeave={() => this.dismissTooltip()}\n >\n <div class={`cell-content-wrapper ${overflowRule}`}>{val}</div>\n <div class=\"description\" id={`${localId}-description`}>\n {row.locked ? \"locked\" : \"\"}\n </div>\n </td>\n );\n });\n }\n\n render() {\n return (\n <Host id={this.uid}>\n <div class={`wrapper label-${this.labelPosition} ${this.errorMessage ? \"invalid\" : \"\"}`}>\n <div class=\"label-wrapper\">\n <label class=\"label\" htmlFor={`input${this.uid}`}>\n {this.label}\n {this.requiredField && (\n <span class=\"required\" aria-hidden=\"true\">\n *\n </span>\n )}\n </label>\n </div>\n <div\n class={`field-wrapper ${this.focusedElement ? \"focused\" : \"\"} ${this.errorMessage ? \"invalid\" : \"\"}`}\n ref={(el) => (this.fieldWrapperEl = el as HTMLDivElement)}\n >\n <div class=\"upper-row\">\n <div class=\"tags-and-input-wrapper\">\n {this.tagsList.length > 0 && (\n <ul\n ref={(el) => (this.tagAreaEl = el as HTMLUListElement)}\n class=\"tag-area\"\n role=\"listbox\"\n aria-activedescendant=\"\"\n aria-orientation=\"horizontal\"\n aria-label={`${this.label} ${\n this.tagsList.length > 0 ? this.componentMessages.tagAreaInstructions : \"\"\n }`}\n tabindex={this.nonLockedTagsList.length > 0 ? 0 : -1}\n aria-describedby={`info max-tags`}\n onFocus={() => this.handleTagAreaFocus()}\n onBlur={(ev) => {\n this.clearTagFocus();\n this.handleBlur(ev, this.el);\n }}\n onKeyDown={(ev) => this.handleTagAreaKeyDown(ev)}\n >\n {this.renderTags()}\n </ul>\n )}\n <input\n id={`input${this.uid}`}\n class={this.tagLimitReached ? \"hidden\" : \"\"}\n role=\"combobox\"\n ref={(el) => (this.inputEl = el as HTMLInputElement)}\n autocomplete=\"off\"\n aria-required={this.requiredField ? \"true\" : null}\n aria-controls={this.tagInputType}\n aria-describedby={`help-text${this.errorMessage ? \" error \" : \"\"}`}\n aria-label={`${this.label} ${\n this.tagInputType === \"dropdown\" ? globalMessages.getCharacterLimit(this.characterLimit) : \"\"\n }`}\n aria-expanded={this.tagInputType === \"dropdown\" ? this.isExpanded.toString() : null}\n placeholder={this.placeholder}\n maxLength={this.tagInputType === \"dropdown\" ? this.characterLimit : undefined}\n onInput={() => this.handleInputChanged(this.inputEl.value)}\n onBlur={(ev) => {\n this.handleBlur(ev, this.el);\n }}\n onFocus={() => this.handleInputFocus()}\n onKeyDown={(ev) => this.handleInputKeyDown(ev)}\n ></input>\n </div>\n {this.tagInputType === \"dropdown\" && (\n <div class=\"character-count\">\n {this.charCount}/{this.characterLimit}\n </div>\n )}\n </div>\n {this.renderTagCounter()}\n {this.tagInputType === \"dropdown\" && this.renderDropdown()}\n </div>\n {this.info && (\n <div id=\"info\" class=\"info-text\">\n {this.info}\n </div>\n )}\n {this.errorMessage && <div id=\"error\">{this.errorMessage}</div>}\n <div\n class=\"sr-only\"\n aria-live=\"assertive\"\n ref={(el) => (this.liveRegionEl = el as HTMLDivElement)}\n aria-atomic=\"true\"\n >\n {this.liveRegionMessage}\n </div>\n {this.tagInputType === \"table\" && this.renderTable()}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wjBAAA,IAAMA,EAAgB,0pc,IC4CTC,EAAQC,EAAA,0B,wFA6BXC,KAAAC,IAAcD,KAAKE,GAAGC,GAAKH,KAAKE,GAAGC,GAAKC,IACxCJ,KAAAK,OAAkB,MAClBL,KAAAM,eAA0B,MA6QlCN,KAAAO,gBAAkBC,GAAS,WAAM,OAAAC,EAAYC,EAAKR,GAAjB,GAAsB,I,wCAnSN,M,aACN,G,kBACoB,G,4DAGrC,K,8CAEO,M,oBACA,G,yCAEY,W,6FAIb,G,+CAUY,K,mBACJ,CAAES,IAAK,EAAGC,OAAQ,G,gBAC3B,M,cACDC,EAAWb,KAAKc,c,iBACbD,EAAWb,KAAKe,S,eACpB,E,uBACA,E,CAE7BC,OAAAC,eAAIC,EAAAC,UAAA,iBAAc,C,IAAlB,WACE,OAAOnB,KAAKE,GAAGkB,WAAYC,a,uCAE7BL,OAAAC,eAAIC,EAAAC,UAAA,cAAW,C,IAAf,WACE,OAAOG,MAAMC,KAAKvB,KAAKwB,WAAWC,iBAAiB,M,uCAErDT,OAAAC,eAAIC,EAAAC,UAAA,SAAM,C,IAAV,WACE,OAAOnB,KAAK0B,UAAYJ,MAAMC,KAAKvB,KAAK0B,UAAUD,iBAAiB,SAAW,E,uCAEhFT,OAAAC,eAAIC,EAAAC,UAAA,kBAAe,C,IAAnB,WACE,OAAOnB,KAAK2B,OAAOC,QAAO,SAACC,GAAQ,OAACA,EAAIC,UAAUC,SAAS,SAAxB,G,uCAErCf,OAAAC,eAAIC,EAAAC,UAAA,YAAS,C,IAAb,WACE,OAAOG,MAAMC,KAAKvB,KAAKwB,WAAWC,iBAAiB,W,uCAErDT,OAAAC,eAAIC,EAAAC,UAAA,WAAQ,C,IAAZ,WACE,OAAOG,MAAMC,KAAKvB,KAAKE,GAAGuB,iBAAiB,oB,uCAE7CT,OAAAC,eAAIC,EAAAC,UAAA,cAAW,C,IAAf,WACE,OAAOG,MAAMC,KAAKvB,KAAKE,GAAGkB,WAAYK,iBAAiB,M,uCAEzDT,OAAAC,eAAIC,EAAAC,UAAA,eAAY,C,IAAhB,eAAAT,EAAAV,KACE,OAAOA,KAAKgC,SAASJ,QAAO,SAACjB,GAC3B,IAAMsB,EAAY,CAACtB,EAAIuB,KAAMvB,EAAIwB,KAAMxB,EAAIyB,KAAMzB,EAAI0B,MAAMC,KAAK,IAAIC,cACpE,OAAO7B,EAAK8B,SAAW9B,EAAK8B,QAAQC,MAAQR,EAAUS,SAAShC,EAAK8B,QAAQC,MAAMF,eAAiB,I,0CAGvGvB,OAAAC,eAAIC,EAAAC,UAAA,oBAAiB,C,IAArB,eAAAT,EAAAV,KACE,IAAI2C,EAAiB,GAErB,GAAI3C,KAAK4C,eAAiB,QAAS,CACjC5C,KAAK6C,SAASC,SAAQ,SAAC3C,GACrB,IAAM4C,EAAqBrC,EAAKsB,SAASJ,QAAO,SAACjB,GAAQ,OAAAR,IAAOQ,EAAIR,EAAX,IAAe,GACxE,IAAK4C,EAAmBC,OAAQ,CAC9BL,EAAKM,KAAK9C,E,UAGT,GAAIH,KAAK4C,eAAiB,WAAY,CAC3CD,EAAO3C,KAAK6C,Q,CAGd,OAAOF,C,uCAET3B,OAAAC,eAAIC,EAAAC,UAAA,kBAAe,C,IAAnB,WACE,SAAUnB,KAAKkD,SAAWlD,KAAK6C,SAASM,QAAUnD,KAAKkD,Q,uCAGzDlC,OAAAC,eAAIC,EAAAC,UAAA,mBAAgB,C,IAApB,WACE,OAAOiC,EAAKC,cAAc,CACxBlD,GAAI,qBACJmD,eAAgB,gCAChBC,YAAa,yD,uCAIjBvC,OAAAC,eAAIC,EAAAC,UAAA,oBAAiB,C,IAArB,WACE,IAAMqC,EAAiBJ,EAAKC,cAAc,CACxClD,GAAI,0BACJmD,eAAgB,iDAChBC,YAAa,sDAEf,IAAME,EAAoBL,EAAKC,cAAc,CAC3ClD,GAAI,6BACJmD,eAAgB,2BAChBC,YAAa,sDAEf,IAAMG,EAAwBN,EAAKC,cAAc,CAC/ClD,GAAI,0BACJmD,eAAgB,kEAElB,IAAMK,EAAsBP,EAAKC,cAAc,CAC7ClD,GAAI,+BACJmD,eAAgB,8DAElB,IAAMM,EAAmBR,EAAKC,cAAc,CAC1ClD,GAAI,qBACJmD,eAAgB,aAChBC,YAAa,0FAGf,IAAMM,EAA+B,CACnCL,eAAgBA,EAChBC,kBAAmBA,EACnBK,eAAgBJ,EAChBC,oBAAqBA,EACrBI,UAAWH,GAGb,IAAMI,EAAqBC,EAAcjE,KAAKkE,eAE9C,OAAOF,EAAkBhD,OAAAmD,OAAAnD,OAAAmD,OAAA,GAAQN,GAAkBG,GAAuBH,C,uCAG5E7C,OAAAC,eAAIC,EAAAC,UAAA,oBAAiB,C,IAArB,WAEE,IAAMiD,EAAgBC,iBAAiBrE,KAAKwC,SAC5C,IAAM8B,EAAcD,iBAAiBrE,KAAK2B,OAAO3B,KAAK2B,OAAOwB,OAAS,IACtE,IAAMoB,EAAgB,CACpBH,EAAcI,YACdJ,EAAcK,aACdL,EAAcM,WACdN,EAAcO,YACdL,EAAYK,aACZC,QAAO,SAACC,EAAMC,GAAS,OAAAD,EAAOE,SAASD,EAAKE,QAAQ,KAAM,IAAnC,GAAyC,GAElE,IAAMC,EAAeC,KAAKC,IAAI,IAAKC,EAAYpF,KAAKwC,QAASxC,KAAKqF,aAAcC,MAAQf,GACxF,OAAOU,C,uCAGT/D,EAAAC,UAAAoE,wBAAA,SAAwB1D,GACtB,OAAOuB,EAAKC,cACV,CACElD,GAAI,oBACJmD,eAAgB,mBAChBC,YAAa,oCAEf,CAAEiC,QAAS3D,G,EAIfX,EAAAC,UAAAsE,+BAAA,SAA+B5D,GAC7B,OAAOuB,EAAKC,cACV,CACElD,GAAI,2BACJmD,eAAgB,oCAChBC,YAAa,sDAEf,CAAEiC,QAAS3D,G,EAIfX,EAAAC,UAAAuE,kBAAA,eAAAhF,EAAAV,KACE,IAAKA,KAAKqF,YAAa,CACrBrF,KAAKqF,YAAcrF,KAAK2F,yBAAyB3F,KAAK4F,SAAU5F,KAAKe,Q,CAEvE,IAAKf,KAAK6F,MAAO,CACfC,QAAQC,MAAM,0C,CAGhB/F,KAAKgG,0BAELhG,KAAKE,GAAG+F,MAAQ,WACd,IAAMC,EAAoBxF,EAAKyF,gBAAgB,GAC/C,GAAID,EAAmB,CACrBxF,EAAKgB,UAAUuE,QACfvF,EAAK0F,SAASF,E,KACT,CACLxF,EAAK8B,QAAQyD,O,GAKjB,IAAMI,EAAiB,IAAIC,gBAAe,WAAM,OAAA5F,EAAKH,iBAAL,IAChD8F,EAAeE,QAAQvG,KAAKE,G,EAG9BgB,EAAAC,UAAAqF,iBAAA,WAEExG,KAAK2B,OAAOmB,SAAQ,SAAC5C,GAAO,OAAAA,EAAG4B,UAAU2E,OAAO,YAApB,G,EAG9BvF,EAAAC,UAAAuF,mBAAA,WACE1G,KAAK2G,e,EAGPzF,EAAAC,UAAA6E,wBAAA,eAAAtF,EAAAV,KACEA,KAAK6C,SAASC,SAAQ,SAACjB,GACrB,IAAKnB,EAAKkG,wBAAwBlG,EAAKmG,YAAahF,GAAM,CACxDnB,EAAKK,SAAW,GAAA+F,OAAGpG,EAAKK,QAAQoC,OAAS,EAAI,IAAM,IAAE2D,OAAGjF,E,KAI5D7B,KAAK6G,YAAchG,EAAWb,KAAKe,Q,EAGrCG,EAAAC,UAAAwE,yBAAA,SAAyBC,EAAiBmB,GACxC,IAAMC,EAA0B5D,EAAKC,cAAc,CACjDlD,GAAI,mCACJmD,eAAgB,0BAChBC,YAAa,qCAEf,IAAM0D,EAAoB7D,EAAKC,cAAc,CAC3ClD,GAAI,6BACJmD,eAAgB,0BAChBC,YAAa,qCAEf,IAAM2D,EAAiB9D,EAAKC,cAAc,CACxClD,GAAI,0BACJmD,eAAgB,gBAChBC,YAAa,qCAGf,IAAI8B,EAAc,GAClB,GAAIO,GAAUmB,EAAY,CACxB1B,EAAc2B,C,MACT,IAAKpB,GAAUmB,EAAY,CAChC1B,EAAc4B,C,MACT,GAAIrB,EAAQ,CACjBP,EAAc6B,C,CAEhB,OAAO7B,C,EAITnE,EAAAC,UAAAgG,oBAAA,SAAoBC,EAAoBC,GAAxC,IAAA3G,EAAAV,KACE,IAAMsH,EAAaF,EAASjE,OAASkE,EAASlE,OAC9C,IAAIoE,EAAgD,GACpD,IAAIzG,EAAsDd,KAAK6C,SAE/D,GAAIyE,EAAY,CACdC,EAAaH,EAASxF,QAAO,SAAC4F,GAAQ,OAACH,EAAS3E,SAAS8E,EAAnB,IAAyB,E,KAC1D,CACLD,EAAaF,EAASzF,QAAO,SAAC4F,GAAQ,OAACJ,EAAS1E,SAAS8E,EAAnB,IAAyB,E,CAIjE,GAAIxH,KAAK4C,eAAiB,QAAS,CACjC2E,EAAavH,KAAKgC,SAASJ,QAAO,SAACjB,GAAQ,OAAAA,EAAIR,KAAOoH,CAAX,IAAuB,GAClEzG,EAAed,KAAK6C,SAAS4E,KAAI,SAACtH,GAAO,OAAAO,EAAKR,GAAGwH,cAAc,IAAAZ,OAAI3G,GAA1B,G,CAG3CH,KAAKc,aAAed,KAAK2H,UAAU3H,KAAK6C,UACxC,IAAI+E,EAAS,CAAEnF,MAAO3B,EAAc+G,WAAYN,GAChDvH,KAAK8H,kBAAkBC,KAAKH,E,EAI9B1G,EAAAC,UAAA6G,yBAAA,WACE,GAAIhI,KAAKiI,aAAc,CACrBjI,KAAKkI,SAASlI,KAAKiI,a,GAKvB/G,EAAAC,UAAAgH,gBAAA,WACE1H,EAAYT,KAAKE,G,EAInBgB,EAAAC,UAAAiH,oBAAA,SAAoBC,GAClB,IAAMC,EAAgBD,EAAGE,SAAWvI,KAAKE,KAAOF,KAAKE,GAAGkB,WAAYW,SAASsG,EAAGE,QAEhF,GAAIvI,KAAK4C,eAAiB,YAAc0F,GAAiBtI,KAAKwI,WAAY,CACxExI,KAAKyI,e,GASTvH,EAAAC,UAAAuH,eAAA,WACE,GAAI1I,KAAKM,eAAgB,CACvBqI,IACA3I,KAAKM,eAAiB,K,GAM1BY,EAAAC,UAAAyH,mBAAA,SAAmBP,GACjB,GAAI,MAAMQ,KAAKR,EAAGS,MAAQ9I,KAAKwC,QAAQC,MAAMU,QAAUnD,KAAK+I,eAAgB,CAC1E/I,KAAKkI,SAASlI,KAAKgJ,8BAA8BhJ,KAAKwC,QAAQC,MAAMU,OAAQnD,KAAK+I,gB,CAInFV,EAAGY,kBACH,OAAQZ,EAAGS,KACT,IAAK,QACL,IAAK,IACHT,EAAGa,iBACHlJ,KAAKmJ,mBACL,MACF,IAAK,YACHd,EAAGa,iBACHlJ,KAAKoJ,uBACL,MACF,IAAK,UACHf,EAAGa,iBACHlJ,KAAKqJ,qBACL,MACF,IAAK,YACHhB,EAAGa,iBACH,GAAIlJ,KAAK4C,eAAiB,SAAW5C,KAAKsJ,cAAc3I,IAAK,CAC3DX,KAAKuJ,c,CAEP,MACF,IAAK,aACHlB,EAAGa,iBACH,GAAIlJ,KAAK4C,eAAiB,SAAW5C,KAAKsJ,cAAc3I,IAAK,CAC3DX,KAAKwJ,e,CAEP,MACF,IAAK,SACH,GAAIxJ,KAAK4C,eAAiB,YAAc5C,KAAKwI,WAAY,CACvDxI,KAAKyI,e,CAEP,MACF,IAAK,YACL,IAAK,YACHzI,KAAKyJ,uBACL,M,EAINvI,EAAAC,UAAAuI,iBAAA,WACE,GAAI1J,KAAK4C,eAAiB,WAAY,CACpC5C,KAAK2J,eACL3J,KAAK4J,oB,CAGPnJ,EAAYT,KAAKE,G,EAGnBgB,EAAAC,UAAA0I,mBAAA,SAAmBpH,GACjBzC,KAAK8J,UAAYrH,EAAMU,OAEvB,GAAInD,KAAK4C,eAAiB,WAAY,CACpC5C,KAAK4J,qBACL,GAAI5J,KAAK8J,WAAa9J,KAAK+I,eAAiB,EAAG,CAC7C/I,KAAKkI,SAASlI,KAAKgJ,8BAA8BhJ,KAAK8J,UAAW9J,KAAK+I,gB,CAExE,IAAK/I,KAAKwI,WAAY,CACpBxI,KAAK2J,c,OAEF,GAAI3J,KAAK4C,eAAiB,QAAS,CACxC5C,KAAK+J,gB,CAEP/J,KAAKgK,yB,EAGP9I,EAAAC,UAAAgI,iBAAA,WACE,GAAInJ,KAAK4C,eAAiB,WAAY,CACpC,GAAI5C,KAAKiK,gBAAiB,CACxBjK,KAAKkK,oBAAoBlK,KAAKiK,gB,KACzB,CACLjK,KAAKmK,YAAYnK,KAAK4F,OAAQ5F,KAAKwC,QAAQC,MAAM2H,O,OAE9C,GAAIpK,KAAK4C,eAAiB,SAAW5C,KAAKsJ,cAAc3I,IAAM,EAAG,CACtEX,KAAKqK,oBAAoBrK,KAAKsK,YAAYtK,KAAKsJ,cAAc3I,KAAKR,G,GAItEe,EAAAC,UAAAgJ,YAAA,SAAYI,EAAoB9H,GAC9B,IAAM+H,EAA6B/H,EAAMgI,MAAM,MAC/C,GAAIF,GAAaC,EAA4B,CAC3CxK,KAAK0K,OAAOjI,GACZzC,KAAK6G,YAAc7G,KAAK2K,UAAUlI,GAClCzC,KAAK4K,Y,GAIT1J,EAAAC,UAAAiI,qBAAA,WACE,GAAIpJ,KAAK4C,eAAiB,QAAS,CACjC5C,KAAK6K,a,MACA,GAAI7K,KAAK4C,eAAiB,YAAc5C,KAAKwI,WAAY,CAC9DxI,KAAK8K,kB,MACA,GAAI9K,KAAK4C,eAAiB,WAAY,CAC3C5C,KAAK2J,c,GAITzI,EAAAC,UAAAkI,mBAAA,WACE,GAAIrJ,KAAK4C,eAAiB,QAAS,CACjC5C,KAAK+K,W,MACA,GAAI/K,KAAK4C,eAAiB,YAAc5C,KAAKwI,WAAY,CAC9DxI,KAAKgL,gB,MACA,GAAIhL,KAAK4C,eAAiB,WAAY,CAC3C5C,KAAK2J,c,GAITzI,EAAAC,UAAAsI,qBAAA,eAAA/I,EAAAV,KACE,GAAIA,KAAKwC,QAAQC,QAAU,IAAMzC,KAAK6C,SAASM,OAAS,EAAG,CAGzD8H,OAAOC,uBAAsB,WAC3B,GAAIxK,EAAKyK,kBAAkBhI,OAAS,EAAG,CACrCzC,EAAKgB,UAAUuE,QACfvF,EAAK0F,SAAS1F,EAAKiB,OAAOjB,EAAKiB,OAAOwB,OAAS,G,OAMvDjC,EAAAC,UAAAiK,sBAAA,SAAsB/C,GACpB,IAAMgD,EAAgBhD,EAAGE,OAEzB,OAAQF,EAAGS,KACT,IAAK,QACL,IAAK,IACHT,EAAGa,iBACHmC,EAAcC,QACd,MACF,IAAK,YACHjD,EAAGa,iBACHlJ,KAAK8K,mBACL,MACF,IAAK,UACHzC,EAAGa,iBACHlJ,KAAKgL,iBACL,MACF,IAAK,SACH,GAAIhL,KAAKuL,iBAAmBvL,KAAKwC,QAAS,CACxCxC,KAAKwC,QAAQyD,O,MACR,GAAIjG,KAAK4C,eAAiB,WAAY,CAC3C5C,KAAKyI,e,CAEP,M,EAINvH,EAAAC,UAAA+I,oBAAA,SAAoBsB,GAClB,IAAM3J,EAAM2J,EAAKC,QAAQC,OAAQtB,QAAU,GAE3C,GAAIpK,KAAK4G,wBAAwB5G,KAAK6C,SAAUhB,GAAM,CACpD7B,KAAKkI,SAASlI,KAAKyF,+BAA+B5D,G,KAC7C,CACL7B,KAAK4K,aACL5K,KAAK0K,OAAO7I,GACZ7B,KAAK6G,YAAc7G,KAAK2K,UAAU9I,GAClC7B,KAAKiK,gBAAkB,I,GAI3B/I,EAAAC,UAAAkJ,oBAAA,SAAoBsB,GAClB,IAAMC,EAAgB5L,KAAKE,GAAGwH,cAAc,IAAAZ,OAAI6E,IAChD,IAAME,EAAWD,EAAc5I,OAE/B,IAAK6I,EAAU,CACb,GAAI7L,KAAK4G,wBAAwB5G,KAAK6C,SAAU8I,GAAQ,CACtD3L,KAAK8L,UAAUH,E,MACV,IAAK3L,KAAK+L,gBAAiB,CAChC/L,KAAK0K,OAAOiB,GACZ3L,KAAK4K,Y,IAKX1J,EAAAC,UAAA6K,qBAAA,SAAqB3D,GACnB,OAAQA,EAAGS,KACT,IAAK,YACL,IAAK,UACHT,EAAGa,iBACHlJ,KAAKiM,cACL,MACF,IAAK,aACL,IAAK,YACH5D,EAAGa,iBACHlJ,KAAKkM,eACL,MACF,IAAK,YACL,IAAK,SACHlM,KAAKmM,sBACL,M,EAINjL,EAAAC,UAAAgL,oBAAA,WACE,IAAMN,EAAW7L,KAAKoM,YAAcpM,KAAKoM,WAAWtK,UAAUC,SAAS,UAEvE,GAAI/B,KAAKoM,YAAcpM,KAAKoM,WAAWX,QAAQ5J,MAAQgK,EAAU,CAC/D7L,KAAK8L,UAAU9L,KAAKoM,WAAWX,QAAQ5J,KAEvC,GAAI7B,KAAKmL,kBAAkBhI,SAAW,EAAG,CAEvCnD,KAAKwC,QAAQyD,O,MACR,GAAIjG,KAAKoM,aAAepM,KAAK2B,OAAO3B,KAAK2B,OAAOwB,OAAS,GAAI,CAElEnD,KAAKoM,WAAapM,KAAK2B,OAAO3B,KAAK2B,OAAOwB,OAAS,GACnDnD,KAAKoG,SAASpG,KAAKoM,W,IAKzBlL,EAAAC,UAAAkL,WAAA,SAAWhE,EAAgBiE,GACzB,IAAMhE,EACJD,EAAGkE,gBAAkBD,IAActM,KAAKE,GAAGkB,WAAYW,SAASsG,EAAGkE,eAErEvM,KAAK0I,iBACL1I,KAAK+J,iBAEL,GAAIzB,EAAe,CACjBtI,KAAKwM,eAAe1K,UAAU2E,OAAO,WACrC,GAAIzG,KAAK4C,eAAiB,WAAY,CACpC5C,KAAKyI,e,IAKXvH,EAAAC,UAAAsL,qBAAA,SAAqBpE,GACnB,IAAMqE,EAAOrE,EAAGE,OAChB,IAAMoE,EAAiBD,EAAKhF,cAAc,yBAC1C,IAAMkF,EAAcD,EAAeE,YAAcF,EAAeG,YAEhE,GAAIF,EAAa,CAEfG,EAAY,SAAUL,EAAMA,EAAKM,WACjChN,KAAKM,eAAiB,I,GAI1BY,EAAAC,UAAA8L,mBAAA,WACE,GAAIjN,KAAK4C,eAAiB,WAAY,CACpC5C,KAAKyI,e,CAGP,IAAMvC,EAAoBlG,KAAKmG,gBAAgB,GAC/CD,GAAqBlG,KAAKoG,SAASF,E,EAGrChF,EAAAC,UAAA+L,wBAAA,SAAwBrL,GACtB7B,KAAKiM,cACLjM,KAAK8L,UAAUjK,E,EAGjBX,EAAAC,UAAA2J,iBAAA,WACE,GAAI9K,KAAKmN,YAAYhK,OAAS,EAAG,CAC/B,IAAMiK,EAAgBpN,KAAKmN,YAAY,GAEvC,IAAKnN,KAAKiK,gBAAiB,CACzBjK,KAAKqN,cAAcD,E,MACd,GAAIpN,KAAKiK,gBAAgBqD,mBAAoB,CAClDtN,KAAKqN,cAAcrN,KAAKiK,gBAAgBqD,mB,KACnC,CACLtN,KAAKqN,cAAcD,E,IAKzBlM,EAAAC,UAAA6J,eAAA,WACE,GAAIhL,KAAKmN,YAAYhK,OAAS,EAAG,CAC/B,IAAMoK,EAAevN,KAAKmN,YAAYnN,KAAKmN,YAAYhK,OAAS,GAEhE,IAAKnD,KAAKiK,gBAAiB,CACzBjK,KAAKqN,cAAcE,E,MACd,GAAIvN,KAAKiK,gBAAgBuD,uBAAwB,CACtDxN,KAAKqN,cAAcrN,KAAKiK,gBAAgBuD,uB,KACnC,CACLxN,KAAK4J,oB,IAKX1I,EAAAC,UAAA0J,YAAA,WACE,GAAI7K,KAAKyN,aAAatK,OAAS,EAAG,CAChC,GAAInD,KAAKsJ,cAAc3I,MAAQ,EAAG,CAChCX,KAAKsJ,cAAc3I,IAAM,C,MACpB,GAAIX,KAAKsJ,cAAc3I,MAAQX,KAAKyN,aAAatK,OAAQ,CAC9DnD,KAAKsJ,cAAc3I,IAAM,C,KACpB,CACLX,KAAKsJ,cAAc3I,K,CAIrB,IAAM+M,EAAa1N,KAAKgC,SAAShC,KAAKsJ,cAAc3I,IAAM,GAC1D,GAAI+M,EAAW1K,OAAQ,CACrBhD,KAAK6K,a,KACA,CACL7K,KAAK2N,UAAU3N,KAAKsJ,c,IAK1BpI,EAAAC,UAAA4J,UAAA,WACE,GAAI/K,KAAKyN,aAAatK,OAAS,EAAG,CAChC,GAAInD,KAAKsJ,cAAc3I,MAAQ,EAAG,CAChCX,KAAKsJ,cAAc3I,IAAMX,KAAKyN,aAAatK,M,MACtC,GAAInD,KAAKsJ,cAAc3I,MAAQ,EAAG,CACvCX,KAAKsJ,cAAc3I,IAAM,C,KACpB,CACLX,KAAKsJ,cAAc3I,K,CAIrB,IAAM+M,EAAa1N,KAAKgC,SAAShC,KAAKsJ,cAAc3I,IAAM,GAC1D,GAAI+M,GAAcA,EAAW1K,OAAQ,CACnChD,KAAK+K,W,MACA,GAAI2C,EAAY,CACrB1N,KAAK2N,UAAU3N,KAAKsJ,c,KACf,CACLtJ,KAAK+J,gB,IAKX7I,EAAAC,UAAAoI,aAAA,WACE,GAAIvJ,KAAKsJ,cAAc1I,QAAU,EAAG,CAClCZ,KAAKsJ,cAAc1I,SACnBZ,KAAK2N,UAAU3N,KAAKsJ,c,GAIxBpI,EAAAC,UAAAqI,cAAA,WACE,IAAMoE,EAAU/M,EAAWb,KAAK6N,YAAY1K,OAE5C,GAAInD,KAAKsJ,cAAc1I,OAASgN,EAAS,CACvC5N,KAAKsJ,cAAc1I,SACnBZ,KAAK2N,UAAU3N,KAAKsJ,c,GAIxBpI,EAAAC,UAAA8K,YAAA,WACE,IAAM6B,EAAU9N,KAAK2B,OAAO3B,KAAK2B,OAAOwB,OAAS,GACjD,GAAInD,KAAKoM,YAAcpM,KAAK2B,OAAOe,SAAS1C,KAAKoM,WAAWoB,wBAA0C,CACpGxN,KAAKoM,WAAapM,KAAKoM,WAAWoB,sB,KAC7B,CACLxN,KAAKoM,WAAa0B,C,CAGpB,GAAI9N,KAAKoM,WAAWtK,UAAUC,SAAS,WAAa/B,KAAKmG,gBAAgBhD,OAAS,EAAG,CACnFnD,KAAKiM,a,KACA,CACLjM,KAAKoG,SAASpG,KAAKoM,W,GAIvBlL,EAAAC,UAAA+K,aAAA,WACE,IAAM6B,EAAW/N,KAAK2B,OAAO,GAC7B,GAAI3B,KAAKoM,YAAcpM,KAAK2B,OAAOe,SAAS1C,KAAKoM,WAAWkB,oBAAsC,CAChGtN,KAAKoM,WAAapM,KAAKoM,WAAWkB,kB,KAC7B,CACLtN,KAAKoM,WAAa2B,C,CAGpB,GAAI/N,KAAKoM,WAAWtK,UAAUC,SAAS,UAAW,CAChD/B,KAAKkM,c,KACA,CACLlM,KAAKoG,SAASpG,KAAKoM,W,GAIvBlL,EAAAC,UAAAwJ,UAAA,SAAUe,GACR,IAAIsC,EAAiBhO,KAAK6G,YAC1B,IAAMoH,EAAsBjO,KAAK4G,wBAAwB5G,KAAK6G,YAAa6E,GAC3E,IAAKuC,EAAqB,CACxBD,EAAiBA,EAAelH,OAAO4E,E,CAEzC,OAAOsC,C,EAGT9M,EAAAC,UAAA+M,aAAA,SAAaxC,GACX1L,KAAK6G,YAAc7G,KAAKmO,sBAAsBnO,KAAK6G,YAAa6E,E,EAGlExK,EAAAC,UAAAuJ,OAAA,SAAO7I,GACL,IAAIuM,EAAcpO,KAAK6C,SACvB,IAAMwL,EAAkBrO,KAAK4G,wBAAwB5G,KAAK6C,SAAUhB,GACpE,IAAMyM,EAAoBtO,KAAK6G,YAAYjF,QAAO,SAAC2M,GAAM,OAAAA,EAAEhM,gBAAkBV,EAAIU,aAAxB,IAAuC,GAEhG,IAAK8L,EAAiB,CACpB,IAAIG,EAAiB3M,EACrB,GAAI7B,KAAK4C,eAAiB,QAAS,CACjC,IAAMgJ,EAAgB5L,KAAKE,GAAGwH,cAAc,IAAAZ,OAAIjF,IAChD2M,EAAiB5C,EAAc1J,I,CAEjClC,KAAKkI,SAASlI,KAAKuF,wBAAwBiJ,IAC3CxO,KAAK6C,SAAWuL,EAAYtH,OAAOwH,GAAqBzM,GAExD,GAAI7B,KAAK+L,gBAAiB,CACxB/L,KAAK0B,UAAUuE,O,IAKrB/E,EAAAC,UAAA2K,UAAA,SAAUjK,GACR,IAAI2M,EAAiB3M,EACrB,GAAI7B,KAAK4C,eAAiB,QAAS,CACjC,IAAMgJ,EAAgB5L,KAAKE,GAAGwH,cAAc,IAAAZ,OAAIjF,IAChD2M,EAAiB5C,EAAc1J,I,CAEjC,IAAMuM,EAAoBrL,EAAKC,cAC7B,CAAElD,GAAI,sBAAuBmD,eAAgB,iBAC7C,CAAEzB,IAAK2M,IAETxO,KAAKkI,SAASuG,GACdzO,KAAK6C,SAAW7C,KAAKmO,sBAAsBnO,KAAK6C,SAAUhB,GAE1D,GAAI7B,KAAK4C,eAAiB,WAAY,CAEpC,IAAM8L,EAAiB7N,EAAWb,KAAKe,SACvC,GAAIf,KAAK4G,wBAAwB5G,KAAK6G,YAAahF,KAAS7B,KAAK4G,wBAAwB8H,EAAgB7M,GAAM,CAC7G7B,KAAKkO,aAAarM,E,IAKxBX,EAAAC,UAAAkM,cAAA,SAAc7B,GACZxL,KAAKiK,gBAAkBuB,EACvBxL,KAAKwC,QAAQmM,aAAa,wBAAyB3O,KAAKiK,gBAAgB9J,IACxEqL,EAAKoD,eAAe,CAAEC,MAAO,W,EAG/B3N,EAAAC,UAAAiF,SAAA,SAAS0I,GACP,GAAIA,EAAQhN,UAAUC,SAAS,UAAW,CACxC/B,KAAKoM,WAAa,KAClBpM,KAAK0B,UAAUiN,aAAa,wBAAyB,G,KAChD,CACL3O,KAAKoM,WAAa0C,EAClB9O,KAAK0B,UAAUiN,aAAa,wBAAyB3O,KAAKoM,WAAWjM,G,GAIzEe,EAAAC,UAAAwM,UAAA,SAAUoB,GACR/O,KAAK+J,eAAe,OAEpB,GAAIgF,EAASpO,IAAK,CAChB,IAAM+M,EAAa1N,KAAKsK,YAAYyE,EAASpO,KAC7C,IAAMqO,EAAWtB,EAAWjM,iBAAiB,MAC7C,IAAMwN,EAAcD,EAASD,EAASnO,OAAS,GAC/C,IAAM+L,EAAiBsC,EAAYvH,cAAc,yBACjD,IAAMkF,EAAcD,EAAeE,YAAcF,EAAeG,YAEhEY,EAAW5L,UAAUoN,IAAI,WACzBD,EAAYnN,UAAUoN,IAAI,WAC1BD,EAAYL,eAAe,CAAEC,MAAO,YACpC7O,KAAKwC,QAAQmM,aAAa,wBAAyBM,EAAY9O,IAE/DH,KAAK0I,iBACL,GAAIkE,EAAa,CAEfG,EAAY,SAAUkC,EAAaA,EAAYjC,WAC/ChN,KAAKM,eAAiB,I,IAK5BY,EAAAC,UAAAgO,cAAA,WACEnP,KAAK0B,UAAUiN,aAAa,wBAAyB,IACrD3O,KAAKoM,WAAa,I,EAGpBlL,EAAAC,UAAA4I,eAAA,SAAeqF,GAAA,GAAAA,SAAA,GAAAA,EAAA,IAA6B,CAC1CpP,KAAKwC,QAAQmM,aAAa,wBAAyB,IACnD,GAAIS,EAAe,CACjBpP,KAAKsJ,cAAgB,CAAE3I,IAAK,EAAGC,OAAQ,E,CAGzCZ,KAAKsK,YAAYxH,SAAQ,SAACnC,GACxBA,EAAImB,UAAU2E,OAAO,WACrB9F,EAAIc,iBAAiB,MAAMqB,SAAQ,SAAC4J,GAClCA,EAAK5K,UAAU2E,OAAO,U,QAK5BvF,EAAAC,UAAAwI,aAAA,WAEE3J,KAAKK,OAASgP,EAAarP,KAAKE,GAAIF,KAAKwB,WAAYxB,KAAKE,GAAGoP,cAAe,GAC5EtP,KAAKwI,WAAa,I,EAGpBtH,EAAAC,UAAAsH,cAAA,WACEzI,KAAK4J,qBACL5J,KAAKwI,WAAa,K,EAGpBtH,EAAAC,UAAAyI,mBAAA,WACE5J,KAAKiK,gBAAkB,KACvBjK,KAAKwC,QAAQmM,aAAa,wBAAyB,IAEnD3O,KAAKmN,YAAYrK,SAAQ,SAAC5C,GACxBA,EAAG4B,UAAU2E,OAAO,U,KAIxBvF,EAAAC,UAAAyJ,WAAA,WACE5K,KAAK8J,UAAY,EACjB9J,KAAKwC,QAAQC,MAAQ,E,EAGvBvB,EAAAC,UAAA+G,SAAA,SAASqH,GAEP,GAAIvP,KAAKwP,aAAaC,cAAgBF,EAAS,CAC7CA,GAAW,G,CAEbvP,KAAK0P,kBAAoBH,C,EAG3BrO,EAAAC,UAAA6I,wBAAA,eAAAtJ,EAAAV,KAEEiL,OAAOC,uBAAsB,WAC3B,IAAIyE,EAAa,EAEjB,GAAIjP,EAAKkC,eAAiB,WAAY,CACpC+M,EAAajP,EAAKkP,UAAUzM,M,MACvB,GAAIzC,EAAKkC,eAAiB,QAAS,CACxC+M,EAAajP,EAAK+M,aAAatK,M,CAGjC,IAAM0M,EAAyBzM,EAAKC,cAClC,CACElD,GAAI,2BACJmD,eAAgB,uEAElB,CAAEwM,IAAKH,IAGTjP,EAAKwH,SAAS2H,E,KAIlB3O,EAAAC,UAAA6H,8BAAA,SAA8Bc,EAAmBiG,GAC/C,IAAIR,EAAUS,EAAeC,qBAAqBnG,EAAWiG,GAC7D,GAAIjG,GAAaiG,EAAW,CAC1BR,GAAW,IAAAzI,OAAIkJ,EAAeE,sB,CAEhC,OAAOX,C,EAGTrO,EAAAC,UAAAwF,cAAA,WACE,IAAMmH,EAAU9N,KAAK2B,OAAO3B,KAAK2B,OAAOwB,OAAS,GAEjDnD,KAAKwC,QAAQ2N,MAAMpB,SAAW,SAC9B/O,KAAKwC,QAAQ2N,MAAM7K,MAAQ,OAE3B,GAAIwI,EAAS,CACX,IAAMsC,EAAiBpQ,KAAK0B,UAAU2O,wBAAwBC,MAAQxC,EAAQuC,wBAAwBC,MACtG,GAAIF,GAAkBpQ,KAAKuQ,kBAAmB,CAG5CvQ,KAAKwC,QAAQ2N,MAAMpB,SAAW,WAC9B/O,KAAKwC,QAAQ2N,MAAMK,IAAM1C,EAAQ2C,UAAUC,WAAa,KACxD1Q,KAAKwC,QAAQ2N,MAAM7K,OAChBtF,KAAK0B,UAAU2O,wBAAwBC,MAAQxC,EAAQuC,wBAAwBC,MAAQ,GAAGI,WAAa,I,IAOhHxP,EAAAC,UAAAwG,UAAA,SAAUhF,GACR,OAAOA,EAAKL,KAAK,I,EAGnBpB,EAAAC,UAAAyF,wBAAA,SAAwBjE,EAAgBmM,GACtC,IAAM6B,EAAgBhO,EAAK8E,KAAI,SAACmJ,GAAQ,OAAAA,EAAIrO,aAAJ,IACxC,OAAOoO,EAAcjO,SAASoM,EAAQvM,c,EAGxCrB,EAAAC,UAAAgN,sBAAA,SAAsBxL,EAAgBmM,GACpC,OAAOnM,EAAKf,QAAO,SAAC2M,GAAM,OAAAA,EAAEhM,gBAAkBuM,EAAQvM,aAA5B,G,EAG5BrB,EAAAC,UAAA0P,oBAAA,SAAoBlO,GAGlB,OAAOA,EAAKmO,MAAK,SAACC,EAAGC,GACnBD,EAAIA,EAAExO,cACNyO,EAAIA,EAAEzO,cACN,OAAOwO,EAAIC,EAAI,EAAID,EAAIC,GAAK,EAAI,C,KAMpC9P,EAAAC,UAAA8P,WAAA,eAAAvQ,EAAAV,KACE,IAAIkR,EAA8B,GAClC,IAAIC,EAAgC,GAEpCnR,KAAK6C,SAASC,SAAQ,SAACjB,EAAKuP,GAC1B,IAAMjR,EAAK,MAAA2G,OAAMsK,EAAM,GACvB,IAAIC,EAAU,GACd,IAAIxF,EAAW,MAEf,GAAInL,EAAKkC,eAAiB,WAAY,CACpCyO,EAAUxP,C,MACL,GAAInB,EAAKkC,eAAiB,QAAS,CAGxC,IAAMgJ,EAAgBlL,EAAKR,GAAGwH,cAAc,IAAAZ,OAAIjF,IAChDwP,EAAUzF,EAAgBA,EAAc1J,KAAQ,GAChD2J,EAAWD,EAAgBA,EAAc5I,OAAS,K,CAIpD,IAAMsO,EAAazF,EAAWqF,EAAaC,EAC3CG,EAAWrO,KACTsO,EAAA,MACEpR,GAAIA,EACJqR,MAAO,iBAAA1K,OAAiBpG,EAAK0L,YAAc1L,EAAK0L,WAAWjM,KAAOA,EAAK,UAAY,GAAE,KAAA2G,OACnF+E,EAAW,SAAW,IACtB,WACQhK,EACV4P,KAAK,UAEJJ,EACAxF,EACC0F,EAAA,OAAKC,MAAM,cAEXD,EAAA,UAAQC,MAAM,kBAAkBE,UAAW,EAAGC,QAAS,WAAM,OAAAjR,EAAKwM,wBAAwBrL,EAA7B,K,IAMrE,OAAA+P,4BAAA,GAAWV,EAAU,MAAKC,EAAY,K,EAGxCjQ,EAAAC,UAAA0Q,eAAA,eAAAnR,EAAAV,KACE,OACEuR,EAAA,OACEC,MAAO,oBAAA1K,OAAoB9G,KAAKwI,WAAa,OAAS,GAAE,KAAA1B,OAAI9G,KAAKK,OAAS,UAAY,IACtFyR,IAAK,SAAC5R,GAAE,OAAMQ,EAAKc,WAAatB,CAAxB,GAERqR,EAAA,OAAKpR,GAAG,YAAYqR,MAAM,aACvBxR,KAAK+R,kBAERR,EAAA,MACEC,MAAM,WACNrR,GAAG,WACHsR,KAAK,UAAS,uBACO,OAAM,gBACZzR,KAAKwI,WAAa,OAAS,MAAK,aACnCxI,KAAK6F,MACjBmM,UAAW,GAEVhS,KAAKwC,SAAWxC,KAAKiS,qBACrBjS,KAAKkS,gBAAgBlS,KAAK6G,c,EAMnC3F,EAAAC,UAAA+Q,gBAAA,SAAgBrL,GAAhB,IAAAnG,EAAAV,KACE6G,EAAc7G,KAAK6Q,oBAAoBhK,GAGvC,GAAI7G,KAAKwC,SAAWxC,KAAKwC,QAAQC,MAAO,CACtCoE,EAAc7G,KAAK6G,YAAYjF,QAAO,SAAC8J,GACrC,OAAAA,EAAOnJ,cAAcG,SAAShC,EAAK8B,QAAQC,MAAMF,cAAjD,G,CAIJ,OAAOsE,EAAYY,KAAI,SAACiE,EAAQ0F,GAC9B,IAAMjR,EAAK,SAAA2G,OAASsK,EAAM,GAC1B,IAAMe,EAAYzR,EAAKuJ,iBAAmBvJ,EAAKuJ,gBAAgB9J,KAAOA,EACtE,IAAMiS,EAAa1R,EAAKkG,wBAAwBlG,EAAKmC,SAAU6I,GAE/D,OACE6F,EAAA,MACEC,MAAO,UAAA1K,OAAUqL,EAAY,UAAY,IACzCV,KAAK,SACLtR,GAAIA,EAAE,cACOuL,EAAM,gBACJ0G,EAAa,OAAS,QAAO,gBAC7BA,EAAa,OAAS,QACrCC,UAAW,SAAChK,GAAO,OAAA3H,EAAK0K,sBAAsB/C,EAA3B,EACnBiK,OAAQ,SAACjK,GAAO,OAAA3H,EAAK2L,WAAWhE,EAAI3H,EAAKR,GAAzB,EAChByR,QAAS,SAACtJ,GAAO,OAAA3H,EAAKwJ,oBAAoB7B,EAAGE,OAA5B,GAEhBmD,E,KAMTxK,EAAAC,UAAA8Q,mBAAA,eAAAvR,EAAAV,KACE,IAAMwK,EAA6BxK,KAAKwC,QAAQC,MAAMgI,MAAM,MAC5D,IAAMwD,EAAsBjO,KAAK4G,wBAAwB5G,KAAK6G,YAAa7G,KAAKwC,QAAQC,MAAM2H,QAC9F,GAAIpK,KAAK4F,QAAU4E,IAA+ByD,EAAqB,CACrE,IAAM9N,EAAK,cACX,IAAMgS,EAAYnS,KAAKiK,iBAAmBjK,KAAKiK,gBAAgB9J,KAAOA,EACtE,OACEoR,EAAA,MACEE,KAAK,SACLD,MAAO,eAAA1K,OAAeqL,EAAY,UAAY,IAC9ChS,GAAIA,EAAE,cACOH,KAAKwC,QAAQC,MAC1B4P,UAAW,SAAChK,GAAO,OAAA3H,EAAK0K,sBAAsB/C,EAA3B,EACnBiK,OAAQ,SAACjK,GAAO,OAAA3H,EAAK2L,WAAWhE,EAAI3H,EAAKR,GAAzB,EAChByR,QAAS,SAACtJ,GAAO,OAAA3H,EAAKwJ,oBAAoB7B,EAAGE,OAA5B,EACjBmJ,SAAUS,EAAY,GAAK,GAE1B,QAAArL,OAAQ9G,KAAKwC,QAAQC,MAAM2H,OAAM,K,MAGjC,MAAO,E,EAGhBlJ,EAAAC,UAAA4Q,eAAA,WACE,IAAIQ,EAAW,GAEf,GAAIvS,KAAK6G,YAAY1D,OAAS,EAAG,CAC/BoP,GAAYvS,KAAKwS,kBAAkB/O,iB,CAErC,GAAIzD,KAAK4F,OAAQ,CACf2M,GAAY,IAAMvS,KAAKwS,kBAAkBhP,c,CAG3C,OAAO+O,C,EAGTrR,EAAAC,UAAAsR,iBAAA,WACE,GAAIzS,KAAKkD,QAAS,CAChB,OACEqO,EAAA,OAAKC,MAAM,aACTD,EAAA,OAAKpR,GAAG,YACL,GAAA2G,OAAG9G,KAAKwS,kBAAkBzO,UAAS,MAAA+C,OAAK9G,KAAK6C,SAASM,OAAM,KAAA2D,OAAI9G,KAAKkD,SACrElD,KAAK+L,iBAAmB,MAAAjF,OAAM9G,KAAKwS,kBAAkB1O,iB,GAOhE5C,EAAAC,UAAAuR,YAAA,eAAAhS,EAAAV,KACE,OACEuR,EAAA,OAAKC,MAAM,gBAAgBmB,SAAU,WAAM,OAAAjS,EAAKgI,gBAAL,GACzC6I,EAAA,SACEpR,GAAG,QACHsR,KAAK,OACLD,MAAO,GAAA1K,OAAG9G,KAAK4S,UAAY,eAAiB,IAAI,aACpC5S,KAAK6F,MAAK,uBACD,QAEpB7F,KAAK6S,qBACL7S,KAAKyN,aAAatK,OAASnD,KAAK8S,kBAAoBvB,EAAA,OAAKC,MAAM,cAAcxR,KAAK+S,mB,EAM3F7R,EAAAC,UAAA0R,mBAAA,eAAAnS,EAAAV,KACE,OACEuR,EAAA,MAAIC,MAAM,UAAUC,KAAK,OACtB5Q,EAAWb,KAAK6N,YAAYpG,KAAI,SAACuL,EAAQ5B,GACxC,IAAI6B,EAAe,OACnB,GAAIvS,EAAKwS,SAAWrS,EAAWH,EAAKwS,SAAS9B,GAAM,CACjD6B,EAAepS,EAAWH,EAAKwS,SAAS9B,E,CAE1C,OACEG,EAAA,MACEC,MAAO,eAAA1K,OAAemM,GACtBxB,KAAK,eAELnM,MAAO5E,EAAKkS,UAAY/R,EAAWH,EAAKkS,WAAWxB,GAAO,IAEzD4B,E,MAQb9R,EAAAC,UAAA2R,gBAAA,eAAApS,EAAAV,KACE,OAAOA,KAAKyN,aAAahG,KAAI,SAAC9G,GAC5B,IAAMyR,EAAsB1R,EAAKkG,wBAAwBlG,EAAKmC,SAAUlC,EAAIR,IAE5E,OACEoR,EAAA,MACEpR,GAAIQ,EAAIR,GACRqR,MAAO,GAAA1K,OAAGnG,EAAIqC,OAAS,SAAW,GAAE,KAAA8D,OAAIsL,EAAa,WAAa,IAClEX,KAAK,MACLE,QAAS,WAAM,OAAAjR,EAAK2J,oBAAoB1J,EAAIR,GAA7B,GAEdO,EAAKyS,iBAAiBxS,G,KAM/BO,EAAAC,UAAAgS,iBAAA,SAAiBxS,GAAjB,IAAAD,EAAAV,KACE,IAAMiC,EAAY,CAACtB,EAAIuB,KAAMvB,EAAIwB,KAAMxB,EAAIyB,KAAMzB,EAAI0B,MAAMT,QAAO,SAAC4F,GAAQ,QAAEA,CAAF,IAC3E,IAAM4K,EAAsBpS,KAAK4G,wBAAwB5G,KAAK6C,SAAUlC,EAAIR,IAE5E,OAAO8B,EAAUwF,KAAI,SAACD,EAAK4J,GACzB,IAAMgC,EAAU,GAAAtM,OAAGnG,EAAIR,GAAE,QAAA2G,OAAOsK,EAAM,GACtC,IAAI6B,EAAe,OACnB,GAAIvS,EAAKwS,SAAWrS,EAAWH,EAAKwS,SAAS9B,GAAM,CACjD6B,EAAepS,EAAWH,EAAKwS,SAAS9B,E,CAG1C,OACEG,EAAA,MACEpR,GAAIiT,EACJ3B,KAAK,WAAU,mBACG,GAAA3K,OAAGsM,EAAO,gBAAc,gBAC3BhB,EAAW1B,WAC1B2C,aAAc,SAAChL,GAAO,OAAA3H,EAAK+L,qBAAqBpE,EAA1B,EACtBiL,aAAc,WAAM,OAAA5S,EAAKgI,gBAAL,GAEpB6I,EAAA,OAAKC,MAAO,wBAAA1K,OAAwBmM,IAAiBzL,GACrD+J,EAAA,OAAKC,MAAM,cAAcrR,GAAI,GAAA2G,OAAGsM,EAAO,iBACpCzS,EAAIqC,OAAS,SAAW,I,KAOnC9B,EAAAC,UAAAoS,OAAA,eAAA7S,EAAAV,KACE,OACEuR,EAACiC,EAAI,CAACrT,GAAIH,KAAKC,KACbsR,EAAA,OAAKC,MAAO,iBAAA1K,OAAiB9G,KAAKyT,cAAa,KAAA3M,OAAI9G,KAAKiI,aAAe,UAAY,KACjFsJ,EAAA,OAAKC,MAAM,iBACTD,EAAA,SAAOC,MAAM,QAAQkC,QAAS,QAAA5M,OAAQ9G,KAAKC,MACxCD,KAAK6F,MACL7F,KAAK2T,eACJpC,EAAA,QAAMC,MAAM,WAAU,cAAa,QAAM,OAM/CD,EAAA,OACEC,MAAO,iBAAA1K,OAAiB9G,KAAKuL,eAAiB,UAAY,GAAE,KAAAzE,OAAI9G,KAAKiI,aAAe,UAAY,IAChG6J,IAAK,SAAC5R,GAAE,OAAMQ,EAAK8L,eAAiBtM,CAA5B,GAERqR,EAAA,OAAKC,MAAM,aACTD,EAAA,OAAKC,MAAM,0BACRxR,KAAK6C,SAASM,OAAS,GACtBoO,EAAA,MACEO,IAAK,SAAC5R,GAAE,OAAMQ,EAAKgB,UAAYxB,CAAvB,EACRsR,MAAM,WACNC,KAAK,UAAS,wBACQ,GAAE,mBACP,aAAY,aACjB,GAAA3K,OAAG9G,KAAK6F,MAAK,KAAAiB,OACvB9G,KAAK6C,SAASM,OAAS,EAAInD,KAAKwS,kBAAkB7O,oBAAsB,IAE1EqO,SAAUhS,KAAKmL,kBAAkBhI,OAAS,EAAI,GAAK,EAAC,mBAClC,gBAClByQ,QAAS,WAAM,OAAAlT,EAAKuM,oBAAL,EACfqF,OAAQ,SAACjK,GACP3H,EAAKyO,gBACLzO,EAAK2L,WAAWhE,EAAI3H,EAAKR,G,EAE3BmS,UAAW,SAAChK,GAAO,OAAA3H,EAAKsL,qBAAqB3D,EAA1B,GAElBrI,KAAKiR,cAGVM,EAAA,SACEpR,GAAI,QAAA2G,OAAQ9G,KAAKC,KACjBuR,MAAOxR,KAAK+L,gBAAkB,SAAW,GACzC0F,KAAK,WACLK,IAAK,SAAC5R,GAAE,OAAMQ,EAAK8B,QAAUtC,CAArB,EACR2T,aAAa,MAAK,gBACH7T,KAAK2T,cAAgB,OAAS,KAAI,gBAClC3T,KAAK4C,aAAY,mBACd,YAAAkE,OAAY9G,KAAKiI,aAAe,UAAY,IAAI,aACtD,GAAAnB,OAAG9G,KAAK6F,MAAK,KAAAiB,OACvB9G,KAAK4C,eAAiB,WAAaoN,EAAe8D,kBAAkB9T,KAAK+I,gBAAkB,IAC3F,gBACa/I,KAAK4C,eAAiB,WAAa5C,KAAKwI,WAAWkI,WAAa,KAC/ErL,YAAarF,KAAKqF,YAClB0O,UAAW/T,KAAK4C,eAAiB,WAAa5C,KAAK+I,eAAiBiL,UACpEC,QAAS,WAAM,OAAAvT,EAAKmJ,mBAAmBnJ,EAAK8B,QAAQC,MAArC,EACf6P,OAAQ,SAACjK,GACP3H,EAAK2L,WAAWhE,EAAI3H,EAAKR,G,EAE3B0T,QAAS,WAAM,OAAAlT,EAAKgJ,kBAAL,EACf2I,UAAW,SAAChK,GAAO,OAAA3H,EAAKkI,mBAAmBP,EAAxB,KAGtBrI,KAAK4C,eAAiB,YACrB2O,EAAA,OAAKC,MAAM,mBACRxR,KAAK8J,UAAS,IAAG9J,KAAK+I,iBAI5B/I,KAAKyS,mBACLzS,KAAK4C,eAAiB,YAAc5C,KAAK6R,kBAE3C7R,KAAKkU,MACJ3C,EAAA,OAAKpR,GAAG,OAAOqR,MAAM,aAClBxR,KAAKkU,MAGTlU,KAAKiI,cAAgBsJ,EAAA,OAAKpR,GAAG,SAASH,KAAKiI,cAC5CsJ,EAAA,OACEC,MAAM,UAAS,YACL,YACVM,IAAK,SAAC5R,GAAE,OAAMQ,EAAK8O,aAAetP,CAA1B,EAA+C,cAC3C,QAEXF,KAAK0P,mBAEP1P,KAAK4C,eAAiB,SAAW5C,KAAK0S,e,8YAtsC5B,I"}

package/dist/ripple/p-bf569af0.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as o,h as e,g as n}from"./p-1c23de4a.js";const i=":host,priv-navigator-item{list-style:none;border-bottom:1px solid #e0dde4;width:100%;display:block;cursor:pointer}:host .navoption,priv-navigator-item .navoption{color:#404248;padding:0.9375rem 1.25rem;background:#fff;font-size:0.875rem}:host .navoption.selected,:host .navoption:hover,priv-navigator-item .navoption.selected,priv-navigator-item .navoption:hover{background:#e5e5e5}:host .navoption.focused:not(.selected),priv-navigator-item .navoption.focused:not(.selected){background:#f4f4f4;opacity:1}";const s=class{constructor(e){t(this,e);this.keydownOnNavItem=o(this,"keydownOnNavItem",7);this.selected=false;this.focused=false;this.link=""}handleKeyDown(t){const o=t.key;const e=this.el;if(o!=="Tab"){t.preventDefault()}this.keydownOnNavItem.emit({navItem:e,key:o})}render(){const t=this.selected?"selected":"";const o=this.focused?"focused":"";return e("div",{class:`navoption ${t} ${o}`},e("slot",null))}get el(){return n(this)}};s.style=i;export{s as priv_navigator_item};
2	- //# sourceMappingURL=p-bf569af0.entry.js.map

package/dist/ripple/p-bf569af0.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["privNavigatorItemCss","PrivNavigatorItem","handleKeyDown","ev","key","el","this","preventDefault","keydownOnNavItem","emit","navItem","render","selectedClass","selected","focusedClass","focused","h","class"],"sources":["./src/components/wm-navigator/priv-navigator-item/priv-navigator-item.scss?tag=priv-navigator-item&encapsulation=shadow","./src/components/wm-navigator/priv-navigator-item/priv-navigator-item.tsx"],"sourcesContent":[":host,\npriv-navigator-item {\n list-style: none;\n border-bottom: 1px solid #e0dde4;\n width: 100%;\n display: block;\n cursor: pointer;\n\n .navoption {\n color: #404248;\n padding: 0.9375rem 1.25rem;\n background: #fff;\n font-size: rem-calc(14);\n\n &.selected,\n &:hover {\n background: #e5e5e5;\n }\n\n &.focused:not(.selected) {\n background: $background;\n opacity: 1;\n }\n }\n}\n","import { Component, Element, h, Prop, Event, EventEmitter, Listen } from \"@stencil/core\";\n\n@Component({\n tag: \"priv-navigator-item\",\n styleUrl: \"priv-navigator-item.scss\",\n shadow: true,\n})\nexport class PrivNavigatorItem {\n @Element() el!: any;\n @Prop({ mutable: true }) selected: boolean = false;\n @Prop({ mutable: true }) focused: boolean = false;\n @Prop({ mutable: true }) link: string = \"\";\n @Event() keydownOnNavItem!: EventEmitter<{\n navItem: HTMLPrivNavigatorItemElement;\n key: string;\n }>;\n\n @Listen(\"keydown\")\n handleKeyDown(ev: KeyboardEvent) {\n const key = ev.key;\n const el = this.el;\n if (key !== \"Tab\") {\n ev.preventDefault();\n }\n this.keydownOnNavItem.emit({ navItem: el, key: key });\n }\n\n render() {\n const selectedClass = this.selected ? \"selected\" : \"\";\n const focusedClass = this.focused ? \"focused\" : \"\";\n\n return (\n <div class={`navoption ${selectedClass} ${focusedClass}`}>\n <slot />\n </div>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAuB,4f,MCOhBC,EAAiB,M,0FAEiB,M,aACD,M,UACJ,E,CAOxCC,cAAcC,GACZ,MAAMC,EAAMD,EAAGC,IACf,MAAMC,EAAKC,KAAKD,GAChB,GAAID,IAAQ,MAAO,CACjBD,EAAGI,gB,CAELD,KAAKE,iBAAiBC,KAAK,CAAEC,QAASL,EAAID,IAAKA,G,CAGjDO,SACE,MAAMC,EAAgBN,KAAKO,SAAW,WAAa,GACnD,MAAMC,EAAeR,KAAKS,QAAU,UAAY,GAEhD,OACEC,EAAA,OAAKC,MAAO,aAAaL,KAAiBE,KACxCE,EAAA,a"}

package/dist/ripple/p-c094f6a8.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as i,c as t,h as e,H as r,g as a}from"./p-1c23de4a.js";import{i as s,g as n,e as p}from"./p-c6a0f7e5.js";import{g as o}from"./p-9b2dfb54.js";const l=':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 h=class{constructor(e){i(this,e);this.wmInputValueChanged=t(this,"wmInputValueChanged",7);this.uid="";this.previousBlurredValue="";this.numberErrorMessage=s.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:n();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(i){this.displayedErrorMessage=i}handleKeyDown(i){const t=i.ctrlKey\|\|i.metaKey\|\|i.altKey;const e=/^.$/.test(i.key)&&!t;const r=e&&this.characterLimit&&this.inputEl.value.length>=this.characterLimit;if(r){this.announce(this.generateCharacterLimitWarning(this.charCount,this.characterLimit))}}handleBlur(i){if(this.value!==this.previousBlurredValue){this.wmInputValueChanged.emit({value:this.value})}this.previousBlurredValue=this.value;const t=this.preventValidation&&p(i,this.preventValidation);if(!t){this.displayedErrorMessage=this.validate()}this.inputWrapperEl.classList.remove("focus")}handleInput(i){this.value=i.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(){const i=[this.validateNumber.bind(this),this.validateRequired.bind(this)];if(this.errorMessage){return this.errorMessage}else{return i.reduce(((i,t)=>i?i:t()),"")}}validateRequired(){const i=this.requiredFieldMessage\|\|o.requiredError;return this.requiredField&&this.value===""?i:""}validateNumber(){return this.type==="number"&&this.inputEl.validity.badInput?this.numberErrorMessage:""}announce(i){if(this.liveRegionEl.textContent===i){i+=" "}this.announcement=i}generateCharacterLimitWarning(i,t){let e=o.getCharactersEntered(i,t);if(i>=t){e+=` ${o.characterLimitReached}`}return e}renderErrorMessage(){return this.errorMessage\|\|this.displayedErrorMessage}render(){return e(r,{id:this.uid},e("div",{class:`wrapper label-${this.labelPosition} ${this.errorMessage\|\|this.displayedErrorMessage?"invalid":""}`,ref:i=>this.inputWrapperEl=i},e("div",{class:"label-wrapper"},this.labelPosition!=="none"&&e("label",{htmlFor:`inputfield-${this.uid}`,class:"label"},this.label,this.requiredField&&e("span",{class:"required","aria-hidden":"true"},"*"))),e("div",{class:"inner-wrapper"},e("div",{class:"inputfield-wrapper"},e("input",{ref:i=>this.inputEl=i,id:`inputfield-${this.uid}`,disabled:this.disabled,"aria-label":`${this.label}${this.characterLimit?" "+o.getCharacterLimit(this.characterLimit):""}`,"aria-describedby":`info-${this.uid} error-${this.uid}`,onInput:i=>this.handleInput(i),onKeyDown:i=>this.handleKeyDown(i),onBlur:i=>this.handleBlur(i),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"?e("div",{class:"character-count"},this.charCount,"/",this.characterLimit):""),this.info&&e("div",{id:`info-${this.uid}`,class:"info"},this.info),e("div",{id:`error-${this.uid}`,"aria-live":"assertive",class:"error-message","aria-atomic":"true"},this.renderErrorMessage()),e("div",{class:"sr-only","aria-live":"polite","aria-atomic":"true",ref:i=>this.liveRegionEl=i},this.announcement))))}static get delegatesFocus(){return true}get el(){return a(this)}static get watchers(){return{errorMessage:["handleErrorMessage"]}}};h.style=l;export{h as wm_input};
2	- //# sourceMappingURL=p-c094f6a8.entry.js.map

package/dist/ripple/p-c094f6a8.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["wmInputCss","Input","this","uid","previousBlurredValue","numberErrorMessage","intl","formatMessage","id","defaultMessage","charCount","value","length","componentWillLoad","el","generateId","label","console","error","componentDidLoad","inputEl","handleErrorMessage","newValue","displayedErrorMessage","handleKeyDown","ev","isModifierKey","ctrlKey","metaKey","altKey","isCharacter","test","key","hasReachedCharacterLimit","characterLimit","announce","generateCharacterLimitWarning","handleBlur","wmInputValueChanged","emit","shouldPreventValidation","preventValidation","isRelatedTarget","validate","inputWrapperEl","classList","remove","handleInput","target","handleFocus","add","validationRules","validateNumber","bind","validateRequired","errorMessage","reduce","prev","current","reqMsg","requiredFieldMessage","globalMessages","requiredError","requiredField","type","validity","badInput","message","liveRegionEl","textContent","announcement","charLimit","getCharactersEntered","characterLimitReached","renderErrorMessage","render","h","Host","class","labelPosition","ref","htmlFor","disabled","getCharacterLimit","onInput","onKeyDown","onBlur","onFocus","placeholder","autocomplete","maxLength","undefined","step","max","min","info"],"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"],"mappings":"sJAAA,MAAMA,EAAa,oiI,MCSNC,EAAK,M,kFA+BRC,KAAAC,IAAc,GACdD,KAAAE,qBAA+B,GAC/BF,KAAAG,mBAAqBC,EAAKC,cAAc,CAC9CC,GAAI,oBACJC,eAAgB,iC,wCA5B+B,M,WACO,G,cACX,M,qCAEf,G,mBACG,M,yIAKC,O,UACV,E,wDAQQ,G,2BAGS,E,CAPrCC,gBACF,OAAOR,KAAKS,MAAMC,M,CAepBC,oBACEX,KAAKC,IAAMD,KAAKY,GAAGN,GAAKN,KAAKY,GAAGN,GAAKO,IAErC,IAAKb,KAAKc,MAAO,CACfC,QAAQC,MAAM,uC,EAIlBC,mBACE,GAAIjB,KAAKS,MAAO,CACdT,KAAKkB,QAAQT,MAAQT,KAAKS,MAC1BT,KAAKE,qBAAuBF,KAAKkB,QAAQT,K,EAK7CU,mBAAmBC,GACjBpB,KAAKqB,sBAAwBD,C,CAG/BE,cAAcC,GAGZ,MAAMC,EAAgBD,EAAGE,SAAWF,EAAGG,SAAWH,EAAGI,OACrD,MAAMC,EAAc,MAAMC,KAAKN,EAAGO,OAASN,EAC3C,MAAMO,EACJH,GAAe5B,KAAKgC,gBAAkBhC,KAAKkB,QAAQT,MAAMC,QAAUV,KAAKgC,eAE1E,GAAID,EAA0B,CAC5B/B,KAAKiC,SAASjC,KAAKkC,8BAA8BlC,KAAKQ,UAAWR,KAAKgC,gB,EAI1EG,WAAWZ,GACT,GAAIvB,KAAKS,QAAUT,KAAKE,qBAAsB,CAC5CF,KAAKoC,oBAAoBC,KAAK,CAAE5B,MAAOT,KAAKS,O,CAE9CT,KAAKE,qBAAuBF,KAAKS,MAEjC,MAAM6B,EAA0BtC,KAAKuC,mBAAqBC,EAAgBjB,EAAIvB,KAAKuC,mBACnF,IAAKD,EAAyB,CAC5BtC,KAAKqB,sBAAwBrB,KAAKyC,U,CAEpCzC,KAAK0C,eAAeC,UAAUC,OAAO,Q,CAGvCC,YAAYtB,GACVvB,KAAKS,MAASc,EAAGuB,OAA4BrC,MAC7C,GAAIT,KAAKgC,gBAAkBhC,KAAKQ,WAAaR,KAAKgC,eAAiB,EAAG,CACpEhC,KAAKiC,SAASjC,KAAKkC,8BAA8BlC,KAAKQ,UAAWR,KAAKgC,gB,EAI1Ee,cACE/C,KAAK0C,eAAeC,UAAUK,IAAI,Q,CAGpCP,WAGE,MAAMQ,EAAkB,CAACjD,KAAKkD,eAAeC,KAAKnD,MAAOA,KAAKoD,iBAAiBD,KAAKnD,OAEpF,GAAIA,KAAKqD,aAAc,CACrB,OAAOrD,KAAKqD,Y,KACP,CAEL,OAAOJ,EAAgBK,QAAO,CAACC,EAAMC,IAAaD,EAAOA,EAAOC,KAAY,G,EAIhFJ,mBACE,MAAMK,EAASzD,KAAK0D,sBAAwBC,EAAeC,cAC3D,OAAO5D,KAAK6D,eAAiB7D,KAAKS,QAAU,GAAKgD,EAAS,E,CAG5DP,iBACE,OAAOlD,KAAK8D,OAAS,UAAY9D,KAAKkB,QAAQ6C,SAASC,SAAWhE,KAAKG,mBAAqB,E,CAG9F8B,SAASgC,GACP,GAAIjE,KAAKkE,aAAaC,cAAgBF,EAAS,CAC7CA,GAAW,G,CAEbjE,KAAKoE,aAAeH,C,CAGtB/B,8BAA8B1B,EAAmB6D,GAC/C,IAAIJ,EAAUN,EAAeW,qBAAqB9D,EAAW6D,GAC7D,GAAI7D,GAAa6D,EAAW,CAC1BJ,GAAW,IAAIN,EAAeY,uB,CAEhC,OAAON,C,CAGTO,qBACE,OAAOxE,KAAKqD,cAAgBrD,KAAKqB,qB,CAGnCoD,SACE,OACEC,EAACC,EAAI,CAACrE,GAAIN,KAAKC,KACbyE,EAAA,OACEE,MAAO,iBAAiB5E,KAAK6E,iBAC3B7E,KAAKqD,cAAgBrD,KAAKqB,sBAAwB,UAAY,KAEhEyD,IAAMlE,GAAQZ,KAAK0C,eAAiB9B,GAEpC8D,EAAA,OAAKE,MAAM,iBACR5E,KAAK6E,gBAAkB,QACtBH,EAAA,SAAOK,QAAS,cAAc/E,KAAKC,MAAO2E,MAAM,SAC7C5E,KAAKc,MACLd,KAAK6D,eACJa,EAAA,QAAME,MAAM,WAAU,cAAa,QAAM,OAOjDF,EAAA,OAAKE,MAAM,iBACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,SACEI,IAAMlE,GAAQZ,KAAKkB,QAAUN,EAC7BN,GAAI,cAAcN,KAAKC,MACvB+E,SAAUhF,KAAKgF,SAAQ,aACX,GAAGhF,KAAKc,QAClBd,KAAKgC,eAAiB,IAAM2B,EAAesB,kBAAkBjF,KAAKgC,gBAAkB,KACpF,mBACgB,QAAQhC,KAAKC,aAAaD,KAAKC,MACjDiF,QAAU3D,GAAOvB,KAAK6C,YAAYtB,GAClC4D,UAAY5D,GAAOvB,KAAKsB,cAAcC,GACtC6D,OAAS7D,GAAOvB,KAAKmC,WAAWZ,GAChC8D,QAASrF,KAAK+C,YAAYI,KAAKnD,MAC/BsF,YAAatF,KAAKsF,YAClBC,aAAa,MAAK,gBACHvF,KAAK6D,cAAgB,OAAS,KAC7C2B,UAAWxF,KAAKgC,gBAAkByD,UAClC3B,KAAM9D,KAAK8D,KACX4B,KAAM1F,KAAK0F,KACXC,IAAK3F,KAAK2F,IACVC,IAAK5F,KAAK4F,MAEX5F,KAAKgC,uBAAyBhC,KAAKgC,iBAAmB,SACrD0C,EAAA,OAAKE,MAAM,mBACR5E,KAAKQ,UAAS,IAAGR,KAAKgC,gBACnB,IAKThC,KAAK6F,MACJnB,EAAA,OAAKpE,GAAI,QAAQN,KAAKC,MAAO2E,MAAM,QAChC5E,KAAK6F,MAGVnB,EAAA,OAAKpE,GAAI,SAASN,KAAKC,MAAK,YAAY,YAAY2E,MAAM,gBAAe,cAAa,QACnF5E,KAAKwE,sBAERE,EAAA,OACEE,MAAM,UAAS,YACL,SAAQ,cACN,OACZE,IAAMlE,GAAQZ,KAAKkE,aAAetD,GAEjCZ,KAAKoE,gB"}