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

@watermarkinsights/ripple 3.25.0-2 → 3.25.0

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

Files changed (605) hide show

package/dist/cjs/wm-timepicker.cjs.entry.js.map CHANGED Viewed

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

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

@@ -3,139 +3,139 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1f84c034.js');
-const functions = require('./functions-53aff314.js');
+const functions = require('./functions-d2d99997.js');
 const wmToggletipCss = ":host,wm-toggletip{display:inline-block;position:relative;height:40px;width:40px}:host .button,wm-toggletip .button{display:-ms-flexbox;display:flex;background:none;border:none;padding:0;width:inherit;height:inherit;border-radius:50%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;cursor:pointer}:host .button:before,wm-toggletip .button:before{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:\"\\f2fc\";font-size:16px;color:#4a4a4a;background:radial-gradient(white 40%, transparent 0%)}:host .button:focus,wm-toggletip .button:focus{outline:none}:host .button:focus.user-is-tabbing,wm-toggletip .button:focus.user-is-tabbing{-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 .button:focus.user-is-tabbing::-moz-focus-inner,wm-toggletip .button:focus.user-is-tabbing::-moz-focus-inner{border:0}:host .tooltip,wm-toggletip .tooltip{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);pointer-events:none;font-family:inherit;font-size:0.875rem;text-transform:none;font-weight:normal;background:black;color:#fff;padding:0.375rem;line-height:normal;z-index:30;white-space:nowrap}:host .tooltip.hover,wm-toggletip .tooltip.hover{clip:auto;width:auto;height:auto;opacity:1;-webkit-transition:opacity 500ms 500ms;transition:opacity 500ms 500ms;padding:0.375rem;white-space:nowrap}:host .toggletip,wm-toggletip .toggletip{position:absolute;max-width:13.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding:0.5rem 0.75rem;border-radius:0.1875rem;background:#4a4a4a;color:white;font-size:14px;z-index:30}:host .toggletip.top:before,wm-toggletip .toggletip.top:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.bottom:before,wm-toggletip .toggletip.bottom:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%}:host .toggletip.right:before,wm-toggletip .toggletip.right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-right-color:#4a4a4a;border-right-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-left-width:0px;top:calc(50% - 6px);left:-0.1875rem}:host .toggletip.left:before,wm-toggletip .toggletip.left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-left-color:#4a4a4a;border-left-width:0.25rem;border-top-width:0.375rem;border-bottom-width:0.375rem;border-right-width:0px;top:calc(50% - 6px);right:-0.1875rem}:host .toggletip.bottom-right:before,wm-toggletip .toggletip.bottom-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.bottom-left:before,wm-toggletip .toggletip.bottom-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;bottom:100%;border-bottom-color:#4a4a4a;border-bottom-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.top-right:before,wm-toggletip .toggletip.top-right:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;margin-left:unset;left:0.875rem}:host .toggletip.top-left:before,wm-toggletip .toggletip.top-left:before{content:\"\";position:absolute;border:solid transparent;height:0;width:0;pointer-events:none;top:100%;border-top-color:#4a4a4a;border-top-width:0.25rem;border-left-width:0.375rem;border-right-width:0.375rem;margin-left:-0.375rem;left:50%;left:unset;margin-left:unset;right:0.875rem}:host .toggletip.hidden,wm-toggletip .toggletip.hidden{-webkit-transform:scale(0, 0) !important;transform:scale(0, 0) !important;visibility:hidden}:host .toggletip.top,:host .tooltip.top,wm-toggletip .toggletip.top,wm-toggletip .tooltip.top{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);bottom:40px;left:20px}:host .toggletip.bottom,:host .tooltip.bottom,wm-toggletip .toggletip.bottom,wm-toggletip .tooltip.bottom{-webkit-transform:translate(-50%, 0%);transform:translate(-50%, 0%);top:40px;left:20px}:host .toggletip.right,:host .tooltip.right,wm-toggletip .toggletip.right,wm-toggletip .tooltip.right{-webkit-transform:translate(100%, calc(-50% - 20px));transform:translate(100%, calc(-50% - 20px));right:0px}:host .toggletip.left,:host .tooltip.left,wm-toggletip .toggletip.left,wm-toggletip .tooltip.left{-webkit-transform:translate(-100%, calc(-50% - 20px));transform:translate(-100%, calc(-50% - 20px));left:0px}:host .toggletip.bottom-right,:host .tooltip.bottom-right,wm-toggletip .toggletip.bottom-right,wm-toggletip .tooltip.bottom-right{top:40px;left:0px}:host .toggletip.bottom-left,:host .tooltip.bottom-left,wm-toggletip .toggletip.bottom-left,wm-toggletip .tooltip.bottom-left{top:40px;right:0px}:host .toggletip.top-right,:host .tooltip.top-right,wm-toggletip .toggletip.top-right,wm-toggletip .tooltip.top-right{bottom:40px;left:0px}:host .toggletip.top-left,:host .tooltip.top-left,wm-toggletip .toggletip.top-left,wm-toggletip .tooltip.top-left{bottom:40px;right:0px}:host .sr-only,wm-toggletip .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 Toggletip = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.tooltipMessage = functions.intl.formatMessage({
-      id: "toggletip.moreInformation",
-      defaultMessage: "More information",
-    });
-    this.label = undefined;
-    this.tooltip = undefined;
-    this.tooltipText = undefined;
-    this.tooltipPosition = "bottom-right";
-    this.isOpen = false;
-    this.isTabbing = false;
-  }
-  get tempTooltip() {
-    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out
-    return this.tooltip || this.tooltipText;
-  }
-  componentWillLoad() {
-    const validTooltipPlacement = [
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "top-right",
-      "top-left",
-      "bottom-right",
-      "bottom-left",
-    ];
-    if (!this.label) {
-      console.error("wm-toggletip must have a label property");
-    }
-    if (!this.tempTooltip) {
-      console.error("wm-toggletip must have a tooltip property");
-    }
-    if (!validTooltipPlacement.includes(this.tooltipPosition)) {
-      console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPlacement}`);
-    }
-    if (this.tooltipText) {
-      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
-    }
-  }
-  handleKeydown(ev) {
-    switch (ev.key) {
-      case "Escape":
-        ev.preventDefault();
-        if (this.isOpen) {
-          ev.stopPropagation(); // prevent closing modal if within one
-          this.close();
-        }
-        break;
-      case "Tab":
-        if (this.isOpen) {
-          this.close();
-        }
-    }
-  }
-  toggleTabbingOn() {
-    this.isTabbing = true;
-  }
-  toggleTabbingOff() {
-    this.isTabbing = false;
-  }
-  handleClick(ev) {
-    if (this.isOpen) {
-      if (ev.target === this.el || this.el.contains(ev.target)) {
-        // Re-announce if clicking any part of the component while open
-        this.announceToggletip();
-      }
-      else {
-        this.close();
-      }
-    }
-  }
-  open() {
-    this.isOpen = true;
-    this.announceToggletip();
-  }
-  close() {
-    this.isOpen = false;
-    this.hideTooltip();
-  }
-  handleBlur() {
-    this.hideTooltip();
-    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
-    this.liveRegionEl.innerHTML = "";
-  }
-  showTooltip() {
-    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
-    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
-    this.setToggletipPosition();
-    this.tooltipEl.classList.add("hover");
-  }
-  hideTooltip() {
-    this.tooltipEl.classList.remove("hover");
-  }
-  announceToggletip() {
-    this.liveRegionEl.innerHTML = "";
-    setTimeout(() => {
-      this.liveRegionEl.innerHTML = this.tempTooltip;
-    }, 10);
-  }
-  setToggletipPosition() {
-    // Vertical
-    if (this.tooltipPosition.includes("bottom") && functions.shouldOpenUp(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
-    }
-    else if (this.tooltipPosition.includes("top") && functions.shouldOpenDown(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
-    }
-    // Horizontal
-    if (this.tooltipPosition.includes("left") && functions.shouldShiftRight(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("left", "right");
-    }
-    else if (this.tooltipPosition.includes("right") && functions.shouldShiftLeft(this.el, this.toggletipEl)) {
-      this.tooltipPosition = this.tooltipPosition.replace("right", "left");
-    }
-  }
-  render() {
-    return (index.h(index.Host, null, index.h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => {
-        this.setToggletipPosition();
-        this.open();
-      },
-      // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-      onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.handleBlur() }), index.h("div", { ref: (el) => (this.tooltipEl = el), class: `tooltip ${this.tooltipPosition} ${this.isOpen ? "hidden" : ""}`, "aria-hidden": "true" }, this.tooltipMessage), index.h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tempTooltip), index.h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
-  }
-  static get delegatesFocus() { return true; }
-  get el() { return index.getElement(this); }
-};
+const Toggletip = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tooltipMessage = functions.intl.formatMessage({
+      id: "toggletip.moreInformation",
+      defaultMessage: "More information",
+    });
+    this.label = undefined;
+    this.tooltip = undefined;
+    this.tooltipText = undefined;
+    this.tooltipPosition = "bottom-right";
+    this.isOpen = false;
+    this.isTabbing = false;
+  }
+  get tempTooltip() {
+    // instances of this.tempTooltip should be replaced with this.tooltip once tooltipText is fully phased out
+    return this.tooltip || this.tooltipText;
+  }
+  componentWillLoad() {
+    const validTooltipPlacement = [
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "top-right",
+      "top-left",
+      "bottom-right",
+      "bottom-left",
+    ];
+    if (!this.label) {
+      console.error("wm-toggletip must have a label property");
+    }
+    if (!this.tempTooltip) {
+      console.error("wm-toggletip must have a tooltip property");
+    }
+    if (!validTooltipPlacement.includes(this.tooltipPosition)) {
+      console.error(`wm-toggletip: tooltip-position has an invalid value of "${this.tooltipPosition}", make sure to use one of the following values: ${validTooltipPlacement}`);
+    }
+    if (this.tooltipText) {
+      console.warn("wm-toggletip: tooltip-text has been deprecated as of v3.1.0. Please use tooltip instead.");
+    }
+  }
+  handleKeydown(ev) {
+    switch (ev.key) {
+      case "Escape":
+        ev.preventDefault();
+        if (this.isOpen) {
+          ev.stopPropagation(); // prevent closing modal if within one
+          this.close();
+        }
+        break;
+      case "Tab":
+        if (this.isOpen) {
+          this.close();
+        }
+    }
+  }
+  toggleTabbingOn() {
+    this.isTabbing = true;
+  }
+  toggleTabbingOff() {
+    this.isTabbing = false;
+  }
+  handleClick(ev) {
+    if (this.isOpen) {
+      if (ev.target === this.el || this.el.contains(ev.target)) {
+        // Re-announce if clicking any part of the component while open
+        this.announceToggletip();
+      }
+      else {
+        this.close();
+      }
+    }
+  }
+  open() {
+    this.isOpen = true;
+    this.announceToggletip();
+  }
+  close() {
+    this.isOpen = false;
+    this.hideTooltip();
+  }
+  handleBlur() {
+    this.hideTooltip();
+    // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
+    this.liveRegionEl.innerHTML = "";
+  }
+  showTooltip() {
+    // Because a :hover pseudoclass would apply before the tooltip is repositioned, hover styles must be applied through a class
+    // Otherwise, the tooltip will flash on-screen and possibly create scrollbars
+    this.setToggletipPosition();
+    this.tooltipEl.classList.add("hover");
+  }
+  hideTooltip() {
+    this.tooltipEl.classList.remove("hover");
+  }
+  announceToggletip() {
+    this.liveRegionEl.innerHTML = "";
+    setTimeout(() => {
+      this.liveRegionEl.innerHTML = this.tempTooltip;
+    }, 10);
+  }
+  setToggletipPosition() {
+    // Vertical
+    if (this.tooltipPosition.includes("bottom") && functions.shouldOpenUp(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
+    }
+    else if (this.tooltipPosition.includes("top") && functions.shouldOpenDown(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
+    }
+    // Horizontal
+    if (this.tooltipPosition.includes("left") && functions.shouldShiftRight(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("left", "right");
+    }
+    else if (this.tooltipPosition.includes("right") && functions.shouldShiftLeft(this.el, this.toggletipEl)) {
+      this.tooltipPosition = this.tooltipPosition.replace("right", "left");
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("button", { class: `button ${this.isTabbing ? "user-is-tabbing" : ""}`, type: "button", "aria-label": this.label, onClick: () => {
+        this.setToggletipPosition();
+        this.open();
+      },
+      // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
+      onMouseEnter: () => this.showTooltip(), onMouseLeave: () => this.hideTooltip(), onFocus: () => this.showTooltip(), onBlur: () => this.handleBlur() }), index.h("div", { ref: (el) => (this.tooltipEl = el), class: `tooltip ${this.tooltipPosition} ${this.isOpen ? "hidden" : ""}`, "aria-hidden": "true" }, this.tooltipMessage), index.h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tempTooltip), index.h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+};
 Toggletip.style = wmToggletipCss;
 exports.wm_toggletip = Toggletip;

package/dist/cjs/wm-toggletip.cjs.entry.js.map CHANGED Viewed

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