New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@engie-group/fluid-design-system
Advanced tools
@engie-group/fluid-design-system - npm Package Compare versions
Comparing version 5.10.2 to 5.11.0
@@ -63,3 +63,3 @@ import { autoUpdate, computePosition, flip, hide, offset, shift } from '@floating-ui/dom'; | ||
| }); | ||
| if (((_a = options.hideOptions) === null || _a === void 0 ? void 0 : _a.strategy) && middlewareData.hide) { | ||
| if (((_a = options === null || options === void 0 ? void 0 : options.hideOptions) === null || _a === void 0 ? void 0 : _a.strategy) && middlewareData.hide) { | ||
| Object.assign(menu.style, { | ||
@@ -66,0 +66,0 @@ visibility: middlewareData.hide[options.hideOptions.strategy] ? 'hidden' : 'visible' |
@@ -1,6 +0,1 @@ | ||
| /** | ||
| * -------------------------------------------------------------------------- | ||
| * NJ: Slider.ts | ||
| * -------------------------------------------------------------------------- | ||
| */ | ||
| import AbstractComponent from '../../globals/ts/abstract-component'; | ||
@@ -26,4 +21,4 @@ export default class Slider extends AbstractComponent { | ||
| private tooltip; | ||
| private currentProgress; | ||
| constructor(element: HTMLElement, options?: {}); | ||
| private addTooltip; | ||
| private setListeners; | ||
@@ -33,3 +28,2 @@ private setTooltipListeners; | ||
| private refreshTooltipValue; | ||
| private replaceTooltip; | ||
| private static getOptions; | ||
@@ -36,0 +30,0 @@ dispose(): void; |
@@ -1,6 +0,1 @@ | ||
| /** | ||
| * -------------------------------------------------------------------------- | ||
| * NJ: Slider.ts | ||
| * -------------------------------------------------------------------------- | ||
| */ | ||
| import AbstractComponent from '../../globals/ts/abstract-component'; | ||
@@ -12,3 +7,3 @@ import Data from '../../globals/ts/data'; | ||
| import Util from '../../globals/ts/util'; | ||
| import { createTooltipElement, updateTooltipContent } from '../tooltip'; | ||
| import { njTooltip } from '../tooltip'; | ||
| class Slider extends AbstractComponent { | ||
@@ -19,2 +14,3 @@ constructor(element, options = {}) { | ||
| this.dataId = Number(String(Math.random()).slice(2)) + Date.now(); | ||
| this.currentProgress = 0; | ||
| this.input = this.element.querySelector(Slider.SELECTOR.input); | ||
@@ -25,3 +21,34 @@ this.element.setAttribute('data-id', this.dataId.toString()); | ||
| if (this.options.tooltip) { | ||
| this.addTooltip(); | ||
| const anchor = document.createElement('div'); | ||
| anchor.className = 'nj-slider__tooltip-anchor'; | ||
| this.element.appendChild(anchor); | ||
| const virtualElement = { | ||
| parentElement: this.element, | ||
| setAttribute: (name, value) => { | ||
| this.input.setAttribute(name, value); | ||
| }, | ||
| removeAttribute: (name) => { | ||
| this.input.removeAttribute(name); | ||
| }, | ||
| contextElement: anchor, | ||
| getBoundingClientRect: () => { | ||
| const { x, y, width, height, top, left, right, bottom } = this.input.getBoundingClientRect(); | ||
| const correction = this.currentProgress * (-1 * Slider.THUMB_WIDTH); | ||
| return { | ||
| x: width * this.currentProgress + correction + x, | ||
| y, | ||
| width: Slider.THUMB_WIDTH, | ||
| height, | ||
| top, | ||
| left: width * this.currentProgress + correction + left, | ||
| right, | ||
| bottom | ||
| }; | ||
| } | ||
| }; | ||
| this.tooltip = njTooltip(virtualElement, this.input.value, { | ||
| hasArrow: false, | ||
| placement: 'top' | ||
| }); | ||
| this.tooltip.show(); | ||
| this.setTooltipListeners(); | ||
@@ -31,13 +58,2 @@ } | ||
| } | ||
| addTooltip() { | ||
| const { tooltip } = createTooltipElement('', { | ||
| placement: 'top', | ||
| hasArrow: false | ||
| }); | ||
| this.tooltip = tooltip; | ||
| const abstractTooltip = this.tooltip; | ||
| abstractTooltip.key = { key: '', id: '' }; | ||
| this.element.insertBefore(this.tooltip, this.element.querySelector(Slider.SELECTOR.label)); | ||
| this.refreshTooltipValue(); | ||
| } | ||
| setListeners() { | ||
@@ -70,18 +86,11 @@ EventHandler.on(this.element, 'input change keyup', () => { | ||
| const value = parseFloat(this.input.value); | ||
| const perc = (Slider.PERCENT_CONV * (value - min)) / (max - min); | ||
| this.currentProgress = (value - min) / (max - min); | ||
| const perc = Slider.PERCENT_CONV * this.currentProgress; | ||
| input.style.setProperty('--nj-slider-track-position', `${perc}% 100%`); | ||
| input.style.setProperty('--nj-slider-anchor-left', `calc(${perc}% + ${this.currentProgress} * -20px + 10px)`); | ||
| } | ||
| } | ||
| refreshTooltipValue() { | ||
| updateTooltipContent(this.tooltip, this.input.value); | ||
| this.replaceTooltip(); | ||
| this.tooltip.setContent(this.input.value); | ||
| } | ||
| replaceTooltip() { | ||
| const min = this.input.min === '' ? 0 : parseFloat(this.input.min); | ||
| // eslint-disable-next-line no-magic-numbers | ||
| const max = this.input.max === '' ? 100 : parseFloat(this.input.max); | ||
| const val = parseFloat(this.input.value); | ||
| const pos = (val - min) / (max - min); | ||
| this.tooltip.style.left = `${pos * (this.input.offsetWidth - Slider.THUMB_WIDTH) - this.tooltip.offsetWidth / 2 + Slider.THUMB_WIDTH / 2}px`; | ||
| } | ||
| static getOptions(element, options = {}) { | ||
@@ -93,2 +102,4 @@ options = Object.assign(Object.assign(Object.assign({}, Slider.DEFAULT_OPTIONS), Manipulator.getDataAttributes(element)), (typeof options === 'object' && options ? options : {})); | ||
| dispose() { | ||
| var _a; | ||
| (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.hide(); | ||
| EventHandler.off(this.element, 'input change keyup'); | ||
@@ -95,0 +106,0 @@ EventHandler.off(document, 'resize'); |
@@ -17,6 +17,2 @@ import { Side } from '@floating-ui/dom'; | ||
| /** | ||
| * Whether the tooltip should always be displayed or only on hover/focus | ||
| */ | ||
| isAlwaysDisplayed?: boolean; | ||
| /** | ||
| * Whether the provided string content should be interpreted as HTML. | ||
@@ -27,26 +23,45 @@ * Prefer passing content as HTMLElement when possible instead | ||
| } | ||
| export declare class Tooltip { | ||
| private _isDisplayed; | ||
| readonly anchorElement: HTMLElement; | ||
| private readonly anchorParentElement; | ||
| private tooltipElement; | ||
| private arrowElement; | ||
| private innerElement; | ||
| private cleanupFunction?; | ||
| private options; | ||
| constructor(anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions); | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| */ | ||
| private createTooltipElement; | ||
| private getOptionsFromDataset; | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| private updateTooltipModifiers; | ||
| /** | ||
| * Display the tooltip. Make sure to `hide()` it when no longer needed. | ||
| */ | ||
| show(): void; | ||
| /** | ||
| * Hide the tooltip | ||
| */ | ||
| hide(): void; | ||
| /** | ||
| * Update tooltip content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML, | ||
| * prefer passing content as HTMLElement when possible instead. | ||
| * Default to `false`. | ||
| */ | ||
| setContent(content: string | HTMLElement, isContentHTML?: boolean): void; | ||
| /** | ||
| * Update tooltip options | ||
| * @param options | ||
| */ | ||
| updateOptions(options: Omit<ITooltipOptions, 'isContentHtml'>): void; | ||
| } | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param tooltip The tooltip you want to update its classes | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export declare const updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, 'isAlwaysDisplayed' | 'isContentHtml'>) => void; | ||
| /** | ||
| * Update tooltip content | ||
| * @param tooltip The tooltip you want to update its content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML. | ||
| * Prefer passing content as HTMLElement when possible instead | ||
| */ | ||
| export declare const updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export declare const createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, 'isAlwaysDisplayed'>) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| /** | ||
| * Initialize a tooltip anchored to an {@link HTMLElement} | ||
@@ -59,10 +74,7 @@ * | ||
| * | ||
| * @return The initialized tooltip element and the unmount function to call on cleanup | ||
| * @return The tooltip reference for further manipulation | ||
| */ | ||
| export declare const njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement | null; | ||
| unmount: () => void; | ||
| }; | ||
| export declare const njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| /** | ||
| * Initialize all elements matching query selector on given element has tooltip anchor. | ||
| * Initialize all tooltip anchor matching query selector on given element. | ||
| * | ||
@@ -72,24 +84,24 @@ * @param element Parent element on which we will apply query selection. Default to `document.body` | ||
| * | ||
| * @return The initialized tooltip elements and a function to unmount them all | ||
| * @return The initialized tooltip element references and a function to unmount them all | ||
| */ | ||
| export declare const initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| /** | ||
| * Attach listeners to focus and hover events to toggle tooltip | ||
| * @param tooltip The tooltip which will be displayed | ||
| * @param triggerElement The element on which would be attached event listeners. Default to tooltip anchor | ||
| * @return Dismount function to remove event listeners, should be called before disposing the tooltip | ||
| */ | ||
| export declare const displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => (() => void); | ||
| declare const _default: { | ||
| njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement; | ||
| unmount: () => void; | ||
| }; | ||
| updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, "isAlwaysDisplayed">) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, "isAlwaysDisplayed" | "isContentHtml">) => void; | ||
| njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| Tooltip: typeof Tooltip; | ||
| displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => () => void; | ||
| }; | ||
| export default _default; |
@@ -7,3 +7,2 @@ import { arrow, autoUpdate, computePosition, flip } from '@floating-ui/dom'; | ||
| placement: 'top', | ||
| isAlwaysDisplayed: false, | ||
| isContentHtml: false | ||
@@ -21,3 +20,6 @@ }; | ||
| arrow: { | ||
| element: 'nj-tooltip__arrow' | ||
| element: 'nj-tooltip__arrow', | ||
| modifier: { | ||
| center: 'nj-tooltip__arrow--center' | ||
| } | ||
| }, | ||
@@ -29,97 +31,153 @@ inner: { | ||
| const INIT_QUERY_SELECTOR = '[data-toggle="tooltip"]'; | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param tooltip The tooltip you want to update its classes | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export const updateTooltipModifiers = (tooltip, options) => { | ||
| if (typeof options.hasArrow === 'boolean') { | ||
| if (options.hasArrow) { | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| export class Tooltip { | ||
| constructor(anchorElement, content, options) { | ||
| var _a; | ||
| this._isDisplayed = false; | ||
| this.anchorElement = anchorElement; | ||
| this.anchorParentElement = anchorElement.parentElement; | ||
| this.createTooltipElement(); | ||
| Object.defineProperty(this.anchorElement, '_njTooltip', { | ||
| value: this, | ||
| writable: true | ||
| }); | ||
| const tooltipContent = content !== null && content !== void 0 ? content : anchorElement.dataset.tooltipContent; | ||
| this.options = Object.assign({}, DEFAULT_OPTIONS, options !== null && options !== void 0 ? options : {}, anchorElement.dataset ? this.getOptionsFromDataset(anchorElement.dataset) : {}); | ||
| this.updateTooltipModifiers(this.options); | ||
| this.setContent(tooltipContent, this.options.isContentHtml); | ||
| if (typeof ((_a = anchorElement.dataset) === null || _a === void 0 ? void 0 : _a.tooltipAlways) === 'string') { | ||
| this.show(); | ||
| } | ||
| else { | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| */ | ||
| createTooltipElement() { | ||
| const tooltipElement = document.createElement('div'); | ||
| tooltipElement.className = CLASS_NAME.tooltip.element; | ||
| tooltipElement.role = 'tooltip'; | ||
| tooltipElement.id = Util.getUID('tooltip-'); | ||
| const arrowElement = document.createElement('div'); | ||
| arrowElement.className = `${CLASS_NAME.arrow.element} ${CLASS_NAME.arrow.modifier.center}`; | ||
| arrowElement.ariaHidden = 'true'; | ||
| const innerElement = document.createElement('div'); | ||
| innerElement.className = CLASS_NAME.inner.element; | ||
| tooltipElement.appendChild(arrowElement); | ||
| tooltipElement.appendChild(innerElement); | ||
| this.tooltipElement = tooltipElement; | ||
| this.arrowElement = arrowElement; | ||
| this.innerElement = innerElement; | ||
| } | ||
| getOptionsFromDataset(dataset) { | ||
| const options = {}; | ||
| if (typeof dataset.tooltipArrow === 'string') { | ||
| options.hasArrow = dataset.tooltipArrow === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipInverse === 'string') { | ||
| options.isColorInverse = dataset.tooltipInverse === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipPlacement === 'string') { | ||
| options.placement = dataset.tooltipPlacement; | ||
| } | ||
| if (typeof dataset.tooltipHtml === 'string') { | ||
| options.isContentHtml = dataset.tooltipHtml === 'true'; | ||
| } | ||
| return options; | ||
| } | ||
| if (typeof options.isColorInverse === 'boolean') { | ||
| if (options.isColorInverse) { | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.inverse); | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| updateTooltipModifiers(options) { | ||
| if (typeof options.hasArrow === 'boolean') { | ||
| if (options.hasArrow) { | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } | ||
| else { | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } | ||
| } | ||
| else { | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.inverse); | ||
| if (typeof options.isColorInverse === 'boolean') { | ||
| if (options.isColorInverse) { | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.inverse); | ||
| } | ||
| else { | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.inverse); | ||
| } | ||
| } | ||
| if (typeof options.placement === 'string') { | ||
| // Reset positions | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('top')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('right')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('bottom')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('left')); | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.placed(options.placement)); | ||
| } | ||
| } | ||
| if (typeof options.placement === 'string') { | ||
| // Reset positions | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('top')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('right')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('bottom')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('left')); | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.placed(options.placement)); | ||
| /** | ||
| * Display the tooltip. Make sure to `hide()` it when no longer needed. | ||
| */ | ||
| show() { | ||
| if (this._isDisplayed) { | ||
| return; | ||
| } | ||
| this.anchorParentElement.appendChild(this.tooltipElement); | ||
| this.anchorElement.setAttribute('aria-describedby', this.tooltipElement.id); | ||
| this._isDisplayed = true; | ||
| this.cleanupFunction = autoUpdate(this.anchorElement, this.tooltipElement, () => { | ||
| computePosition(this.anchorElement, this.tooltipElement, { | ||
| placement: this.options.placement, | ||
| middleware: [flip(), this.options.hasArrow && arrow({ element: this.arrowElement })] | ||
| }).then(({ x, y, placement }) => { | ||
| Object.assign(this.tooltipElement.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| this.updateTooltipModifiers({ placement: placement }); | ||
| }); | ||
| }); | ||
| } | ||
| }; | ||
| /** | ||
| * Update tooltip content | ||
| * @param tooltip The tooltip you want to update its content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML. | ||
| * Prefer passing content as HTMLElement when possible instead | ||
| */ | ||
| export const updateTooltipContent = (tooltip, content, isContentHTML = DEFAULT_OPTIONS.isContentHtml) => { | ||
| const inner = tooltip.querySelector(`.${CLASS_NAME.inner.element}`); | ||
| if (!inner) { | ||
| return; | ||
| /** | ||
| * Hide the tooltip | ||
| */ | ||
| hide() { | ||
| var _a, _b; | ||
| if (!this._isDisplayed) { | ||
| return; | ||
| } | ||
| (_a = this.cleanupFunction) === null || _a === void 0 ? void 0 : _a.call(this); | ||
| this.cleanupFunction = null; | ||
| (_b = this.anchorElement.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(this.tooltipElement); | ||
| this.anchorElement.removeAttribute('aria-describedby'); | ||
| this._isDisplayed = false; | ||
| } | ||
| if (typeof content === 'string') { | ||
| if (isContentHTML) { | ||
| inner.innerHTML = content; | ||
| /** | ||
| * Update tooltip content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML, | ||
| * prefer passing content as HTMLElement when possible instead. | ||
| * Default to `false`. | ||
| */ | ||
| setContent(content, isContentHTML = DEFAULT_OPTIONS.isContentHtml) { | ||
| if (typeof content === 'string') { | ||
| if (isContentHTML) { | ||
| this.innerElement.innerHTML = content; | ||
| } | ||
| else { | ||
| this.innerElement.innerText = content; | ||
| } | ||
| } | ||
| else { | ||
| inner.innerText = content; | ||
| this.innerElement.appendChild(content); | ||
| } | ||
| } | ||
| else { | ||
| inner.appendChild(content); | ||
| /** | ||
| * Update tooltip options | ||
| * @param options | ||
| */ | ||
| updateOptions(options) { | ||
| this.options = Object.assign(Object.assign({}, this.options), options); | ||
| this.updateTooltipModifiers(this.options); | ||
| } | ||
| }; | ||
| } | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export const createTooltipElement = (content, options) => { | ||
| const tooltip = document.createElement('div'); | ||
| tooltip.className = CLASS_NAME.tooltip.element; | ||
| tooltip.role = 'tooltip'; | ||
| tooltip.id = Util.getUID('tooltip-'); | ||
| const arrowElement = document.createElement('div'); | ||
| arrowElement.className = CLASS_NAME.arrow.element; | ||
| const inner = document.createElement('div'); | ||
| inner.className = CLASS_NAME.inner.element; | ||
| updateTooltipModifiers(tooltip, Object.assign({}, DEFAULT_OPTIONS, options !== null && options !== void 0 ? options : {})); | ||
| tooltip.appendChild(arrowElement); | ||
| tooltip.appendChild(inner); | ||
| updateTooltipContent(tooltip, content, options.isContentHtml); | ||
| return { tooltip, arrowElement }; | ||
| }; | ||
| const getOptionsFromDataset = (dataset) => { | ||
| const options = {}; | ||
| if (typeof dataset.tooltipArrow === 'string') { | ||
| options.hasArrow = dataset.tooltipArrow === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipInverse === 'string') { | ||
| options.isColorInverse = dataset.tooltipInverse === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipPlacement === 'string') { | ||
| options.placement = dataset.tooltipPlacement; | ||
| } | ||
| if (typeof dataset.tooltipAlways === 'string') { | ||
| options.isAlwaysDisplayed = dataset.tooltipAlways === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipHtml === 'string') { | ||
| options.isContentHtml = dataset.tooltipHtml === 'true'; | ||
| } | ||
| return options; | ||
| }; | ||
| /** | ||
| * Initialize a tooltip anchored to an {@link HTMLElement} | ||
@@ -132,66 +190,7 @@ * | ||
| * | ||
| * @return The initialized tooltip element and the unmount function to call on cleanup | ||
| * @return The tooltip reference for further manipulation | ||
| */ | ||
| export const njTooltip = (anchorElement, content, options) => { | ||
| const tooltipContent = content !== null && content !== void 0 ? content : anchorElement.dataset.tooltipContent; | ||
| if (!tooltipContent) { | ||
| return { | ||
| tooltip: null, | ||
| // eslint-disable-next-line no-empty-function | ||
| unmount() { } | ||
| }; | ||
| } | ||
| const finalOptions = Object.assign({}, DEFAULT_OPTIONS, options !== null && options !== void 0 ? options : {}, getOptionsFromDataset(anchorElement.dataset)); | ||
| const { tooltip, arrowElement } = createTooltipElement(tooltipContent, finalOptions); | ||
| arrowElement.classList.add('nj-tooltip__arrow--center'); | ||
| let cleanup; | ||
| let isMounted = false; | ||
| function mountTooltip() { | ||
| anchorElement.parentElement.appendChild(tooltip); | ||
| anchorElement.setAttribute('aria-describedby', tooltip.id); | ||
| isMounted = true; | ||
| cleanup = autoUpdate(anchorElement, tooltip, () => { | ||
| computePosition(anchorElement, tooltip, { | ||
| placement: finalOptions.placement, | ||
| middleware: [flip(), finalOptions.hasArrow && arrow({ element: arrowElement })] | ||
| }).then(({ x, y, placement }) => { | ||
| Object.assign(tooltip.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| updateTooltipModifiers(tooltip, { placement: placement }); | ||
| }); | ||
| }); | ||
| } | ||
| function hideTooltip() { | ||
| var _a; | ||
| if (!isMounted) { | ||
| return; | ||
| } | ||
| cleanup === null || cleanup === void 0 ? void 0 : cleanup(); | ||
| cleanup = null; | ||
| (_a = anchorElement.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(tooltip); | ||
| anchorElement.removeAttribute('aria-describedby'); | ||
| isMounted = false; | ||
| } | ||
| const unmount = () => { | ||
| hideTooltip(); | ||
| anchorElement.removeEventListener('focusin', mountTooltip); | ||
| anchorElement.removeEventListener('mouseenter', mountTooltip); | ||
| anchorElement.removeEventListener('focusout', hideTooltip); | ||
| anchorElement.removeEventListener('mouseleave', hideTooltip); | ||
| }; | ||
| if (finalOptions.isAlwaysDisplayed) { | ||
| mountTooltip(); | ||
| } | ||
| else { | ||
| anchorElement.addEventListener('focusin', mountTooltip); | ||
| anchorElement.addEventListener('mouseenter', mountTooltip); | ||
| anchorElement.addEventListener('focusout', hideTooltip); | ||
| anchorElement.addEventListener('mouseleave', hideTooltip); | ||
| } | ||
| return { tooltip, unmount }; | ||
| }; | ||
| export const njTooltip = (anchorElement, content, options) => new Tooltip(anchorElement, content, options); | ||
| /** | ||
| * Initialize all elements matching query selector on given element has tooltip anchor. | ||
| * Initialize all tooltip anchor matching query selector on given element. | ||
| * | ||
@@ -201,31 +200,54 @@ * @param element Parent element on which we will apply query selection. Default to `document.body` | ||
| * | ||
| * @return The initialized tooltip elements and a function to unmount them all | ||
| * @return The initialized tooltip element references and a function to unmount them all | ||
| */ | ||
| export const initAllTooltips = (element, querySelector = INIT_QUERY_SELECTOR) => { | ||
| const parentElement = element !== null && element !== void 0 ? element : document.body; | ||
| const tooltips = []; | ||
| const unmountFunctions = []; | ||
| const tooltips = []; | ||
| parentElement.querySelectorAll(querySelector).forEach((anchorElement) => { | ||
| const initializationResult = njTooltip(anchorElement); | ||
| if (initializationResult.tooltip !== null) { | ||
| unmountFunctions.push(initializationResult.unmount); | ||
| tooltips.push(initializationResult.tooltip); | ||
| parentElement.querySelectorAll(querySelector).forEach((anchor) => { | ||
| const anchorElement = anchor; | ||
| const tooltip = njTooltip(anchorElement); | ||
| if (!(anchorElement.dataset.tooltipAlways === 'true')) { | ||
| unmountFunctions.push(displayTooltipOnHoverAndFocus(tooltip)); | ||
| } | ||
| tooltips.push(tooltip); | ||
| }); | ||
| return { | ||
| tooltips, | ||
| unmount: () => { | ||
| unmountFunctions.forEach((unmount) => { | ||
| unmount(); | ||
| }); | ||
| } | ||
| const unmount = () => { | ||
| unmountFunctions.forEach((unmount) => unmount()); | ||
| }; | ||
| return { tooltips, unmount }; | ||
| }; | ||
| /** | ||
| * Attach listeners to focus and hover events to toggle tooltip | ||
| * @param tooltip The tooltip which will be displayed | ||
| * @param triggerElement The element on which would be attached event listeners. Default to tooltip anchor | ||
| * @return Dismount function to remove event listeners, should be called before disposing the tooltip | ||
| */ | ||
| export const displayTooltipOnHoverAndFocus = (tooltip, triggerElement) => { | ||
| const controller = new AbortController(); | ||
| const { signal } = controller; | ||
| const anchorElement = triggerElement !== null && triggerElement !== void 0 ? triggerElement : tooltip.anchorElement; | ||
| anchorElement.addEventListener('focusin', () => { | ||
| tooltip.show(); | ||
| }, { signal }); | ||
| anchorElement.addEventListener('mouseenter', () => { | ||
| tooltip.show(); | ||
| }, { signal }); | ||
| anchorElement.addEventListener('focusout', () => { | ||
| tooltip.hide(); | ||
| }, { signal }); | ||
| anchorElement.addEventListener('mouseleave', () => { | ||
| tooltip.hide(); | ||
| }, { signal }); | ||
| return () => { | ||
| tooltip.hide(); | ||
| controller.abort(); | ||
| }; | ||
| }; | ||
| export default { | ||
| njTooltip, | ||
| updateTooltipContent, | ||
| createTooltipElement, | ||
| updateTooltipModifiers, | ||
| initAllTooltips | ||
| initAllTooltips, | ||
| Tooltip, | ||
| displayTooltipOnHoverAndFocus | ||
| }; | ||
| //# sourceMappingURL=index.js.map |
@@ -12,3 +12,3 @@ import './auto-init'; | ||
| import InputNumber from './components/input-number'; | ||
| import Search from './components/search'; | ||
| import { IMenuOptions, openMenu } from './components/menu'; | ||
| import Modal, { BeforeHideEventSource } from './components/modal'; | ||
@@ -18,2 +18,3 @@ import Navbar from './components/navbar'; | ||
| import Radio from './components/radio'; | ||
| import Search from './components/search'; | ||
| import SegmentedControl from './components/segmented-control'; | ||
@@ -26,3 +27,3 @@ import Select from './components/select'; | ||
| import Tag from './components/tag'; | ||
| import { createTooltipElement, initAllTooltips, ITooltipOptions, njTooltip, updateTooltipContent, updateTooltipModifiers } from './components/tooltip'; | ||
| import { displayTooltipOnHoverAndFocus, initAllTooltips, ITooltipOptions, njTooltip, Tooltip } from './components/tooltip'; | ||
| /** | ||
@@ -51,19 +52,13 @@ * Main class of Fluid Design System library | ||
| static readonly Tag: typeof Tag; | ||
| static readonly njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement; | ||
| unmount: () => void; | ||
| }; | ||
| static readonly createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, "isAlwaysDisplayed">) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| static readonly updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| static readonly updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, "isAlwaysDisplayed" | "isContentHtml">) => void; | ||
| static readonly njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| static readonly initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| static readonly displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => () => void; | ||
| static readonly Tooltip: typeof Tooltip; | ||
| static readonly Password: typeof Password; | ||
| static readonly SelectInput: typeof SelectInput; | ||
| static readonly AutocompleteInput: typeof AutocompleteInput; | ||
| static readonly openMenu: typeof openMenu; | ||
| /** | ||
@@ -74,3 +69,3 @@ * Initialize the components listed in the AUTOINIT_COMPONENTS variable | ||
| } | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, BeforeHideEventSource, njTooltip, updateTooltipModifiers, updateTooltipContent, createTooltipElement, initAllTooltips, ITooltipOptions }; | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, BeforeHideEventSource, njTooltip, initAllTooltips, displayTooltipOnHoverAndFocus, Tooltip, ITooltipOptions, openMenu, IMenuOptions }; | ||
| declare global { | ||
@@ -77,0 +72,0 @@ interface Window { |
@@ -12,3 +12,3 @@ import './auto-init'; | ||
| import InputNumber from './components/input-number'; | ||
| import Search from './components/search'; | ||
| import { openMenu } from './components/menu'; | ||
| import Modal from './components/modal'; | ||
@@ -18,2 +18,3 @@ import Navbar from './components/navbar'; | ||
| import Radio from './components/radio'; | ||
| import Search from './components/search'; | ||
| import SegmentedControl from './components/segmented-control'; | ||
@@ -26,3 +27,3 @@ import Select from './components/select'; | ||
| import Tag from './components/tag'; | ||
| import { createTooltipElement, initAllTooltips, njTooltip, updateTooltipContent, updateTooltipModifiers } from './components/tooltip'; | ||
| import { displayTooltipOnHoverAndFocus, initAllTooltips, njTooltip, Tooltip } from './components/tooltip'; | ||
| /** | ||
@@ -93,11 +94,11 @@ * Main class of Fluid Design System library | ||
| NJ.njTooltip = njTooltip; | ||
| NJ.createTooltipElement = createTooltipElement; | ||
| NJ.updateTooltipContent = updateTooltipContent; | ||
| NJ.updateTooltipModifiers = updateTooltipModifiers; | ||
| NJ.initAllTooltips = initAllTooltips; | ||
| NJ.displayTooltipOnHoverAndFocus = displayTooltipOnHoverAndFocus; | ||
| NJ.Tooltip = Tooltip; | ||
| NJ.Password = Password; | ||
| NJ.SelectInput = SelectInput; | ||
| NJ.AutocompleteInput = AutocompleteInput; | ||
| NJ.openMenu = openMenu; | ||
| export default NJ; | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, njTooltip, updateTooltipModifiers, updateTooltipContent, createTooltipElement, initAllTooltips }; | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, njTooltip, initAllTooltips, displayTooltipOnHoverAndFocus, Tooltip, openMenu }; | ||
| if (typeof window !== 'undefined') { | ||
@@ -104,0 +105,0 @@ window.NJ = NJ; |
@@ -1,2 +0,2 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Menu",[],e):"object"==typeof exports?exports.Menu=e():t.Menu=e()}(window,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>at});const n=["top","right","bottom","left"],o=Math.min,i=Math.max,r=Math.round,l=Math.floor,c=t=>({x:t,y:t}),s={left:"right",right:"left",bottom:"top",top:"bottom"},a={start:"end",end:"start"};function f(t,e,n){return i(t,o(e,n))}function u(t,e){return"function"==typeof t?t(e):t}function d(t){return t.split("-")[0]}function p(t){return t.split("-")[1]}function m(t){return"x"===t?"y":"x"}function h(t){return"y"===t?"height":"width"}function g(t){return["top","bottom"].includes(d(t))?"y":"x"}function y(t){return m(g(t))}function x(t){return t.replace(/start|end/g,(t=>a[t]))}function w(t){return t.replace(/left|right|bottom|top/g,(t=>s[t]))}function v(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function b(t,e,n){let{reference:o,floating:i}=t;const r=g(e),l=y(e),c=h(l),s=d(e),a="y"===r,f=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,m=o[c]/2-i[c]/2;let x;switch(s){case"top":x={x:f,y:o.y-i.height};break;case"bottom":x={x:f,y:o.y+o.height};break;case"right":x={x:o.x+o.width,y:u};break;case"left":x={x:o.x-i.width,y:u};break;default:x={x:o.x,y:o.y}}switch(p(e)){case"start":x[l]-=m*(n&&a?-1:1);break;case"end":x[l]+=m*(n&&a?-1:1)}return x}async function R(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:a="clippingAncestors",rootBoundary:f="viewport",elementContext:d="floating",altBoundary:p=!1,padding:m=0}=u(e,t),h=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(m),g=c[p?"floating"===d?"reference":"floating":d],y=v(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:a,rootBoundary:f,strategy:s})),x="floating"===d?{...l.floating,x:o,y:i}:l.reference,w=await(null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating)),b=await(null==r.isElement?void 0:r.isElement(w))&&await(null==r.getScale?void 0:r.getScale(w))||{x:1,y:1},R=v(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:x,offsetParent:w,strategy:s}):x);return{top:(y.top-R.top+h.top)/b.y,bottom:(R.bottom-y.bottom+h.bottom)/b.y,left:(y.left-R.left+h.left)/b.x,right:(R.right-y.right+h.right)/b.x}}function O(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function E(t){return n.some((e=>t[e]>=0))}const T=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:r,placement:l,middlewareData:c}=e,s=await async function(t,e){const{placement:n,platform:o,elements:i}=t,r=await(null==o.isRTL?void 0:o.isRTL(i.floating)),l=d(n),c=p(n),s="y"===g(n),a=["left","top"].includes(l)?-1:1,f=r&&s?-1:1,m=u(e,t);let{mainAxis:h,crossAxis:y,alignmentAxis:x}="number"==typeof m?{mainAxis:m,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...m};return c&&"number"==typeof x&&(y="end"===c?-1*x:x),s?{x:y*f,y:h*a}:{x:h*a,y:y*f}}(e,t);return l===(null==(n=c.offset)?void 0:n.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:i+s.x,y:r+s.y,data:{...s,placement:l}}}}};function L(t){return D(t)?(t.nodeName||"").toLowerCase():"#document"}function A(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function C(t){var e;return null==(e=(D(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function D(t){return t instanceof Node||t instanceof A(t).Node}function S(t){return t instanceof Element||t instanceof A(t).Element}function P(t){return t instanceof HTMLElement||t instanceof A(t).HTMLElement}function F(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof A(t).ShadowRoot)}function H(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=W(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function k(t){return["table","td","th"].includes(L(t))}function B(t){const e=M(),n=W(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function M(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function j(t){return["html","body","#document"].includes(L(t))}function W(t){return A(t).getComputedStyle(t)}function V(t){return S(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function N(t){if("html"===L(t))return t;const e=t.assignedSlot||t.parentNode||F(t)&&t.host||C(t);return F(e)?e.host:e}function z(t){const e=N(t);return j(e)?t.ownerDocument?t.ownerDocument.body:t.body:P(e)&&H(e)?e:z(e)}function I(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=z(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=A(i);return r?e.concat(l,l.visualViewport||[],H(i)?i:[],l.frameElement&&n?I(l.frameElement):[]):e.concat(i,I(i,[],n))}function $(t){const e=W(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=P(t),l=i?t.offsetWidth:n,c=i?t.offsetHeight:o,s=r(n)!==l||r(o)!==c;return s&&(n=l,o=c),{width:n,height:o,$:s}}function q(t){return S(t)?t:t.contextElement}function X(t){const e=q(t);if(!P(e))return c(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:l}=$(e);let s=(l?r(n.width):n.width)/o,a=(l?r(n.height):n.height)/i;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const Y=c(0);function _(t){const e=A(t);return M()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:Y}function G(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=q(t);let l=c(1);e&&(o?S(o)&&(l=X(o)):l=X(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==A(t))&&e}(r,n,o)?_(r):c(0);let a=(i.left+s.x)/l.x,f=(i.top+s.y)/l.y,u=i.width/l.x,d=i.height/l.y;if(r){const t=A(r),e=o&&S(o)?A(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=X(i),e=i.getBoundingClientRect(),o=W(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;a*=t.x,f*=t.y,u*=t.x,d*=t.y,a+=r,f+=l,n=A(i),i=n.frameElement}}return v({width:u,height:d,x:a,y:f})}const J=[":popover-open",":modal"];function K(t){return J.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function Q(t){return G(C(t)).left+V(t).scrollLeft}function U(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=A(t),o=C(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=M();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=C(t),n=V(t),o=t.ownerDocument.body,r=i(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),l=i(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let c=-n.scrollLeft+Q(t);const s=-n.scrollTop;return"rtl"===W(o).direction&&(c+=i(e.clientWidth,o.clientWidth)-r),{width:r,height:l,x:c,y:s}}(C(t));else if(S(e))o=function(t,e){const n=G(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=P(t)?X(t):c(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=_(t);o={...e,x:e.x-n.x,y:e.y-n.y}}return v(o)}function Z(t,e){const n=N(t);return!(n===e||!S(n)||j(n))&&("fixed"===W(n).position||Z(n,e))}function tt(t,e,n){const o=P(e),i=C(e),r="fixed"===n,l=G(t,!0,r,e);let s={scrollLeft:0,scrollTop:0};const a=c(0);if(o||!o&&!r)if(("body"!==L(e)||H(i))&&(s=V(e)),o){const t=G(e,!0,r,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else i&&(a.x=Q(i));return{x:l.left+s.scrollLeft-a.x,y:l.top+s.scrollTop-a.y,width:l.width,height:l.height}}function et(t,e){return P(t)&&"fixed"!==W(t).position?e?e(t):t.offsetParent:null}function nt(t,e){const n=A(t);if(!P(t)||K(t))return n;let o=et(t,e);for(;o&&k(o)&&"static"===W(o).position;)o=et(o,e);return o&&("html"===L(o)||"body"===L(o)&&"static"===W(o).position&&!B(o))?n:o||function(t){let e=N(t);for(;P(e)&&!j(e);){if(B(e))return e;e=N(e)}return null}(t)||n}const ot={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=C(o),s=!!e&&K(e.floating);if(o===l||s&&r)return n;let a={scrollLeft:0,scrollTop:0},f=c(1);const u=c(0),d=P(o);if((d||!d&&!r)&&(("body"!==L(o)||H(l))&&(a=V(o)),P(o))){const t=G(o);f=X(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-a.scrollLeft*f.x+u.x,y:n.y*f.y-a.scrollTop*f.y+u.y}},getDocumentElement:C,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:r,strategy:l}=t;const c=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let o=I(t,[],!1).filter((t=>S(t)&&"body"!==L(t))),i=null;const r="fixed"===W(t).position;let l=r?N(t):t;for(;S(l)&&!j(l);){const e=W(l),n=B(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||H(l)&&!n&&Z(t,l))?o=o.filter((t=>t!==l)):i=e,l=N(l)}return e.set(t,o),o}(e,this._c):[].concat(n),r],s=c[0],a=c.reduce(((t,n)=>{const r=U(e,n,l);return t.top=i(r.top,t.top),t.right=o(r.right,t.right),t.bottom=o(r.bottom,t.bottom),t.left=i(r.left,t.left),t}),U(e,s,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:nt,getElementRects:async function(t){const e=this.getOffsetParent||nt,n=this.getDimensions;return{reference:tt(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=$(t);return{width:e,height:n}},getScale:X,isElement:S,isRTL:function(t){return"rtl"===W(t).direction}};function it(t,e,n,r){void 0===r&&(r={});const{ancestorScroll:c=!0,ancestorResize:s=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:f="function"==typeof IntersectionObserver,animationFrame:u=!1}=r,d=q(t),p=c||s?[...d?I(d):[],...I(e)]:[];p.forEach((t=>{c&&t.addEventListener("scroll",n,{passive:!0}),s&&t.addEventListener("resize",n)}));const m=d&&f?function(t,e){let n,r=null;const c=C(t);function s(){var t;clearTimeout(n),null==(t=r)||t.disconnect(),r=null}return function a(f,u){void 0===f&&(f=!1),void 0===u&&(u=1),s();const{left:d,top:p,width:m,height:h}=t.getBoundingClientRect();if(f||e(),!m||!h)return;const g={rootMargin:-l(p)+"px "+-l(c.clientWidth-(d+m))+"px "+-l(c.clientHeight-(p+h))+"px "+-l(d)+"px",threshold:i(0,o(1,u))||1};let y=!0;function x(t){const e=t[0].intersectionRatio;if(e!==u){if(!y)return a();e?a(!1,e):n=setTimeout((()=>{a(!1,1e-7)}),100)}y=!1}try{r=new IntersectionObserver(x,{...g,root:c.ownerDocument})}catch(t){r=new IntersectionObserver(x,g)}r.observe(t)}(!0),s}(d,n):null;let h,g=-1,y=null;a&&(y=new ResizeObserver((t=>{let[o]=t;o&&o.target===d&&y&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=y)||t.observe(e)}))),n()})),d&&!u&&y.observe(d),y.observe(e));let x=u?G(t):null;return u&&function e(){const o=G(t);!x||o.x===x.x&&o.y===x.y&&o.width===x.width&&o.height===x.height||n();x=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;p.forEach((t=>{c&&t.removeEventListener("scroll",n),s&&t.removeEventListener("resize",n)})),null==m||m(),null==(t=y)||t.disconnect(),y=null,u&&cancelAnimationFrame(h)}}const rt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:l=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...s}=u(t,e),a={x:n,y:o},p=await R(e,s),h=g(d(i)),y=m(h);let x=a[y],w=a[h];if(r){const t="y"===y?"bottom":"right";x=f(x+p["y"===y?"top":"left"],x,x-p[t])}if(l){const t="y"===h?"bottom":"right";w=f(w+p["y"===h?"top":"left"],w,w-p[t])}const v=c.fn({...e,[y]:x,[h]:w});return{...v,data:{x:v.x-n,y:v.y-o}}}}},lt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:a}=e,{mainAxis:f=!0,crossAxis:m=!0,fallbackPlacements:g,fallbackStrategy:v="bestFit",fallbackAxisSideDirection:b="none",flipAlignment:O=!0,...E}=u(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const T=d(i),L=d(c)===c,A=await(null==s.isRTL?void 0:s.isRTL(a.floating)),C=g||(L||!O?[w(c)]:function(t){const e=w(t);return[x(t),e,x(e)]}(c));g||"none"===b||C.push(...function(t,e,n,o){const i=p(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(d(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(x)))),r}(c,O,b,A));const D=[c,...C],S=await R(e,E),P=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(f&&P.push(S[T]),m){const t=function(t,e,n){void 0===n&&(n=!1);const o=p(t),i=y(t),r=h(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=w(l)),[l,w(l)]}(i,l,A);P.push(S[t[0]],S[t[1]])}if(F=[...F,{placement:i,overflows:P}],!P.every((t=>t<=0))){var H,k;const t=((null==(H=r.flip)?void 0:H.index)||0)+1,e=D[t];if(e)return{data:{index:t,overflows:F},reset:{placement:e}};let n=null==(k=F.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:k.placement;if(!n)switch(v){case"bestFit":{var B;const t=null==(B=F.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:B[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}}},ct=function(t){return void 0===t&&(t={}),{name:"hide",options:t,async fn(e){const{rects:n}=e,{strategy:o="referenceHidden",...i}=u(t,e);switch(o){case"referenceHidden":{const t=O(await R(e,{...i,elementContext:"reference"}),n.reference);return{data:{referenceHiddenOffsets:t,referenceHidden:E(t)}}}case"escaped":{const t=O(await R(e,{...i,altBoundary:!0}),n.floating);return{data:{escapedOffsets:t,escaped:E(t)}}}default:return{}}}}},st=(t,e,n)=>{const o=new Map,i={platform:ot,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=await(null==l.isRTL?void 0:l.isRTL(e));let a=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=b(a,o,s),d=o,p={},m=0;for(let n=0;n<c.length;n++){const{name:r,fn:h}=c[n],{x:g,y,data:x,reset:w}=await h({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:a,platform:l,elements:{reference:t,floating:e}});f=null!=g?g:f,u=null!=y?y:u,p={...p,[r]:{...p[r],...x}},w&&m<=50&&(m++,"object"==typeof w&&(w.placement&&(d=w.placement),w.rects&&(a=!0===w.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):w.rects),({x:f,y:u}=b(a,d,s))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})};const at={openMenu:function(t,e,n,o){var i;let r;r="x"in t?{getBoundingClientRect:()=>({x:t.x,y:t.y,top:t.y,left:t.x,bottom:t.y,right:t.x,width:0,height:0}),parentElement:document.body}:t;const l=(t=>{const e=document.createElement("div");return e.className="nj-menu",e.appendChild(t),e})(e);let c=r.parentElement;"parent"!==n&&(c="string"==typeof n?null!==(i=document.getElementById(n))&&void 0!==i?i:c:n),c.appendChild(l);const s=it(r,l,(()=>{st(r,l,Object.assign(Object.assign({},o),{middleware:[(null==o?void 0:o.offsetOptions)&&T(o.offsetOptions),(null==o?void 0:o.flipOptions)&<(o.flipOptions),(null==o?void 0:o.shiftOptions)&&rt(o.shiftOptions),(null==o?void 0:o.hideOptions)&&ct(o.hideOptions)]})).then((t=>{let{x:e,y:n,middlewareData:i}=t;var r;Object.assign(l.style,{left:`${e}px`,top:`${n}px`}),(null===(r=o.hideOptions)||void 0===r?void 0:r.strategy)&&i.hide&&Object.assign(l.style,{visibility:i.hide[o.hideOptions.strategy]?"hidden":"visible"})}))}));return{menu:l,unmount:()=>{c.removeChild(l),s()}}}};return e=e.default})())); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Menu",[],e):"object"==typeof exports?exports.Menu=e():t.Menu=e()}(window,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>at});const n=["top","right","bottom","left"],o=Math.min,i=Math.max,r=Math.round,l=Math.floor,c=t=>({x:t,y:t}),s={left:"right",right:"left",bottom:"top",top:"bottom"},a={start:"end",end:"start"};function f(t,e,n){return i(t,o(e,n))}function u(t,e){return"function"==typeof t?t(e):t}function d(t){return t.split("-")[0]}function p(t){return t.split("-")[1]}function m(t){return"x"===t?"y":"x"}function h(t){return"y"===t?"height":"width"}function g(t){return["top","bottom"].includes(d(t))?"y":"x"}function y(t){return m(g(t))}function x(t){return t.replace(/start|end/g,(t=>a[t]))}function w(t){return t.replace(/left|right|bottom|top/g,(t=>s[t]))}function v(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function b(t,e,n){let{reference:o,floating:i}=t;const r=g(e),l=y(e),c=h(l),s=d(e),a="y"===r,f=o.x+o.width/2-i.width/2,u=o.y+o.height/2-i.height/2,m=o[c]/2-i[c]/2;let x;switch(s){case"top":x={x:f,y:o.y-i.height};break;case"bottom":x={x:f,y:o.y+o.height};break;case"right":x={x:o.x+o.width,y:u};break;case"left":x={x:o.x-i.width,y:u};break;default:x={x:o.x,y:o.y}}switch(p(e)){case"start":x[l]-=m*(n&&a?-1:1);break;case"end":x[l]+=m*(n&&a?-1:1)}return x}async function R(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:c,strategy:s}=t,{boundary:a="clippingAncestors",rootBoundary:f="viewport",elementContext:d="floating",altBoundary:p=!1,padding:m=0}=u(e,t),h=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(m),g=c[p?"floating"===d?"reference":"floating":d],y=v(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(c.floating)),boundary:a,rootBoundary:f,strategy:s})),x="floating"===d?{...l.floating,x:o,y:i}:l.reference,w=await(null==r.getOffsetParent?void 0:r.getOffsetParent(c.floating)),b=await(null==r.isElement?void 0:r.isElement(w))&&await(null==r.getScale?void 0:r.getScale(w))||{x:1,y:1},R=v(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:c,rect:x,offsetParent:w,strategy:s}):x);return{top:(y.top-R.top+h.top)/b.y,bottom:(R.bottom-y.bottom+h.bottom)/b.y,left:(y.left-R.left+h.left)/b.x,right:(R.right-y.right+h.right)/b.x}}function O(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function E(t){return n.some((e=>t[e]>=0))}const T=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){var n,o;const{x:i,y:r,placement:l,middlewareData:c}=e,s=await async function(t,e){const{placement:n,platform:o,elements:i}=t,r=await(null==o.isRTL?void 0:o.isRTL(i.floating)),l=d(n),c=p(n),s="y"===g(n),a=["left","top"].includes(l)?-1:1,f=r&&s?-1:1,m=u(e,t);let{mainAxis:h,crossAxis:y,alignmentAxis:x}="number"==typeof m?{mainAxis:m,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...m};return c&&"number"==typeof x&&(y="end"===c?-1*x:x),s?{x:y*f,y:h*a}:{x:h*a,y:y*f}}(e,t);return l===(null==(n=c.offset)?void 0:n.placement)&&null!=(o=c.arrow)&&o.alignmentOffset?{}:{x:i+s.x,y:r+s.y,data:{...s,placement:l}}}}};function L(t){return D(t)?(t.nodeName||"").toLowerCase():"#document"}function A(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function C(t){var e;return null==(e=(D(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function D(t){return t instanceof Node||t instanceof A(t).Node}function S(t){return t instanceof Element||t instanceof A(t).Element}function P(t){return t instanceof HTMLElement||t instanceof A(t).HTMLElement}function F(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof A(t).ShadowRoot)}function H(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=W(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function k(t){return["table","td","th"].includes(L(t))}function B(t){const e=M(),n=W(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function M(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function j(t){return["html","body","#document"].includes(L(t))}function W(t){return A(t).getComputedStyle(t)}function V(t){return S(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function N(t){if("html"===L(t))return t;const e=t.assignedSlot||t.parentNode||F(t)&&t.host||C(t);return F(e)?e.host:e}function z(t){const e=N(t);return j(e)?t.ownerDocument?t.ownerDocument.body:t.body:P(e)&&H(e)?e:z(e)}function I(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=z(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=A(i);return r?e.concat(l,l.visualViewport||[],H(i)?i:[],l.frameElement&&n?I(l.frameElement):[]):e.concat(i,I(i,[],n))}function $(t){const e=W(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=P(t),l=i?t.offsetWidth:n,c=i?t.offsetHeight:o,s=r(n)!==l||r(o)!==c;return s&&(n=l,o=c),{width:n,height:o,$:s}}function q(t){return S(t)?t:t.contextElement}function X(t){const e=q(t);if(!P(e))return c(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:l}=$(e);let s=(l?r(n.width):n.width)/o,a=(l?r(n.height):n.height)/i;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const Y=c(0);function _(t){const e=A(t);return M()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:Y}function G(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=q(t);let l=c(1);e&&(o?S(o)&&(l=X(o)):l=X(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==A(t))&&e}(r,n,o)?_(r):c(0);let a=(i.left+s.x)/l.x,f=(i.top+s.y)/l.y,u=i.width/l.x,d=i.height/l.y;if(r){const t=A(r),e=o&&S(o)?A(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=X(i),e=i.getBoundingClientRect(),o=W(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;a*=t.x,f*=t.y,u*=t.x,d*=t.y,a+=r,f+=l,n=A(i),i=n.frameElement}}return v({width:u,height:d,x:a,y:f})}const J=[":popover-open",":modal"];function K(t){return J.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function Q(t){return G(C(t)).left+V(t).scrollLeft}function U(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=A(t),o=C(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,c=0,s=0;if(i){r=i.width,l=i.height;const t=M();(!t||t&&"fixed"===e)&&(c=i.offsetLeft,s=i.offsetTop)}return{width:r,height:l,x:c,y:s}}(t,n);else if("document"===e)o=function(t){const e=C(t),n=V(t),o=t.ownerDocument.body,r=i(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),l=i(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let c=-n.scrollLeft+Q(t);const s=-n.scrollTop;return"rtl"===W(o).direction&&(c+=i(e.clientWidth,o.clientWidth)-r),{width:r,height:l,x:c,y:s}}(C(t));else if(S(e))o=function(t,e){const n=G(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=P(t)?X(t):c(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=_(t);o={...e,x:e.x-n.x,y:e.y-n.y}}return v(o)}function Z(t,e){const n=N(t);return!(n===e||!S(n)||j(n))&&("fixed"===W(n).position||Z(n,e))}function tt(t,e,n){const o=P(e),i=C(e),r="fixed"===n,l=G(t,!0,r,e);let s={scrollLeft:0,scrollTop:0};const a=c(0);if(o||!o&&!r)if(("body"!==L(e)||H(i))&&(s=V(e)),o){const t=G(e,!0,r,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else i&&(a.x=Q(i));return{x:l.left+s.scrollLeft-a.x,y:l.top+s.scrollTop-a.y,width:l.width,height:l.height}}function et(t,e){return P(t)&&"fixed"!==W(t).position?e?e(t):t.offsetParent:null}function nt(t,e){const n=A(t);if(!P(t)||K(t))return n;let o=et(t,e);for(;o&&k(o)&&"static"===W(o).position;)o=et(o,e);return o&&("html"===L(o)||"body"===L(o)&&"static"===W(o).position&&!B(o))?n:o||function(t){let e=N(t);for(;P(e)&&!j(e);){if(B(e))return e;e=N(e)}return null}(t)||n}const ot={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=C(o),s=!!e&&K(e.floating);if(o===l||s&&r)return n;let a={scrollLeft:0,scrollTop:0},f=c(1);const u=c(0),d=P(o);if((d||!d&&!r)&&(("body"!==L(o)||H(l))&&(a=V(o)),P(o))){const t=G(o);f=X(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-a.scrollLeft*f.x+u.x,y:n.y*f.y-a.scrollTop*f.y+u.y}},getDocumentElement:C,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:r,strategy:l}=t;const c=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let o=I(t,[],!1).filter((t=>S(t)&&"body"!==L(t))),i=null;const r="fixed"===W(t).position;let l=r?N(t):t;for(;S(l)&&!j(l);){const e=W(l),n=B(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||H(l)&&!n&&Z(t,l))?o=o.filter((t=>t!==l)):i=e,l=N(l)}return e.set(t,o),o}(e,this._c):[].concat(n),r],s=c[0],a=c.reduce(((t,n)=>{const r=U(e,n,l);return t.top=i(r.top,t.top),t.right=o(r.right,t.right),t.bottom=o(r.bottom,t.bottom),t.left=i(r.left,t.left),t}),U(e,s,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:nt,getElementRects:async function(t){const e=this.getOffsetParent||nt,n=this.getDimensions;return{reference:tt(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=$(t);return{width:e,height:n}},getScale:X,isElement:S,isRTL:function(t){return"rtl"===W(t).direction}};function it(t,e,n,r){void 0===r&&(r={});const{ancestorScroll:c=!0,ancestorResize:s=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:f="function"==typeof IntersectionObserver,animationFrame:u=!1}=r,d=q(t),p=c||s?[...d?I(d):[],...I(e)]:[];p.forEach((t=>{c&&t.addEventListener("scroll",n,{passive:!0}),s&&t.addEventListener("resize",n)}));const m=d&&f?function(t,e){let n,r=null;const c=C(t);function s(){var t;clearTimeout(n),null==(t=r)||t.disconnect(),r=null}return function a(f,u){void 0===f&&(f=!1),void 0===u&&(u=1),s();const{left:d,top:p,width:m,height:h}=t.getBoundingClientRect();if(f||e(),!m||!h)return;const g={rootMargin:-l(p)+"px "+-l(c.clientWidth-(d+m))+"px "+-l(c.clientHeight-(p+h))+"px "+-l(d)+"px",threshold:i(0,o(1,u))||1};let y=!0;function x(t){const e=t[0].intersectionRatio;if(e!==u){if(!y)return a();e?a(!1,e):n=setTimeout((()=>{a(!1,1e-7)}),100)}y=!1}try{r=new IntersectionObserver(x,{...g,root:c.ownerDocument})}catch(t){r=new IntersectionObserver(x,g)}r.observe(t)}(!0),s}(d,n):null;let h,g=-1,y=null;a&&(y=new ResizeObserver((t=>{let[o]=t;o&&o.target===d&&y&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=y)||t.observe(e)}))),n()})),d&&!u&&y.observe(d),y.observe(e));let x=u?G(t):null;return u&&function e(){const o=G(t);!x||o.x===x.x&&o.y===x.y&&o.width===x.width&&o.height===x.height||n();x=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;p.forEach((t=>{c&&t.removeEventListener("scroll",n),s&&t.removeEventListener("resize",n)})),null==m||m(),null==(t=y)||t.disconnect(),y=null,u&&cancelAnimationFrame(h)}}const rt=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:i}=e,{mainAxis:r=!0,crossAxis:l=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...s}=u(t,e),a={x:n,y:o},p=await R(e,s),h=g(d(i)),y=m(h);let x=a[y],w=a[h];if(r){const t="y"===y?"bottom":"right";x=f(x+p["y"===y?"top":"left"],x,x-p[t])}if(l){const t="y"===h?"bottom":"right";w=f(w+p["y"===h?"top":"left"],w,w-p[t])}const v=c.fn({...e,[y]:x,[h]:w});return{...v,data:{x:v.x-n,y:v.y-o}}}}},lt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:c,platform:s,elements:a}=e,{mainAxis:f=!0,crossAxis:m=!0,fallbackPlacements:g,fallbackStrategy:v="bestFit",fallbackAxisSideDirection:b="none",flipAlignment:O=!0,...E}=u(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const T=d(i),L=d(c)===c,A=await(null==s.isRTL?void 0:s.isRTL(a.floating)),C=g||(L||!O?[w(c)]:function(t){const e=w(t);return[x(t),e,x(e)]}(c));g||"none"===b||C.push(...function(t,e,n,o){const i=p(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(d(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(x)))),r}(c,O,b,A));const D=[c,...C],S=await R(e,E),P=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(f&&P.push(S[T]),m){const t=function(t,e,n){void 0===n&&(n=!1);const o=p(t),i=y(t),r=h(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=w(l)),[l,w(l)]}(i,l,A);P.push(S[t[0]],S[t[1]])}if(F=[...F,{placement:i,overflows:P}],!P.every((t=>t<=0))){var H,k;const t=((null==(H=r.flip)?void 0:H.index)||0)+1,e=D[t];if(e)return{data:{index:t,overflows:F},reset:{placement:e}};let n=null==(k=F.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:k.placement;if(!n)switch(v){case"bestFit":{var B;const t=null==(B=F.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:B[0];t&&(n=t);break}case"initialPlacement":n=c}if(i!==n)return{reset:{placement:n}}}return{}}}},ct=function(t){return void 0===t&&(t={}),{name:"hide",options:t,async fn(e){const{rects:n}=e,{strategy:o="referenceHidden",...i}=u(t,e);switch(o){case"referenceHidden":{const t=O(await R(e,{...i,elementContext:"reference"}),n.reference);return{data:{referenceHiddenOffsets:t,referenceHidden:E(t)}}}case"escaped":{const t=O(await R(e,{...i,altBoundary:!0}),n.floating);return{data:{escapedOffsets:t,escaped:E(t)}}}default:return{}}}}},st=(t,e,n)=>{const o=new Map,i={platform:ot,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,c=r.filter(Boolean),s=await(null==l.isRTL?void 0:l.isRTL(e));let a=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=b(a,o,s),d=o,p={},m=0;for(let n=0;n<c.length;n++){const{name:r,fn:h}=c[n],{x:g,y,data:x,reset:w}=await h({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:a,platform:l,elements:{reference:t,floating:e}});f=null!=g?g:f,u=null!=y?y:u,p={...p,[r]:{...p[r],...x}},w&&m<=50&&(m++,"object"==typeof w&&(w.placement&&(d=w.placement),w.rects&&(a=!0===w.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):w.rects),({x:f,y:u}=b(a,d,s))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})};const at={openMenu:function(t,e,n,o){var i;let r;r="x"in t?{getBoundingClientRect:()=>({x:t.x,y:t.y,top:t.y,left:t.x,bottom:t.y,right:t.x,width:0,height:0}),parentElement:document.body}:t;const l=(t=>{const e=document.createElement("div");return e.className="nj-menu",e.appendChild(t),e})(e);let c=r.parentElement;"parent"!==n&&(c="string"==typeof n?null!==(i=document.getElementById(n))&&void 0!==i?i:c:n),c.appendChild(l);const s=it(r,l,(()=>{st(r,l,Object.assign(Object.assign({},o),{middleware:[(null==o?void 0:o.offsetOptions)&&T(o.offsetOptions),(null==o?void 0:o.flipOptions)&<(o.flipOptions),(null==o?void 0:o.shiftOptions)&&rt(o.shiftOptions),(null==o?void 0:o.hideOptions)&&ct(o.hideOptions)]})).then((t=>{let{x:e,y:n,middlewareData:i}=t;var r;Object.assign(l.style,{left:`${e}px`,top:`${n}px`}),(null===(r=null==o?void 0:o.hideOptions)||void 0===r?void 0:r.strategy)&&i.hide&&Object.assign(l.style,{visibility:i.hide[o.hideOptions.strategy]?"hidden":"visible"})}))}));return{menu:l,unmount:()=>{c.removeChild(l),s()}}}};return e=e.default})())); | ||
| //# sourceMappingURL=index.js.map |
@@ -1,6 +0,1 @@ | ||
| /** | ||
| * -------------------------------------------------------------------------- | ||
| * NJ: Slider.ts | ||
| * -------------------------------------------------------------------------- | ||
| */ | ||
| import AbstractComponent from '../../globals/ts/abstract-component'; | ||
@@ -26,4 +21,4 @@ export default class Slider extends AbstractComponent { | ||
| private tooltip; | ||
| private currentProgress; | ||
| constructor(element: HTMLElement, options?: {}); | ||
| private addTooltip; | ||
| private setListeners; | ||
@@ -33,3 +28,2 @@ private setTooltipListeners; | ||
| private refreshTooltipValue; | ||
| private replaceTooltip; | ||
| private static getOptions; | ||
@@ -36,0 +30,0 @@ dispose(): void; |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("Slider",[],t):"object"==typeof exports?exports.Slider=t():e.Slider=t()}(window,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>S}),window.NJStore=window.NJStore||[];const o=(()=>{const e=window.NJStore;return{set(t,o,n){void 0===t.key&&(t.key={key:o,id:e.length}),e[t.key.id]=n},get:(t,o)=>(t.key&&o&&void 0===o.id&&(o=t.key),o&&void 0!==o.id?e[o.id]:null),delete(t,o){if(void 0===t.key)return;const n=t.key;n.key===o&&(delete e[n.id],delete t.key)}}})(),n={setData(e,t,n){o.set(e,t,n)},getData:(e,t)=>o.get(e,t),removeData(e,t){o.delete(e,t)}},r=n;class i{constructor(e,t){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!t||t instanceof Element||console.error(Error(`${t} is not an HTML Element`)),this.options=o,this.element=t}static init(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=arguments.length>2?arguments[2]:void 0;const n=[],i=document.querySelectorAll(o);for(let o=0;o<i.length;o++){const s=i[o];if(!s.key||s.key.key!==e.DATA_KEY){const l=new e(i[o],t);s.key||r.setData(i[o],e.DATA_KEY,l),n.push(l)}}return n}}var s,l,a,c;!function(e){e.LIBRARY_LOG_TAG="[FLUID]",e.KEY_PREFIX="nj",e.DATA_API_KEY=".data-api"}(s||(s={})),function(e){e.mouseenter="mouseover",e.mouseleave="mouseout"}(l||(l={})),function(e){e.beforehide="beforehide",e.click="click",e.close="close",e.closed="closed",e.hide="hide",e.hidden="hidden",e.input="input",e.keydown="keydown",e.keyup="keyup",e.onchange="onchange",e.show="show",e.shown="shown",e.inserted="inserted",e.focusin="focusin",e.focusout="focusout",e.mouseenter="mouseenter",e.mouseleave="mouseleave",e.mouseup="mouseup",e.mousedown="mousedown",e.decrement="decrement",e.increment="increment"}(a||(a={})),function(e){e.click="click",e.dblclick="dblclick",e.mouseup="mouseup",e.mousedown="mousedown",e.contextmenu="contextmenu",e.mousewheel="mousewheel",e.DOMMouseScroll="DOMMouseScroll",e.mouseover="mouseover",e.mouseout="mouseout",e.mousemove="mousemove",e.selectstart="selectstart",e.selectend="selectend",e.keydown="keydown",e.keypress="keypress",e.keyup="keyup",e.orientationchange="orientationchange",e.touchstart="touchstart",e.touchmove="touchmove",e.touchend="touchend",e.touchcancel="touchcancel",e.pointerdown="pointerdown",e.pointermove="pointermove",e.pointerup="pointerup",e.pointerleave="pointerleave",e.pointercancel="pointercancel",e.gesturestart="gesturestart",e.gesturechange="gesturechange",e.gestureend="gestureend",e.focus="focus",e.blur="blur",e.change="change",e.reset="reset",e.select="select",e.submit="submit",e.focusin="focusin",e.focusout="focusout",e.load="load",e.unload="unload",e.beforeunload="beforeunload",e.resize="resize",e.move="move",e.DOMContentLoaded="DOMContentLoaded",e.readystatechange="readystatechange",e.error="error",e.abort="abort",e.scroll="scroll"}(c||(c={}));class d{static getUidEvent(e,t){return t&&`${t}::${d.uidEvent++}`||e.uidEvent||d.uidEvent++}static getEvent(e){const t=d.getUidEvent(e);return e.uidEvent=t,d.EVENTREGISTRY[t]=d.EVENTREGISTRY[t]||{}}static fixEvent(e,t){null===e.which&&d.KEYEVENT_REGEX.test(e.type)&&(e.which=null!==e.charCode?e.charCode:e.keyCode),e.delegateTarget=t}static njHandler(e,t){const o=n=>(d.fixEvent(n,e),o.oneOff&&d.off(e,n.type,t),t.apply(e,[n]));return o}static njDelegationHandler(e,t,o){const n=r=>{const i=e.querySelectorAll(t);for(let t=r.target;t&&t!==this;t=t.parentNode)for(let s=i.length;s>=0;s--)if(i[s]===t)return d.fixEvent(r,t),n.oneOff&&d.off(e,r.type,o),o.apply(t,[r]);return null};return n}static findHandler(e,t){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;for(const n in e){if(!Object.prototype.hasOwnProperty.call(e,n))continue;const r=e[n];if(r.originalHandler===t&&r.delegationSelector===o)return e[n]}return null}static normalizeParams(e,t,o){const n="string"==typeof t,r=n?o:t;let i=e.replace(d.STRIPNAME_REGEX,"");const s=l[i];s&&(i=s);return"string"==typeof c[i]||(i=e),[n,r,i]}static addHandler(e,t,o,n,r){if("string"!=typeof t||null==e)return;o||(o=n,n=null);const i=d.getEvent(e);for(const s of t.split(" ")){const[t,l,a]=d.normalizeParams(s,o,n),c=i[a]||(i[a]={}),u=d.findHandler(c,l,t?o:null);if(u)return void(u.oneOff=u.oneOff&&r);const p=d.getUidEvent(l,s.replace(d.NAMESPACE_REGEX,"")),m=t?d.njDelegationHandler(e,o,n):d.njHandler(e,o);m.delegationSelector=t?o:null,m.originalHandler=l,m.oneOff=r,m.uidEvent=p,c[p]=m,e.addEventListener(a,m,t)}}static removeHandler(e,t,o,n,r){const i=d.findHandler(t[o],n,r);null!==i&&(e.removeEventListener(o,i,Boolean(r)),delete t[o][i.uidEvent])}static removeNamespacedHandlers(e,t,o,n){const r=t[o]||{};for(const i in r)if(Object.prototype.hasOwnProperty.call(r,i)&&i.indexOf(n)>-1){const n=r[i];d.removeHandler(e,t,o,n.originalHandler,n.delegationSelector)}}static on(e,t,o,n){d.addHandler(e,t,o,n,!1)}static one(e,t,o,n){d.addHandler(e,t,o,n,!0)}static off(e,t,o,n){if("string"!=typeof t||null==e)return;const[r,i,s]=d.normalizeParams(t,o,n),l=s!==t,a=d.getEvent(e);if(void 0!==i){if(!a||!a[s])return;return void d.removeHandler(e,a,s,i,r?o:null)}if("."===t.charAt(0))for(const o in a)Object.prototype.hasOwnProperty.call(a,o)&&d.removeNamespacedHandlers(e,a,o,t.substr(1));const c=a[s]||{};for(const o in c){if(!Object.prototype.hasOwnProperty.call(c,o))continue;const n=o.replace(d.STRIPUID_REGEX,"");if(!l||t.indexOf(n)>-1){const t=c[o];d.removeHandler(e,a,s,t.originalHandler,t.delegationSelector)}}}static trigger(e,t,o){if("string"!=typeof t||null==e)return null;const n=t.replace(d.STRIPNAME_REGEX,""),r="string"==typeof c[n];let i=null;return r?(i=document.createEvent("HTMLEvents"),i.initEvent(n,true,!0)):i=new window.CustomEvent(t,{bubbles:true,cancelable:!0}),void 0!==o&&Object.keys(o).forEach((e=>{Object.defineProperty(i,e,{get:()=>o[e]})})),e.dispatchEvent(i),i}}d.NAMESPACE_REGEX=/[^.]*(?=\..*)\.|.*/,d.STRIPNAME_REGEX=/\..*/,d.KEYEVENT_REGEX=/^key/,d.STRIPUID_REGEX=/::\d+$/,d.EVENTREGISTRY={},d.uidEvent=1;const u=d;const p={getDataAttributes(e){if(null==e)return{};let t={};if(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"dataset"))t=Object.assign({},e.dataset);else for(let o=0;o<e.attributes.length;o++){const n=e.attributes[o];if(-1!==n.nodeName.indexOf("data-")){const e=n.nodeName.substring(5).replace(/-./g,(e=>e.charAt(1).toUpperCase()));t[e]=n.nodeValue}}return Object.keys(t).forEach((e=>{var o;t[e]="true"===(o=t[e])||"false"!==o&&("null"===o?null:o===Number(o).toString()?Number(o):""===o?null:o)})),t},toggleClass(e,t){null!=e&&(e.classList.contains(t)?e.classList.remove(t):e.classList.add(t))},mergeExtended(e,t,o){for(const n in t)Object.prototype.hasOwnProperty.call(t,n)&&(o&&"[object Object]"===Object.prototype.toString.call(t[n])?e[n]=p.extend(e[n],t[n]):e[n]=t[n]);return e},extend(){let e={},t=!1,o=0;for("[object Boolean]"===Object.prototype.toString.call(arguments.length<=0?void 0:arguments[0])&&(t=arguments.length<=0?void 0:arguments[0],o++);o<arguments.length;o++)e=p.mergeExtended(e,o<0||arguments.length<=o?void 0:arguments[o],t);return e},createHtmlNode:e=>(new DOMParser).parseFromString(e,"text/html").body.firstChild},m=p;const h={TRANSITION_END:"transitionend",getUID(e){do{e+=~~(1e6*Math.random())}while(document.getElementById(e));return e},getSelectorFromElement(e){let t=e.getAttribute("data-target");if(!t||"#"===t){const o=e.getAttribute("href");t=o&&"#"!==o?o.trim():""}try{return document.querySelector(t)?t:null}catch(e){return null}},getTransitionDurationFromElement(e){if(!e)return 0;let t=window.getComputedStyle(e).transitionDuration,o=window.getComputedStyle(e).transitionDelay;const n=parseFloat(t),r=parseFloat(o);return n||r?(t=t.split(",")[0],o=o.split(",")[0],1e3*(parseFloat(t)+parseFloat(o))):0},reflow:e=>e.offsetHeight,triggerTransitionEnd(e){const t=new CustomEvent(h.TRANSITION_END,{});e.dispatchEvent(t)},isElement:e=>(e[0]||e).nodeType,emulateTransitionEnd(e,t){let o=!1;const n=t+5;e.addEventListener(h.TRANSITION_END,(function t(){o=!0,e.removeEventListener(h.TRANSITION_END,t)})),setTimeout((()=>{o||h.triggerTransitionEnd(e)}),n)},typeCheckConfig(e,t,o){for(const r in o)if(Object.prototype.hasOwnProperty.call(o,r)){const i=o[r],s=t[r],l=s&&h.isElement(s)?"element":(n=s,{}.toString.call(n).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(i).test(l))throw new Error(`${e.toUpperCase()}: Option "${r}" provided type "${l}" but expected type "${i}".`)}var n},makeArray:e=>null==e?[]:[].slice.call(e),findShadowRoot(e){if(!document.documentElement.attachShadow)return null;if("function"==typeof e.getRootNode){const t=e.getRootNode();return t instanceof ShadowRoot?t:null}return e instanceof ShadowRoot?e:e.parentNode?h.findShadowRoot(e.parentElement):null},throttle(e,t,o,n,r){let i,s,l,a=null,c=0;const d=()=>{c=Date.now(),a=null,l=e.apply(s,i)};return()=>{const u=Date.now();c||o||(c=u);const p=t-(u-c);return s=r||this,i=arguments,p<=0?(clearTimeout(a),a=null,c=u,l=e.apply(s,i)):!a&&n&&(a=setTimeout(d,p)),l}},coerceBool:e=>Boolean(e)},f=h;Math.min,Math.max,Math.round,Math.floor;const E={hasArrow:!0,isColorInverse:!1,placement:"top",isAlwaysDisplayed:!1,isContentHtml:!1},g={element:"nj-tooltip",modifier:{withoutArrow:"nj-tooltip--without-arrow",inverse:"nj-tooltip--inverse",placed:e=>`nj-tooltip--${e}`}},y={element:"nj-tooltip__arrow"},v={element:"nj-tooltip__inner"},T=(e,t)=>{"boolean"==typeof t.hasArrow&&(t.hasArrow?e.classList.remove(g.modifier.withoutArrow):e.classList.add(g.modifier.withoutArrow)),"boolean"==typeof t.isColorInverse&&(t.isColorInverse?e.classList.add(g.modifier.inverse):e.classList.remove(g.modifier.inverse)),"string"==typeof t.placement&&(e.classList.remove(g.modifier.placed("top")),e.classList.remove(g.modifier.placed("right")),e.classList.remove(g.modifier.placed("bottom")),e.classList.remove(g.modifier.placed("left")),e.classList.add(g.modifier.placed(t.placement)))},w=function(e,t){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:E.isContentHtml;const n=e.querySelector(`.${v.element}`);n&&("string"==typeof t?o?n.innerHTML=t:n.innerText=t:n.appendChild(t))},b=(e,t)=>{const o=document.createElement("div");o.className=g.element,o.role="tooltip",o.id=f.getUID("tooltip-");const n=document.createElement("div");n.className=y.element;const r=document.createElement("div");return r.className=v.element,T(o,Object.assign({},E,null!=t?t:{})),o.appendChild(n),o.appendChild(r),w(o,e,t.isContentHtml),{tooltip:o,arrowElement:n}};class O extends i{constructor(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};super(O,e,O.getOptions(e,t)),this.dataId=Number(String(Math.random()).slice(2))+Date.now(),this.input=this.element.querySelector(O.SELECTOR.input),this.element.setAttribute("data-id",this.dataId.toString()),this.refreshProgressValue(),this.setListeners(),this.options.tooltip&&(this.addTooltip(),this.setTooltipListeners()),r.setData(e,O.DATA_KEY,this)}addTooltip(){const{tooltip:e}=b("",{placement:"top",hasArrow:!1});this.tooltip=e;this.tooltip.key={key:"",id:""},this.element.insertBefore(this.tooltip,this.element.querySelector(O.SELECTOR.label)),this.refreshTooltipValue()}setListeners(){u.on(this.element,"input change keyup",(()=>{this.refreshProgressValue()}))}setTooltipListeners(){u.on(this.element,"input change keyup",(()=>{this.refreshTooltipValue()}));let e=!1;u.on(document,"resize",(()=>{e||(this.refreshTooltipValue(),e=!0,setTimeout((()=>{e=!1}),100))}))}refreshProgressValue(){const e=document.querySelector(`[data-id='${this.dataId}']`);if(e){const t=parseFloat(this.input.max)||O.PERCENT_CONV,o=parseFloat(this.input.min)||0,n=parseFloat(this.input.value),r=O.PERCENT_CONV*(n-o)/(t-o);e.style.setProperty("--nj-slider-track-position",`${r}% 100%`)}}refreshTooltipValue(){w(this.tooltip,this.input.value),this.replaceTooltip()}replaceTooltip(){const e=""===this.input.min?0:parseFloat(this.input.min),t=""===this.input.max?100:parseFloat(this.input.max),o=(parseFloat(this.input.value)-e)/(t-e);this.tooltip.style.left=o*(this.input.offsetWidth-O.THUMB_WIDTH)-this.tooltip.offsetWidth/2+O.THUMB_WIDTH/2+"px"}static getOptions(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t=Object.assign(Object.assign(Object.assign({},O.DEFAULT_OPTIONS),m.getDataAttributes(e)),"object"==typeof t&&t?t:{}),f.typeCheckConfig(O.NAME,t,O.DEFAULT_TYPE),t}dispose(){u.off(this.element,"input change keyup"),u.off(document,"resize"),r.removeData(this.element,O.DATA_KEY),this.element=null}static getInstance(e){return r.getData(e,O.DATA_KEY)}static init(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return super.init(this,e,O.SELECTOR.default)}}O.NAME=`${s.KEY_PREFIX}-slider`,O.DATA_KEY=`${s.KEY_PREFIX}.slider`,O.CLASS_NAME=`${s.KEY_PREFIX}-slider`,O.SELECTOR={default:`.${O.CLASS_NAME}`,input:"input",label:"label"},O.THUMB_WIDTH=16,O.DEFAULT_TYPE={tooltip:"boolean"},O.DEFAULT_OPTIONS={tooltip:!1},O.PERCENT_CONV=100,O.PSEUDO_ELEMS=["webkit-slider-runnable","moz-range","ms"];const S=O;return t=t.default})())); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Slider",[],e):"object"==typeof exports?exports.Slider=e():t.Slider=e()}(window,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>Ot}),window.NJStore=window.NJStore||[];const n=(()=>{const t=window.NJStore;return{set(e,n,o){void 0===e.key&&(e.key={key:n,id:t.length}),t[e.key.id]=o},get:(e,n)=>(e.key&&n&&void 0===n.id&&(n=e.key),n&&void 0!==n.id?t[n.id]:null),delete(e,n){if(void 0===e.key)return;const o=e.key;o.key===n&&(delete t[o.id],delete e.key)}}})(),o={setData(t,e,o){n.set(t,e,o)},getData:(t,e)=>n.get(t,e),removeData(t,e){n.delete(t,e)}},i=o;class r{constructor(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};!e||e instanceof Element||console.error(Error(`${e} is not an HTML Element`)),this.options=n,this.element=e}static init(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=arguments.length>2?arguments[2]:void 0;const o=[],r=document.querySelectorAll(n);for(let n=0;n<r.length;n++){const l=r[n];if(!l.key||l.key.key!==t.DATA_KEY){const s=new t(r[n],e);l.key||i.setData(r[n],t.DATA_KEY,s),o.push(s)}}return o}}var l,s,a,c;!function(t){t.LIBRARY_LOG_TAG="[FLUID]",t.KEY_PREFIX="nj",t.DATA_API_KEY=".data-api"}(l||(l={})),function(t){t.mouseenter="mouseover",t.mouseleave="mouseout"}(s||(s={})),function(t){t.beforehide="beforehide",t.click="click",t.close="close",t.closed="closed",t.hide="hide",t.hidden="hidden",t.input="input",t.keydown="keydown",t.keyup="keyup",t.onchange="onchange",t.show="show",t.shown="shown",t.inserted="inserted",t.focusin="focusin",t.focusout="focusout",t.mouseenter="mouseenter",t.mouseleave="mouseleave",t.mouseup="mouseup",t.mousedown="mousedown",t.decrement="decrement",t.increment="increment"}(a||(a={})),function(t){t.click="click",t.dblclick="dblclick",t.mouseup="mouseup",t.mousedown="mousedown",t.contextmenu="contextmenu",t.mousewheel="mousewheel",t.DOMMouseScroll="DOMMouseScroll",t.mouseover="mouseover",t.mouseout="mouseout",t.mousemove="mousemove",t.selectstart="selectstart",t.selectend="selectend",t.keydown="keydown",t.keypress="keypress",t.keyup="keyup",t.orientationchange="orientationchange",t.touchstart="touchstart",t.touchmove="touchmove",t.touchend="touchend",t.touchcancel="touchcancel",t.pointerdown="pointerdown",t.pointermove="pointermove",t.pointerup="pointerup",t.pointerleave="pointerleave",t.pointercancel="pointercancel",t.gesturestart="gesturestart",t.gesturechange="gesturechange",t.gestureend="gestureend",t.focus="focus",t.blur="blur",t.change="change",t.reset="reset",t.select="select",t.submit="submit",t.focusin="focusin",t.focusout="focusout",t.load="load",t.unload="unload",t.beforeunload="beforeunload",t.resize="resize",t.move="move",t.DOMContentLoaded="DOMContentLoaded",t.readystatechange="readystatechange",t.error="error",t.abort="abort",t.scroll="scroll"}(c||(c={}));class u{static getUidEvent(t,e){return e&&`${e}::${u.uidEvent++}`||t.uidEvent||u.uidEvent++}static getEvent(t){const e=u.getUidEvent(t);return t.uidEvent=e,u.EVENTREGISTRY[e]=u.EVENTREGISTRY[e]||{}}static fixEvent(t,e){null===t.which&&u.KEYEVENT_REGEX.test(t.type)&&(t.which=null!==t.charCode?t.charCode:t.keyCode),t.delegateTarget=e}static njHandler(t,e){const n=o=>(u.fixEvent(o,t),n.oneOff&&u.off(t,o.type,e),e.apply(t,[o]));return n}static njDelegationHandler(t,e,n){const o=i=>{const r=t.querySelectorAll(e);for(let e=i.target;e&&e!==this;e=e.parentNode)for(let l=r.length;l>=0;l--)if(r[l]===e)return u.fixEvent(i,e),o.oneOff&&u.off(t,i.type,n),n.apply(e,[i]);return null};return o}static findHandler(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;for(const o in t){if(!Object.prototype.hasOwnProperty.call(t,o))continue;const i=t[o];if(i.originalHandler===e&&i.delegationSelector===n)return t[o]}return null}static normalizeParams(t,e,n){const o="string"==typeof e,i=o?n:e;let r=t.replace(u.STRIPNAME_REGEX,"");const l=s[r];l&&(r=l);return"string"==typeof c[r]||(r=t),[o,i,r]}static addHandler(t,e,n,o,i){if("string"!=typeof e||null==t)return;n||(n=o,o=null);const r=u.getEvent(t);for(const l of e.split(" ")){const[e,s,a]=u.normalizeParams(l,n,o),c=r[a]||(r[a]={}),d=u.findHandler(c,s,e?n:null);if(d)return void(d.oneOff=d.oneOff&&i);const f=u.getUidEvent(s,l.replace(u.NAMESPACE_REGEX,"")),p=e?u.njDelegationHandler(t,n,o):u.njHandler(t,n);p.delegationSelector=e?n:null,p.originalHandler=s,p.oneOff=i,p.uidEvent=f,c[f]=p,t.addEventListener(a,p,e)}}static removeHandler(t,e,n,o,i){const r=u.findHandler(e[n],o,i);null!==r&&(t.removeEventListener(n,r,Boolean(i)),delete e[n][r.uidEvent])}static removeNamespacedHandlers(t,e,n,o){const i=e[n]||{};for(const r in i)if(Object.prototype.hasOwnProperty.call(i,r)&&r.indexOf(o)>-1){const o=i[r];u.removeHandler(t,e,n,o.originalHandler,o.delegationSelector)}}static on(t,e,n,o){u.addHandler(t,e,n,o,!1)}static one(t,e,n,o){u.addHandler(t,e,n,o,!0)}static off(t,e,n,o){if("string"!=typeof e||null==t)return;const[i,r,l]=u.normalizeParams(e,n,o),s=l!==e,a=u.getEvent(t);if(void 0!==r){if(!a||!a[l])return;return void u.removeHandler(t,a,l,r,i?n:null)}if("."===e.charAt(0))for(const n in a)Object.prototype.hasOwnProperty.call(a,n)&&u.removeNamespacedHandlers(t,a,n,e.substr(1));const c=a[l]||{};for(const n in c){if(!Object.prototype.hasOwnProperty.call(c,n))continue;const o=n.replace(u.STRIPUID_REGEX,"");if(!s||e.indexOf(o)>-1){const e=c[n];u.removeHandler(t,a,l,e.originalHandler,e.delegationSelector)}}}static trigger(t,e,n){if("string"!=typeof e||null==t)return null;const o=e.replace(u.STRIPNAME_REGEX,""),i="string"==typeof c[o];let r=null;return i?(r=document.createEvent("HTMLEvents"),r.initEvent(o,true,!0)):r=new window.CustomEvent(e,{bubbles:true,cancelable:!0}),void 0!==n&&Object.keys(n).forEach((t=>{Object.defineProperty(r,t,{get:()=>n[t]})})),t.dispatchEvent(r),r}}u.NAMESPACE_REGEX=/[^.]*(?=\..*)\.|.*/,u.STRIPNAME_REGEX=/\..*/,u.KEYEVENT_REGEX=/^key/,u.STRIPUID_REGEX=/::\d+$/,u.EVENTREGISTRY={},u.uidEvent=1;const d=u;const f={getDataAttributes(t){if(null==t)return{};let e={};if(Object.getOwnPropertyDescriptor(HTMLElement.prototype,"dataset"))e=Object.assign({},t.dataset);else for(let n=0;n<t.attributes.length;n++){const o=t.attributes[n];if(-1!==o.nodeName.indexOf("data-")){const t=o.nodeName.substring(5).replace(/-./g,(t=>t.charAt(1).toUpperCase()));e[t]=o.nodeValue}}return Object.keys(e).forEach((t=>{var n;e[t]="true"===(n=e[t])||"false"!==n&&("null"===n?null:n===Number(n).toString()?Number(n):""===n?null:n)})),e},toggleClass(t,e){null!=t&&(t.classList.contains(e)?t.classList.remove(e):t.classList.add(e))},mergeExtended(t,e,n){for(const o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n&&"[object Object]"===Object.prototype.toString.call(e[o])?t[o]=f.extend(t[o],e[o]):t[o]=e[o]);return t},extend(){let t={},e=!1,n=0;for("[object Boolean]"===Object.prototype.toString.call(arguments.length<=0?void 0:arguments[0])&&(e=arguments.length<=0?void 0:arguments[0],n++);n<arguments.length;n++)t=f.mergeExtended(t,n<0||arguments.length<=n?void 0:arguments[n],e);return t},createHtmlNode:t=>(new DOMParser).parseFromString(t,"text/html").body.firstChild},p=f;const h={TRANSITION_END:"transitionend",getUID(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement(t){let e=t.getAttribute("data-target");if(!e||"#"===e){const n=t.getAttribute("href");e=n&&"#"!==n?n.trim():""}try{return document.querySelector(e)?e:null}catch(t){return null}},getTransitionDurationFromElement(t){if(!t)return 0;let e=window.getComputedStyle(t).transitionDuration,n=window.getComputedStyle(t).transitionDelay;const o=parseFloat(e),i=parseFloat(n);return o||i?(e=e.split(",")[0],n=n.split(",")[0],1e3*(parseFloat(e)+parseFloat(n))):0},reflow:t=>t.offsetHeight,triggerTransitionEnd(t){const e=new CustomEvent(h.TRANSITION_END,{});t.dispatchEvent(e)},isElement:t=>(t[0]||t).nodeType,emulateTransitionEnd(t,e){let n=!1;const o=e+5;t.addEventListener(h.TRANSITION_END,(function e(){n=!0,t.removeEventListener(h.TRANSITION_END,e)})),setTimeout((()=>{n||h.triggerTransitionEnd(t)}),o)},typeCheckConfig(t,e,n){for(const i in n)if(Object.prototype.hasOwnProperty.call(n,i)){const r=n[i],l=e[i],s=l&&h.isElement(l)?"element":(o=l,{}.toString.call(o).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(r).test(s))throw new Error(`${t.toUpperCase()}: Option "${i}" provided type "${s}" but expected type "${r}".`)}var o},makeArray:t=>null==t?[]:[].slice.call(t),findShadowRoot(t){if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){const e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?h.findShadowRoot(t.parentElement):null},throttle(t,e,n,o,i){let r,l,s,a=null,c=0;const u=()=>{c=Date.now(),a=null,s=t.apply(l,r)};return()=>{const d=Date.now();c||n||(c=d);const f=e-(d-c);return l=i||this,r=arguments,f<=0?(clearTimeout(a),a=null,c=d,s=t.apply(l,r)):!a&&o&&(a=setTimeout(u,f)),s}},coerceBool:t=>Boolean(t)},m=h,g=Math.min,y=Math.max,E=Math.round,v=Math.floor,w=t=>({x:t,y:t}),b={left:"right",right:"left",bottom:"top",top:"bottom"},x={start:"end",end:"start"};function T(t,e){return"function"==typeof t?t(e):t}function O(t){return t.split("-")[0]}function R(t){return t.split("-")[1]}function A(t){return"y"===t?"height":"width"}function S(t){return["top","bottom"].includes(O(t))?"y":"x"}function D(t){return"x"===S(t)?"y":"x"}function L(t){return t.replace(/start|end/g,(t=>x[t]))}function P(t){return t.replace(/left|right|bottom|top/g,(t=>b[t]))}function C(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function N(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function _(t,e,n){let{reference:o,floating:i}=t;const r=S(e),l=D(e),s=A(l),a=O(e),c="y"===r,u=o.x+o.width/2-i.width/2,d=o.y+o.height/2-i.height/2,f=o[s]/2-i[s]/2;let p;switch(a){case"top":p={x:u,y:o.y-i.height};break;case"bottom":p={x:u,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:d};break;case"left":p={x:o.x-i.width,y:d};break;default:p={x:o.x,y:o.y}}switch(R(e)){case"start":p[l]-=f*(n&&c?-1:1);break;case"end":p[l]+=f*(n&&c?-1:1)}return p}async function k(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:s,strategy:a}=t,{boundary:c="clippingAncestors",rootBoundary:u="viewport",elementContext:d="floating",altBoundary:f=!1,padding:p=0}=T(e,t),h=C(p),m=s[f?"floating"===d?"reference":"floating":d],g=N(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(m)))||n?m:m.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:c,rootBoundary:u,strategy:a})),y="floating"===d?{...l.floating,x:o,y:i}:l.reference,E=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),v=await(null==r.isElement?void 0:r.isElement(E))&&await(null==r.getScale?void 0:r.getScale(E))||{x:1,y:1},w=N(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:y,offsetParent:E,strategy:a}):y);return{top:(g.top-w.top+h.top)/v.y,bottom:(w.bottom-g.bottom+h.bottom)/v.y,left:(g.left-w.left+h.left)/v.x,right:(w.right-g.right+h.right)/v.x}}function H(t){return F(t)?(t.nodeName||"").toLowerCase():"#document"}function j(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function I(t){var e;return null==(e=(F(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function F(t){return t instanceof Node||t instanceof j(t).Node}function M(t){return t instanceof Element||t instanceof j(t).Element}function V(t){return t instanceof HTMLElement||t instanceof j(t).HTMLElement}function $(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof j(t).ShadowRoot)}function Y(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=G(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function B(t){return["table","td","th"].includes(H(t))}function U(t){const e=z(),n=G(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function z(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function X(t){return["html","body","#document"].includes(H(t))}function G(t){return j(t).getComputedStyle(t)}function W(t){return M(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function K(t){if("html"===H(t))return t;const e=t.assignedSlot||t.parentNode||$(t)&&t.host||I(t);return $(e)?e.host:e}function q(t){const e=K(t);return X(e)?t.ownerDocument?t.ownerDocument.body:t.body:V(e)&&Y(e)?e:q(e)}function J(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=q(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=j(i);return r?e.concat(l,l.visualViewport||[],Y(i)?i:[],l.frameElement&&n?J(l.frameElement):[]):e.concat(i,J(i,[],n))}function Q(t){const e=G(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const i=V(t),r=i?t.offsetWidth:n,l=i?t.offsetHeight:o,s=E(n)!==r||E(o)!==l;return s&&(n=r,o=l),{width:n,height:o,$:s}}function Z(t){return M(t)?t:t.contextElement}function tt(t){const e=Z(t);if(!V(e))return w(1);const n=e.getBoundingClientRect(),{width:o,height:i,$:r}=Q(e);let l=(r?E(n.width):n.width)/o,s=(r?E(n.height):n.height)/i;return l&&Number.isFinite(l)||(l=1),s&&Number.isFinite(s)||(s=1),{x:l,y:s}}const et=w(0);function nt(t){const e=j(t);return z()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:et}function ot(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=Z(t);let l=w(1);e&&(o?M(o)&&(l=tt(o)):l=tt(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==j(t))&&e}(r,n,o)?nt(r):w(0);let a=(i.left+s.x)/l.x,c=(i.top+s.y)/l.y,u=i.width/l.x,d=i.height/l.y;if(r){const t=j(r),e=o&&M(o)?j(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=tt(i),e=i.getBoundingClientRect(),o=G(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;a*=t.x,c*=t.y,u*=t.x,d*=t.y,a+=r,c+=l,n=j(i),i=n.frameElement}}return N({width:u,height:d,x:a,y:c})}const it=[":popover-open",":modal"];function rt(t){return it.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function lt(t){return ot(I(t)).left+W(t).scrollLeft}function st(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=j(t),o=I(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,a=0;if(i){r=i.width,l=i.height;const t=z();(!t||t&&"fixed"===e)&&(s=i.offsetLeft,a=i.offsetTop)}return{width:r,height:l,x:s,y:a}}(t,n);else if("document"===e)o=function(t){const e=I(t),n=W(t),o=t.ownerDocument.body,i=y(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),r=y(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let l=-n.scrollLeft+lt(t);const s=-n.scrollTop;return"rtl"===G(o).direction&&(l+=y(e.clientWidth,o.clientWidth)-i),{width:i,height:r,x:l,y:s}}(I(t));else if(M(e))o=function(t,e){const n=ot(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=V(t)?tt(t):w(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=nt(t);o={...e,x:e.x-n.x,y:e.y-n.y}}return N(o)}function at(t,e){const n=K(t);return!(n===e||!M(n)||X(n))&&("fixed"===G(n).position||at(n,e))}function ct(t,e,n){const o=V(e),i=I(e),r="fixed"===n,l=ot(t,!0,r,e);let s={scrollLeft:0,scrollTop:0};const a=w(0);if(o||!o&&!r)if(("body"!==H(e)||Y(i))&&(s=W(e)),o){const t=ot(e,!0,r,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else i&&(a.x=lt(i));return{x:l.left+s.scrollLeft-a.x,y:l.top+s.scrollTop-a.y,width:l.width,height:l.height}}function ut(t,e){return V(t)&&"fixed"!==G(t).position?e?e(t):t.offsetParent:null}function dt(t,e){const n=j(t);if(!V(t)||rt(t))return n;let o=ut(t,e);for(;o&&B(o)&&"static"===G(o).position;)o=ut(o,e);return o&&("html"===H(o)||"body"===H(o)&&"static"===G(o).position&&!U(o))?n:o||function(t){let e=K(t);for(;V(e)&&!X(e);){if(U(e))return e;e=K(e)}return null}(t)||n}const ft={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,l=I(o),s=!!e&&rt(e.floating);if(o===l||s&&r)return n;let a={scrollLeft:0,scrollTop:0},c=w(1);const u=w(0),d=V(o);if((d||!d&&!r)&&(("body"!==H(o)||Y(l))&&(a=W(o)),V(o))){const t=ot(o);c=tt(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-a.scrollLeft*c.x+u.x,y:n.y*c.y-a.scrollTop*c.y+u.y}},getDocumentElement:I,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?function(t,e){const n=e.get(t);if(n)return n;let o=J(t,[],!1).filter((t=>M(t)&&"body"!==H(t))),i=null;const r="fixed"===G(t).position;let l=r?K(t):t;for(;M(l)&&!X(l);){const e=G(l),n=U(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||Y(l)&&!n&&at(t,l))?o=o.filter((t=>t!==l)):i=e,l=K(l)}return e.set(t,o),o}(e,this._c):[].concat(n),o],l=r[0],s=r.reduce(((t,n)=>{const o=st(e,n,i);return t.top=y(o.top,t.top),t.right=g(o.right,t.right),t.bottom=g(o.bottom,t.bottom),t.left=y(o.left,t.left),t}),st(e,l,i));return{width:s.right-s.left,height:s.bottom-s.top,x:s.left,y:s.top}},getOffsetParent:dt,getElementRects:async function(t){const e=this.getOffsetParent||dt,n=this.getDimensions;return{reference:ct(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=Q(t);return{width:e,height:n}},getScale:tt,isElement:M,isRTL:function(t){return"rtl"===G(t).direction}};function pt(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l="function"==typeof ResizeObserver,layoutShift:s="function"==typeof IntersectionObserver,animationFrame:a=!1}=o,c=Z(t),u=i||r?[...c?J(c):[],...J(e)]:[];u.forEach((t=>{i&&t.addEventListener("scroll",n,{passive:!0}),r&&t.addEventListener("resize",n)}));const d=c&&s?function(t,e){let n,o=null;const i=I(t);function r(){var t;clearTimeout(n),null==(t=o)||t.disconnect(),o=null}return function l(s,a){void 0===s&&(s=!1),void 0===a&&(a=1),r();const{left:c,top:u,width:d,height:f}=t.getBoundingClientRect();if(s||e(),!d||!f)return;const p={rootMargin:-v(u)+"px "+-v(i.clientWidth-(c+d))+"px "+-v(i.clientHeight-(u+f))+"px "+-v(c)+"px",threshold:y(0,g(1,a))||1};let h=!0;function m(t){const e=t[0].intersectionRatio;if(e!==a){if(!h)return l();e?l(!1,e):n=setTimeout((()=>{l(!1,1e-7)}),100)}h=!1}try{o=new IntersectionObserver(m,{...p,root:i.ownerDocument})}catch(t){o=new IntersectionObserver(m,p)}o.observe(t)}(!0),r}(c,n):null;let f,p=-1,h=null;l&&(h=new ResizeObserver((t=>{let[o]=t;o&&o.target===c&&h&&(h.unobserve(e),cancelAnimationFrame(p),p=requestAnimationFrame((()=>{var t;null==(t=h)||t.observe(e)}))),n()})),c&&!a&&h.observe(c),h.observe(e));let m=a?ot(t):null;return a&&function e(){const o=ot(t);!m||o.x===m.x&&o.y===m.y&&o.width===m.width&&o.height===m.height||n();m=o,f=requestAnimationFrame(e)}(),n(),()=>{var t;u.forEach((t=>{i&&t.removeEventListener("scroll",n),r&&t.removeEventListener("resize",n)})),null==d||d(),null==(t=h)||t.disconnect(),h=null,a&&cancelAnimationFrame(f)}}const ht=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:s,platform:a,elements:c}=e,{mainAxis:u=!0,crossAxis:d=!0,fallbackPlacements:f,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:m=!0,...g}=T(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const y=O(i),E=O(s)===s,v=await(null==a.isRTL?void 0:a.isRTL(c.floating)),w=f||(E||!m?[P(s)]:function(t){const e=P(t);return[L(t),e,L(e)]}(s));f||"none"===h||w.push(...function(t,e,n,o){const i=R(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(O(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(L)))),r}(s,m,h,v));const b=[s,...w],x=await k(e,g),S=[];let C=(null==(o=r.flip)?void 0:o.overflows)||[];if(u&&S.push(x[y]),d){const t=function(t,e,n){void 0===n&&(n=!1);const o=R(t),i=D(t),r=A(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=P(l)),[l,P(l)]}(i,l,v);S.push(x[t[0]],x[t[1]])}if(C=[...C,{placement:i,overflows:S}],!S.every((t=>t<=0))){var N,_;const t=((null==(N=r.flip)?void 0:N.index)||0)+1,e=b[t];if(e)return{data:{index:t,overflows:C},reset:{placement:e}};let n=null==(_=C.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:_.placement;if(!n)switch(p){case"bestFit":{var H;const t=null==(H=C.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:H[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}},mt=t=>({name:"arrow",options:t,async fn(e){const{x:n,y:o,placement:i,rects:r,platform:l,elements:s,middlewareData:a}=e,{element:c,padding:u=0}=T(t,e)||{};if(null==c)return{};const d=C(u),f={x:n,y:o},p=D(i),h=A(p),m=await l.getDimensions(c),E="y"===p,v=E?"top":"left",w=E?"bottom":"right",b=E?"clientHeight":"clientWidth",x=r.reference[h]+r.reference[p]-f[p]-r.floating[h],O=f[p]-r.reference[p],S=await(null==l.getOffsetParent?void 0:l.getOffsetParent(c));let L=S?S[b]:0;L&&await(null==l.isElement?void 0:l.isElement(S))||(L=s.floating[b]||r.floating[h]);const P=x/2-O/2,N=L/2-m[h]/2-1,_=g(d[v],N),k=g(d[w],N),H=_,j=L-m[h]-k,I=L/2-m[h]/2+P,F=y(H,g(I,j));const M=!a.arrow&&null!=R(i)&&I!==F&&r.reference[h]/2-(I<H?_:k)-m[h]/2<0,V=M?I<H?I-H:I-j:0;return{[p]:f[p]+V,data:{[p]:F,centerOffset:I-F-V,...M&&{alignmentOffset:V}},reset:M}}}),gt=(t,e,n)=>{const o=new Map,i={platform:ft,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,s=r.filter(Boolean),a=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:u,y:d}=_(c,o,a),f=o,p={},h=0;for(let n=0;n<s.length;n++){const{name:r,fn:m}=s[n],{x:g,y,data:E,reset:v}=await m({x:u,y:d,initialPlacement:o,placement:f,strategy:i,middlewareData:p,rects:c,platform:l,elements:{reference:t,floating:e}});u=null!=g?g:u,d=null!=y?y:d,p={...p,[r]:{...p[r],...E}},v&&h<=50&&(h++,"object"==typeof v&&(v.placement&&(f=v.placement),v.rects&&(c=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):v.rects),({x:u,y:d}=_(c,f,a))),n=-1)}return{x:u,y:d,placement:f,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})},yt={hasArrow:!0,isColorInverse:!1,placement:"top",isContentHtml:!1},Et={element:"nj-tooltip",modifier:{withoutArrow:"nj-tooltip--without-arrow",inverse:"nj-tooltip--inverse",placed:t=>`nj-tooltip--${t}`}},vt={element:"nj-tooltip__arrow",modifier:{center:"nj-tooltip__arrow--center"}},wt={element:"nj-tooltip__inner"};class bt{constructor(t,e,n){var o;this._isDisplayed=!1,this.anchorElement=t,this.anchorParentElement=t.parentElement,this.createTooltipElement(),Object.defineProperty(this.anchorElement,"_njTooltip",{value:this,writable:!0});const i=null!=e?e:t.dataset.tooltipContent;this.options=Object.assign({},yt,null!=n?n:{},t.dataset?this.getOptionsFromDataset(t.dataset):{}),this.updateTooltipModifiers(this.options),this.setContent(i,this.options.isContentHtml),"string"==typeof(null===(o=t.dataset)||void 0===o?void 0:o.tooltipAlways)&&this.show()}createTooltipElement(){const t=document.createElement("div");t.className=Et.element,t.role="tooltip",t.id=m.getUID("tooltip-");const e=document.createElement("div");e.className=`${vt.element} ${vt.modifier.center}`,e.ariaHidden="true";const n=document.createElement("div");n.className=wt.element,t.appendChild(e),t.appendChild(n),this.tooltipElement=t,this.arrowElement=e,this.innerElement=n}getOptionsFromDataset(t){const e={};return"string"==typeof t.tooltipArrow&&(e.hasArrow="true"===t.tooltipArrow),"string"==typeof t.tooltipInverse&&(e.isColorInverse="true"===t.tooltipInverse),"string"==typeof t.tooltipPlacement&&(e.placement=t.tooltipPlacement),"string"==typeof t.tooltipHtml&&(e.isContentHtml="true"===t.tooltipHtml),e}updateTooltipModifiers(t){"boolean"==typeof t.hasArrow&&(t.hasArrow?this.tooltipElement.classList.remove(Et.modifier.withoutArrow):this.tooltipElement.classList.add(Et.modifier.withoutArrow)),"boolean"==typeof t.isColorInverse&&(t.isColorInverse?this.tooltipElement.classList.add(Et.modifier.inverse):this.tooltipElement.classList.remove(Et.modifier.inverse)),"string"==typeof t.placement&&(this.tooltipElement.classList.remove(Et.modifier.placed("top")),this.tooltipElement.classList.remove(Et.modifier.placed("right")),this.tooltipElement.classList.remove(Et.modifier.placed("bottom")),this.tooltipElement.classList.remove(Et.modifier.placed("left")),this.tooltipElement.classList.add(Et.modifier.placed(t.placement)))}show(){this._isDisplayed||(this.anchorParentElement.appendChild(this.tooltipElement),this.anchorElement.setAttribute("aria-describedby",this.tooltipElement.id),this._isDisplayed=!0,this.cleanupFunction=pt(this.anchorElement,this.tooltipElement,(()=>{gt(this.anchorElement,this.tooltipElement,{placement:this.options.placement,middleware:[ht(),this.options.hasArrow&&mt({element:this.arrowElement})]}).then((t=>{let{x:e,y:n,placement:o}=t;Object.assign(this.tooltipElement.style,{left:`${e}px`,top:`${n}px`}),this.updateTooltipModifiers({placement:o})}))})))}hide(){var t,e;this._isDisplayed&&(null===(t=this.cleanupFunction)||void 0===t||t.call(this),this.cleanupFunction=null,null===(e=this.anchorElement.parentElement)||void 0===e||e.removeChild(this.tooltipElement),this.anchorElement.removeAttribute("aria-describedby"),this._isDisplayed=!1)}setContent(t){"string"==typeof t?(arguments.length>1&&void 0!==arguments[1]?arguments[1]:yt.isContentHtml)?this.innerElement.innerHTML=t:this.innerElement.innerText=t:this.innerElement.appendChild(t)}updateOptions(t){this.options=Object.assign(Object.assign({},this.options),t),this.updateTooltipModifiers(this.options)}}const xt=(t,e,n)=>new bt(t,e,n);class Tt extends r{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(super(Tt,t,Tt.getOptions(t,e)),this.dataId=Number(String(Math.random()).slice(2))+Date.now(),this.currentProgress=0,this.input=this.element.querySelector(Tt.SELECTOR.input),this.element.setAttribute("data-id",this.dataId.toString()),this.refreshProgressValue(),this.setListeners(),this.options.tooltip){const t=document.createElement("div");t.className="nj-slider__tooltip-anchor",this.element.appendChild(t);const e={parentElement:this.element,setAttribute:(t,e)=>{this.input.setAttribute(t,e)},removeAttribute:t=>{this.input.removeAttribute(t)},contextElement:t,getBoundingClientRect:()=>{const{x:t,y:e,width:n,height:o,top:i,left:r,right:l,bottom:s}=this.input.getBoundingClientRect(),a=this.currentProgress*(-1*Tt.THUMB_WIDTH);return{x:n*this.currentProgress+a+t,y:e,width:Tt.THUMB_WIDTH,height:o,top:i,left:n*this.currentProgress+a+r,right:l,bottom:s}}};this.tooltip=xt(e,this.input.value,{hasArrow:!1,placement:"top"}),this.tooltip.show(),this.setTooltipListeners()}i.setData(t,Tt.DATA_KEY,this)}setListeners(){d.on(this.element,"input change keyup",(()=>{this.refreshProgressValue()}))}setTooltipListeners(){d.on(this.element,"input change keyup",(()=>{this.refreshTooltipValue()}));let t=!1;d.on(document,"resize",(()=>{t||(this.refreshTooltipValue(),t=!0,setTimeout((()=>{t=!1}),100))}))}refreshProgressValue(){const t=document.querySelector(`[data-id='${this.dataId}']`);if(t){const e=parseFloat(this.input.max)||Tt.PERCENT_CONV,n=parseFloat(this.input.min)||0,o=parseFloat(this.input.value);this.currentProgress=(o-n)/(e-n);const i=Tt.PERCENT_CONV*this.currentProgress;t.style.setProperty("--nj-slider-track-position",`${i}% 100%`),t.style.setProperty("--nj-slider-anchor-left",`calc(${i}% + ${this.currentProgress} * -20px + 10px)`)}}refreshTooltipValue(){this.tooltip.setContent(this.input.value)}static getOptions(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return e=Object.assign(Object.assign(Object.assign({},Tt.DEFAULT_OPTIONS),p.getDataAttributes(t)),"object"==typeof e&&e?e:{}),m.typeCheckConfig(Tt.NAME,e,Tt.DEFAULT_TYPE),e}dispose(){var t;null===(t=this.tooltip)||void 0===t||t.hide(),d.off(this.element,"input change keyup"),d.off(document,"resize"),i.removeData(this.element,Tt.DATA_KEY),this.element=null}static getInstance(t){return i.getData(t,Tt.DATA_KEY)}static init(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return super.init(this,t,Tt.SELECTOR.default)}}Tt.NAME=`${l.KEY_PREFIX}-slider`,Tt.DATA_KEY=`${l.KEY_PREFIX}.slider`,Tt.CLASS_NAME=`${l.KEY_PREFIX}-slider`,Tt.SELECTOR={default:`.${Tt.CLASS_NAME}`,input:"input",label:"label"},Tt.THUMB_WIDTH=16,Tt.DEFAULT_TYPE={tooltip:"boolean"},Tt.DEFAULT_OPTIONS={tooltip:!1},Tt.PERCENT_CONV=100,Tt.PSEUDO_ELEMS=["webkit-slider-runnable","moz-range","ms"];const Ot=Tt;return e=e.default})())); | ||
| //# sourceMappingURL=index.js.map |
@@ -17,6 +17,2 @@ import { Side } from '@floating-ui/dom'; | ||
| /** | ||
| * Whether the tooltip should always be displayed or only on hover/focus | ||
| */ | ||
| isAlwaysDisplayed?: boolean; | ||
| /** | ||
| * Whether the provided string content should be interpreted as HTML. | ||
@@ -27,26 +23,45 @@ * Prefer passing content as HTMLElement when possible instead | ||
| } | ||
| export declare class Tooltip { | ||
| private _isDisplayed; | ||
| readonly anchorElement: HTMLElement; | ||
| private readonly anchorParentElement; | ||
| private tooltipElement; | ||
| private arrowElement; | ||
| private innerElement; | ||
| private cleanupFunction?; | ||
| private options; | ||
| constructor(anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions); | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| */ | ||
| private createTooltipElement; | ||
| private getOptionsFromDataset; | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| private updateTooltipModifiers; | ||
| /** | ||
| * Display the tooltip. Make sure to `hide()` it when no longer needed. | ||
| */ | ||
| show(): void; | ||
| /** | ||
| * Hide the tooltip | ||
| */ | ||
| hide(): void; | ||
| /** | ||
| * Update tooltip content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML, | ||
| * prefer passing content as HTMLElement when possible instead. | ||
| * Default to `false`. | ||
| */ | ||
| setContent(content: string | HTMLElement, isContentHTML?: boolean): void; | ||
| /** | ||
| * Update tooltip options | ||
| * @param options | ||
| */ | ||
| updateOptions(options: Omit<ITooltipOptions, 'isContentHtml'>): void; | ||
| } | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param tooltip The tooltip you want to update its classes | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export declare const updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, 'isAlwaysDisplayed' | 'isContentHtml'>) => void; | ||
| /** | ||
| * Update tooltip content | ||
| * @param tooltip The tooltip you want to update its content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML. | ||
| * Prefer passing content as HTMLElement when possible instead | ||
| */ | ||
| export declare const updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export declare const createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, 'isAlwaysDisplayed'>) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| /** | ||
| * Initialize a tooltip anchored to an {@link HTMLElement} | ||
@@ -59,10 +74,7 @@ * | ||
| * | ||
| * @return The initialized tooltip element and the unmount function to call on cleanup | ||
| * @return The tooltip reference for further manipulation | ||
| */ | ||
| export declare const njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement | null; | ||
| unmount: () => void; | ||
| }; | ||
| export declare const njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| /** | ||
| * Initialize all elements matching query selector on given element has tooltip anchor. | ||
| * Initialize all tooltip anchor matching query selector on given element. | ||
| * | ||
@@ -72,24 +84,24 @@ * @param element Parent element on which we will apply query selection. Default to `document.body` | ||
| * | ||
| * @return The initialized tooltip elements and a function to unmount them all | ||
| * @return The initialized tooltip element references and a function to unmount them all | ||
| */ | ||
| export declare const initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| /** | ||
| * Attach listeners to focus and hover events to toggle tooltip | ||
| * @param tooltip The tooltip which will be displayed | ||
| * @param triggerElement The element on which would be attached event listeners. Default to tooltip anchor | ||
| * @return Dismount function to remove event listeners, should be called before disposing the tooltip | ||
| */ | ||
| export declare const displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => (() => void); | ||
| declare const _default: { | ||
| njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement; | ||
| unmount: () => void; | ||
| }; | ||
| updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, "isAlwaysDisplayed">) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, "isAlwaysDisplayed" | "isContentHtml">) => void; | ||
| njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| Tooltip: typeof Tooltip; | ||
| displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => () => void; | ||
| }; | ||
| export default _default; |
@@ -1,2 +0,2 @@ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Tooltip",[],e):"object"==typeof exports?exports.Tooltip=e():t.Tooltip=e()}(window,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>pt});const n=Math.min,o=Math.max,i=Math.round,r=Math.floor,l=t=>({x:t,y:t}),s={left:"right",right:"left",bottom:"top",top:"bottom"},c={start:"end",end:"start"};function a(t,e){return"function"==typeof t?t(e):t}function f(t){return t.split("-")[0]}function u(t){return t.split("-")[1]}function d(t){return"y"===t?"height":"width"}function p(t){return["top","bottom"].includes(f(t))?"y":"x"}function m(t){return"x"===p(t)?"y":"x"}function h(t){return t.replace(/start|end/g,(t=>c[t]))}function g(t){return t.replace(/left|right|bottom|top/g,(t=>s[t]))}function y(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function w(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function v(t,e,n){let{reference:o,floating:i}=t;const r=p(e),l=m(e),s=d(l),c=f(e),a="y"===r,h=o.x+o.width/2-i.width/2,g=o.y+o.height/2-i.height/2,y=o[s]/2-i[s]/2;let w;switch(c){case"top":w={x:h,y:o.y-i.height};break;case"bottom":w={x:h,y:o.y+o.height};break;case"right":w={x:o.x+o.width,y:g};break;case"left":w={x:o.x-i.width,y:g};break;default:w={x:o.x,y:o.y}}switch(u(e)){case"start":w[l]-=y*(n&&a?-1:1);break;case"end":w[l]+=y*(n&&a?-1:1)}return w}async function x(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:s,strategy:c}=t,{boundary:f="clippingAncestors",rootBoundary:u="viewport",elementContext:d="floating",altBoundary:p=!1,padding:m=0}=a(e,t),h=y(m),g=s[p?"floating"===d?"reference":"floating":d],v=w(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:f,rootBoundary:u,strategy:c})),x="floating"===d?{...l.floating,x:o,y:i}:l.reference,b=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),E=await(null==r.isElement?void 0:r.isElement(b))&&await(null==r.getScale?void 0:r.getScale(b))||{x:1,y:1},T=w(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:x,offsetParent:b,strategy:c}):x);return{top:(v.top-T.top+h.top)/E.y,bottom:(T.bottom-v.bottom+h.bottom)/E.y,left:(v.left-T.left+h.left)/E.x,right:(T.right-v.right+h.right)/E.x}}function b(t){return L(t)?(t.nodeName||"").toLowerCase():"#document"}function E(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function T(t){var e;return null==(e=(L(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function L(t){return t instanceof Node||t instanceof E(t).Node}function R(t){return t instanceof Element||t instanceof E(t).Element}function A(t){return t instanceof HTMLElement||t instanceof E(t).HTMLElement}function C(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof E(t).ShadowRoot)}function S(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=P(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function D(t){return["table","td","th"].includes(b(t))}function O(t){const e=N(),n=P(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function N(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function F(t){return["html","body","#document"].includes(b(t))}function P(t){return E(t).getComputedStyle(t)}function I(t){return R(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function H(t){if("html"===b(t))return t;const e=t.assignedSlot||t.parentNode||C(t)&&t.host||T(t);return C(e)?e.host:e}function j(t){const e=H(t);return F(e)?t.ownerDocument?t.ownerDocument.body:t.body:A(e)&&S(e)?e:j(e)}function k(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=j(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=E(i);return r?e.concat(l,l.visualViewport||[],S(i)?i:[],l.frameElement&&n?k(l.frameElement):[]):e.concat(i,k(i,[],n))}function B(t){const e=P(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const r=A(t),l=r?t.offsetWidth:n,s=r?t.offsetHeight:o,c=i(n)!==l||i(o)!==s;return c&&(n=l,o=s),{width:n,height:o,$:c}}function _(t){return R(t)?t:t.contextElement}function M(t){const e=_(t);if(!A(e))return l(1);const n=e.getBoundingClientRect(),{width:o,height:r,$:s}=B(e);let c=(s?i(n.width):n.width)/o,a=(s?i(n.height):n.height)/r;return c&&Number.isFinite(c)||(c=1),a&&Number.isFinite(a)||(a=1),{x:c,y:a}}const W=l(0);function $(t){const e=E(t);return N()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:W}function V(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=_(t);let s=l(1);e&&(o?R(o)&&(s=M(o)):s=M(t));const c=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==E(t))&&e}(r,n,o)?$(r):l(0);let a=(i.left+c.x)/s.x,f=(i.top+c.y)/s.y,u=i.width/s.x,d=i.height/s.y;if(r){const t=E(r),e=o&&R(o)?E(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=M(i),e=i.getBoundingClientRect(),o=P(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;a*=t.x,f*=t.y,u*=t.x,d*=t.y,a+=r,f+=l,n=E(i),i=n.frameElement}}return w({width:u,height:d,x:a,y:f})}const z=[":popover-open",":modal"];function q(t){return z.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function U(t){return V(T(t)).left+I(t).scrollLeft}function X(t,e,n){let i;if("viewport"===e)i=function(t,e){const n=E(t),o=T(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,c=0;if(i){r=i.width,l=i.height;const t=N();(!t||t&&"fixed"===e)&&(s=i.offsetLeft,c=i.offsetTop)}return{width:r,height:l,x:s,y:c}}(t,n);else if("document"===e)i=function(t){const e=T(t),n=I(t),i=t.ownerDocument.body,r=o(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),l=o(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let s=-n.scrollLeft+U(t);const c=-n.scrollTop;return"rtl"===P(i).direction&&(s+=o(e.clientWidth,i.clientWidth)-r),{width:r,height:l,x:s,y:c}}(T(t));else if(R(e))i=function(t,e){const n=V(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=A(t)?M(t):l(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=$(t);i={...e,x:e.x-n.x,y:e.y-n.y}}return w(i)}function Y(t,e){const n=H(t);return!(n===e||!R(n)||F(n))&&("fixed"===P(n).position||Y(n,e))}function G(t,e,n){const o=A(e),i=T(e),r="fixed"===n,s=V(t,!0,r,e);let c={scrollLeft:0,scrollTop:0};const a=l(0);if(o||!o&&!r)if(("body"!==b(e)||S(i))&&(c=I(e)),o){const t=V(e,!0,r,e);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else i&&(a.x=U(i));return{x:s.left+c.scrollLeft-a.x,y:s.top+c.scrollTop-a.y,width:s.width,height:s.height}}function J(t,e){return A(t)&&"fixed"!==P(t).position?e?e(t):t.offsetParent:null}function K(t,e){const n=E(t);if(!A(t)||q(t))return n;let o=J(t,e);for(;o&&D(o)&&"static"===P(o).position;)o=J(o,e);return o&&("html"===b(o)||"body"===b(o)&&"static"===P(o).position&&!O(o))?n:o||function(t){let e=H(t);for(;A(e)&&!F(e);){if(O(e))return e;e=H(e)}return null}(t)||n}const Q={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,s=T(o),c=!!e&&q(e.floating);if(o===s||c&&r)return n;let a={scrollLeft:0,scrollTop:0},f=l(1);const u=l(0),d=A(o);if((d||!d&&!r)&&(("body"!==b(o)||S(s))&&(a=I(o)),A(o))){const t=V(o);f=M(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-a.scrollLeft*f.x+u.x,y:n.y*f.y-a.scrollTop*f.y+u.y}},getDocumentElement:T,getClippingRect:function(t){let{element:e,boundary:i,rootBoundary:r,strategy:l}=t;const s=[..."clippingAncestors"===i?function(t,e){const n=e.get(t);if(n)return n;let o=k(t,[],!1).filter((t=>R(t)&&"body"!==b(t))),i=null;const r="fixed"===P(t).position;let l=r?H(t):t;for(;R(l)&&!F(l);){const e=P(l),n=O(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||S(l)&&!n&&Y(t,l))?o=o.filter((t=>t!==l)):i=e,l=H(l)}return e.set(t,o),o}(e,this._c):[].concat(i),r],c=s[0],a=s.reduce(((t,i)=>{const r=X(e,i,l);return t.top=o(r.top,t.top),t.right=n(r.right,t.right),t.bottom=n(r.bottom,t.bottom),t.left=o(r.left,t.left),t}),X(e,c,l));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:K,getElementRects:async function(t){const e=this.getOffsetParent||K,n=this.getDimensions;return{reference:G(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=B(t);return{width:e,height:n}},getScale:M,isElement:R,isRTL:function(t){return"rtl"===P(t).direction}};function Z(t,e,i,l){void 0===l&&(l={});const{ancestorScroll:s=!0,ancestorResize:c=!0,elementResize:a="function"==typeof ResizeObserver,layoutShift:f="function"==typeof IntersectionObserver,animationFrame:u=!1}=l,d=_(t),p=s||c?[...d?k(d):[],...k(e)]:[];p.forEach((t=>{s&&t.addEventListener("scroll",i,{passive:!0}),c&&t.addEventListener("resize",i)}));const m=d&&f?function(t,e){let i,l=null;const s=T(t);function c(){var t;clearTimeout(i),null==(t=l)||t.disconnect(),l=null}return function a(f,u){void 0===f&&(f=!1),void 0===u&&(u=1),c();const{left:d,top:p,width:m,height:h}=t.getBoundingClientRect();if(f||e(),!m||!h)return;const g={rootMargin:-r(p)+"px "+-r(s.clientWidth-(d+m))+"px "+-r(s.clientHeight-(p+h))+"px "+-r(d)+"px",threshold:o(0,n(1,u))||1};let y=!0;function w(t){const e=t[0].intersectionRatio;if(e!==u){if(!y)return a();e?a(!1,e):i=setTimeout((()=>{a(!1,1e-7)}),100)}y=!1}try{l=new IntersectionObserver(w,{...g,root:s.ownerDocument})}catch(t){l=new IntersectionObserver(w,g)}l.observe(t)}(!0),c}(d,i):null;let h,g=-1,y=null;a&&(y=new ResizeObserver((t=>{let[n]=t;n&&n.target===d&&y&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=y)||t.observe(e)}))),i()})),d&&!u&&y.observe(d),y.observe(e));let w=u?V(t):null;return u&&function e(){const n=V(t);!w||n.x===w.x&&n.y===w.y&&n.width===w.width&&n.height===w.height||i();w=n,h=requestAnimationFrame(e)}(),i(),()=>{var t;p.forEach((t=>{s&&t.removeEventListener("scroll",i),c&&t.removeEventListener("resize",i)})),null==m||m(),null==(t=y)||t.disconnect(),y=null,u&&cancelAnimationFrame(h)}}const tt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:s,platform:c,elements:p}=e,{mainAxis:y=!0,crossAxis:w=!0,fallbackPlacements:v,fallbackStrategy:b="bestFit",fallbackAxisSideDirection:E="none",flipAlignment:T=!0,...L}=a(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const R=f(i),A=f(s)===s,C=await(null==c.isRTL?void 0:c.isRTL(p.floating)),S=v||(A||!T?[g(s)]:function(t){const e=g(t);return[h(t),e,h(e)]}(s));v||"none"===E||S.push(...function(t,e,n,o){const i=u(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(f(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(h)))),r}(s,T,E,C));const D=[s,...S],O=await x(e,L),N=[];let F=(null==(o=r.flip)?void 0:o.overflows)||[];if(y&&N.push(O[R]),w){const t=function(t,e,n){void 0===n&&(n=!1);const o=u(t),i=m(t),r=d(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=g(l)),[l,g(l)]}(i,l,C);N.push(O[t[0]],O[t[1]])}if(F=[...F,{placement:i,overflows:N}],!N.every((t=>t<=0))){var P,I;const t=((null==(P=r.flip)?void 0:P.index)||0)+1,e=D[t];if(e)return{data:{index:t,overflows:F},reset:{placement:e}};let n=null==(I=F.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:I.placement;if(!n)switch(b){case"bestFit":{var H;const t=null==(H=F.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:H[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}},et=t=>({name:"arrow",options:t,async fn(e){const{x:i,y:r,placement:l,rects:s,platform:c,elements:f,middlewareData:p}=e,{element:h,padding:g=0}=a(t,e)||{};if(null==h)return{};const w=y(g),v={x:i,y:r},x=m(l),b=d(x),E=await c.getDimensions(h),T="y"===x,L=T?"top":"left",R=T?"bottom":"right",A=T?"clientHeight":"clientWidth",C=s.reference[b]+s.reference[x]-v[x]-s.floating[b],S=v[x]-s.reference[x],D=await(null==c.getOffsetParent?void 0:c.getOffsetParent(h));let O=D?D[A]:0;O&&await(null==c.isElement?void 0:c.isElement(D))||(O=f.floating[A]||s.floating[b]);const N=C/2-S/2,F=O/2-E[b]/2-1,P=n(w[L],F),I=n(w[R],F),H=P,j=O-E[b]-I,k=O/2-E[b]/2+N,B=o(H,n(k,j));const _=!p.arrow&&null!=u(l)&&k!==B&&s.reference[b]/2-(k<H?P:I)-E[b]/2<0,M=_?k<H?k-H:k-j:0;return{[x]:v[x]+M,data:{[x]:B,centerOffset:k-B-M,..._&&{alignmentOffset:M}},reset:_}}}),nt=(t,e,n)=>{const o=new Map,i={platform:Q,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,s=r.filter(Boolean),c=await(null==l.isRTL?void 0:l.isRTL(e));let a=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=v(a,o,c),d=o,p={},m=0;for(let n=0;n<s.length;n++){const{name:r,fn:h}=s[n],{x:g,y,data:w,reset:x}=await h({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:a,platform:l,elements:{reference:t,floating:e}});f=null!=g?g:f,u=null!=y?y:u,p={...p,[r]:{...p[r],...w}},x&&m<=50&&(m++,"object"==typeof x&&(x.placement&&(d=x.placement),x.rects&&(a=!0===x.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):x.rects),({x:f,y:u}=v(a,d,c))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})};const ot={TRANSITION_END:"transitionend",getUID(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement(t){let e=t.getAttribute("data-target");if(!e||"#"===e){const n=t.getAttribute("href");e=n&&"#"!==n?n.trim():""}try{return document.querySelector(e)?e:null}catch(t){return null}},getTransitionDurationFromElement(t){if(!t)return 0;let e=window.getComputedStyle(t).transitionDuration,n=window.getComputedStyle(t).transitionDelay;const o=parseFloat(e),i=parseFloat(n);return o||i?(e=e.split(",")[0],n=n.split(",")[0],1e3*(parseFloat(e)+parseFloat(n))):0},reflow:t=>t.offsetHeight,triggerTransitionEnd(t){const e=new CustomEvent(ot.TRANSITION_END,{});t.dispatchEvent(e)},isElement:t=>(t[0]||t).nodeType,emulateTransitionEnd(t,e){let n=!1;const o=e+5;t.addEventListener(ot.TRANSITION_END,(function e(){n=!0,t.removeEventListener(ot.TRANSITION_END,e)})),setTimeout((()=>{n||ot.triggerTransitionEnd(t)}),o)},typeCheckConfig(t,e,n){for(const i in n)if(Object.prototype.hasOwnProperty.call(n,i)){const r=n[i],l=e[i],s=l&&ot.isElement(l)?"element":(o=l,{}.toString.call(o).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(r).test(s))throw new Error(`${t.toUpperCase()}: Option "${i}" provided type "${s}" but expected type "${r}".`)}var o},makeArray:t=>null==t?[]:[].slice.call(t),findShadowRoot(t){if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){const e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?ot.findShadowRoot(t.parentElement):null},throttle(t,e,n,o,i){let r,l,s,c=null,a=0;const f=()=>{a=Date.now(),c=null,s=t.apply(l,r)};return()=>{const u=Date.now();a||n||(a=u);const d=e-(u-a);return l=i||this,r=arguments,d<=0?(clearTimeout(c),c=null,a=u,s=t.apply(l,r)):!c&&o&&(c=setTimeout(f,d)),s}},coerceBool:t=>Boolean(t)},it=ot,rt={hasArrow:!0,isColorInverse:!1,placement:"top",isAlwaysDisplayed:!1,isContentHtml:!1},lt={element:"nj-tooltip",modifier:{withoutArrow:"nj-tooltip--without-arrow",inverse:"nj-tooltip--inverse",placed:t=>`nj-tooltip--${t}`}},st={element:"nj-tooltip__arrow"},ct={element:"nj-tooltip__inner"},at=(t,e)=>{"boolean"==typeof e.hasArrow&&(e.hasArrow?t.classList.remove(lt.modifier.withoutArrow):t.classList.add(lt.modifier.withoutArrow)),"boolean"==typeof e.isColorInverse&&(e.isColorInverse?t.classList.add(lt.modifier.inverse):t.classList.remove(lt.modifier.inverse)),"string"==typeof e.placement&&(t.classList.remove(lt.modifier.placed("top")),t.classList.remove(lt.modifier.placed("right")),t.classList.remove(lt.modifier.placed("bottom")),t.classList.remove(lt.modifier.placed("left")),t.classList.add(lt.modifier.placed(e.placement)))},ft=function(t,e){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:rt.isContentHtml;const o=t.querySelector(`.${ct.element}`);o&&("string"==typeof e?n?o.innerHTML=e:o.innerText=e:o.appendChild(e))},ut=(t,e)=>{const n=document.createElement("div");n.className=lt.element,n.role="tooltip",n.id=it.getUID("tooltip-");const o=document.createElement("div");o.className=st.element;const i=document.createElement("div");return i.className=ct.element,at(n,Object.assign({},rt,null!=e?e:{})),n.appendChild(o),n.appendChild(i),ft(n,t,e.isContentHtml),{tooltip:n,arrowElement:o}},dt=(t,e,n)=>{const o=null!=e?e:t.dataset.tooltipContent;if(!o)return{tooltip:null,unmount(){}};const i=Object.assign({},rt,null!=n?n:{},(t=>{const e={};return"string"==typeof t.tooltipArrow&&(e.hasArrow="true"===t.tooltipArrow),"string"==typeof t.tooltipInverse&&(e.isColorInverse="true"===t.tooltipInverse),"string"==typeof t.tooltipPlacement&&(e.placement=t.tooltipPlacement),"string"==typeof t.tooltipAlways&&(e.isAlwaysDisplayed="true"===t.tooltipAlways),"string"==typeof t.tooltipHtml&&(e.isContentHtml="true"===t.tooltipHtml),e})(t.dataset)),{tooltip:r,arrowElement:l}=ut(o,i);let s;l.classList.add("nj-tooltip__arrow--center");let c=!1;function a(){t.parentElement.appendChild(r),t.setAttribute("aria-describedby",r.id),c=!0,s=Z(t,r,(()=>{nt(t,r,{placement:i.placement,middleware:[tt(),i.hasArrow&&et({element:l})]}).then((t=>{let{x:e,y:n,placement:o}=t;Object.assign(r.style,{left:`${e}px`,top:`${n}px`}),at(r,{placement:o})}))}))}function f(){var e;c&&(null==s||s(),s=null,null===(e=t.parentElement)||void 0===e||e.removeChild(r),t.removeAttribute("aria-describedby"),c=!1)}return i.isAlwaysDisplayed?a():(t.addEventListener("focusin",a),t.addEventListener("mouseenter",a),t.addEventListener("focusout",f),t.addEventListener("mouseleave",f)),{tooltip:r,unmount:()=>{f(),t.removeEventListener("focusin",a),t.removeEventListener("mouseenter",a),t.removeEventListener("focusout",f),t.removeEventListener("mouseleave",f)}}},pt={njTooltip:dt,updateTooltipContent:ft,createTooltipElement:ut,updateTooltipModifiers:at,initAllTooltips:function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:'[data-toggle="tooltip"]';const n=null!=t?t:document.body,o=[],i=[];return n.querySelectorAll(e).forEach((t=>{const e=dt(t);null!==e.tooltip&&(o.push(e.unmount),i.push(e.tooltip))})),{tooltips:i,unmount:()=>{o.forEach((t=>{t()}))}}}};return e=e.default})())); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Tooltip",[],e):"object"==typeof exports?exports.Tooltip=e():t.Tooltip=e()}(window,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>dt});const n=Math.min,o=Math.max,i=Math.round,r=Math.floor,l=t=>({x:t,y:t}),s={left:"right",right:"left",bottom:"top",top:"bottom"},a={start:"end",end:"start"};function c(t,e){return"function"==typeof t?t(e):t}function f(t){return t.split("-")[0]}function u(t){return t.split("-")[1]}function d(t){return"y"===t?"height":"width"}function p(t){return["top","bottom"].includes(f(t))?"y":"x"}function m(t){return"x"===p(t)?"y":"x"}function h(t){return t.replace(/start|end/g,(t=>a[t]))}function g(t){return t.replace(/left|right|bottom|top/g,(t=>s[t]))}function y(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function w(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}function v(t,e,n){let{reference:o,floating:i}=t;const r=p(e),l=m(e),s=d(l),a=f(e),c="y"===r,h=o.x+o.width/2-i.width/2,g=o.y+o.height/2-i.height/2,y=o[s]/2-i[s]/2;let w;switch(a){case"top":w={x:h,y:o.y-i.height};break;case"bottom":w={x:h,y:o.y+o.height};break;case"right":w={x:o.x+o.width,y:g};break;case"left":w={x:o.x-i.width,y:g};break;default:w={x:o.x,y:o.y}}switch(u(e)){case"start":w[l]-=y*(n&&c?-1:1);break;case"end":w[l]+=y*(n&&c?-1:1)}return w}async function E(t,e){var n;void 0===e&&(e={});const{x:o,y:i,platform:r,rects:l,elements:s,strategy:a}=t,{boundary:f="clippingAncestors",rootBoundary:u="viewport",elementContext:d="floating",altBoundary:p=!1,padding:m=0}=c(e,t),h=y(m),g=s[p?"floating"===d?"reference":"floating":d],v=w(await r.getClippingRect({element:null==(n=await(null==r.isElement?void 0:r.isElement(g)))||n?g:g.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(s.floating)),boundary:f,rootBoundary:u,strategy:a})),E="floating"===d?{...l.floating,x:o,y:i}:l.reference,b=await(null==r.getOffsetParent?void 0:r.getOffsetParent(s.floating)),x=await(null==r.isElement?void 0:r.isElement(b))&&await(null==r.getScale?void 0:r.getScale(b))||{x:1,y:1},T=w(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:E,offsetParent:b,strategy:a}):E);return{top:(v.top-T.top+h.top)/x.y,bottom:(T.bottom-v.bottom+h.bottom)/x.y,left:(v.left-T.left+h.left)/x.x,right:(T.right-v.right+h.right)/x.x}}function b(t){return R(t)?(t.nodeName||"").toLowerCase():"#document"}function x(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function T(t){var e;return null==(e=(R(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function R(t){return t instanceof Node||t instanceof x(t).Node}function L(t){return t instanceof Element||t instanceof x(t).Element}function C(t){return t instanceof HTMLElement||t instanceof x(t).HTMLElement}function O(t){return"undefined"!=typeof ShadowRoot&&(t instanceof ShadowRoot||t instanceof x(t).ShadowRoot)}function A(t){const{overflow:e,overflowX:n,overflowY:o,display:i}=P(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&!["inline","contents"].includes(i)}function D(t){return["table","td","th"].includes(b(t))}function S(t){const e=F(),n=P(t);return"none"!==n.transform||"none"!==n.perspective||!!n.containerType&&"normal"!==n.containerType||!e&&!!n.backdropFilter&&"none"!==n.backdropFilter||!e&&!!n.filter&&"none"!==n.filter||["transform","perspective","filter"].some((t=>(n.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(n.contain||"").includes(t)))}function F(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function N(t){return["html","body","#document"].includes(b(t))}function P(t){return x(t).getComputedStyle(t)}function j(t){return L(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function H(t){if("html"===b(t))return t;const e=t.assignedSlot||t.parentNode||O(t)&&t.host||T(t);return O(e)?e.host:e}function I(t){const e=H(t);return N(e)?t.ownerDocument?t.ownerDocument.body:t.body:C(e)&&A(e)?e:I(e)}function _(t,e,n){var o;void 0===e&&(e=[]),void 0===n&&(n=!0);const i=I(t),r=i===(null==(o=t.ownerDocument)?void 0:o.body),l=x(i);return r?e.concat(l,l.visualViewport||[],A(i)?i:[],l.frameElement&&n?_(l.frameElement):[]):e.concat(i,_(i,[],n))}function k(t){const e=P(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const r=C(t),l=r?t.offsetWidth:n,s=r?t.offsetHeight:o,a=i(n)!==l||i(o)!==s;return a&&(n=l,o=s),{width:n,height:o,$:a}}function M(t){return L(t)?t:t.contextElement}function B(t){const e=M(t);if(!C(e))return l(1);const n=e.getBoundingClientRect(),{width:o,height:r,$:s}=k(e);let a=(s?i(n.width):n.width)/o,c=(s?i(n.height):n.height)/r;return a&&Number.isFinite(a)||(a=1),c&&Number.isFinite(c)||(c=1),{x:a,y:c}}const W=l(0);function $(t){const e=x(t);return F()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:W}function V(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const i=t.getBoundingClientRect(),r=M(t);let s=l(1);e&&(o?L(o)&&(s=B(o)):s=B(t));const a=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==x(t))&&e}(r,n,o)?$(r):l(0);let c=(i.left+a.x)/s.x,f=(i.top+a.y)/s.y,u=i.width/s.x,d=i.height/s.y;if(r){const t=x(r),e=o&&L(o)?x(o):o;let n=t,i=n.frameElement;for(;i&&o&&e!==n;){const t=B(i),e=i.getBoundingClientRect(),o=P(i),r=e.left+(i.clientLeft+parseFloat(o.paddingLeft))*t.x,l=e.top+(i.clientTop+parseFloat(o.paddingTop))*t.y;c*=t.x,f*=t.y,u*=t.x,d*=t.y,c+=r,f+=l,n=x(i),i=n.frameElement}}return w({width:u,height:d,x:c,y:f})}const z=[":popover-open",":modal"];function q(t){return z.some((e=>{try{return t.matches(e)}catch(t){return!1}}))}function U(t){return V(T(t)).left+j(t).scrollLeft}function X(t,e,n){let i;if("viewport"===e)i=function(t,e){const n=x(t),o=T(t),i=n.visualViewport;let r=o.clientWidth,l=o.clientHeight,s=0,a=0;if(i){r=i.width,l=i.height;const t=F();(!t||t&&"fixed"===e)&&(s=i.offsetLeft,a=i.offsetTop)}return{width:r,height:l,x:s,y:a}}(t,n);else if("document"===e)i=function(t){const e=T(t),n=j(t),i=t.ownerDocument.body,r=o(e.scrollWidth,e.clientWidth,i.scrollWidth,i.clientWidth),l=o(e.scrollHeight,e.clientHeight,i.scrollHeight,i.clientHeight);let s=-n.scrollLeft+U(t);const a=-n.scrollTop;return"rtl"===P(i).direction&&(s+=o(e.clientWidth,i.clientWidth)-r),{width:r,height:l,x:s,y:a}}(T(t));else if(L(e))i=function(t,e){const n=V(t,!0,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft,r=C(t)?B(t):l(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:i*r.x,y:o*r.y}}(e,n);else{const n=$(t);i={...e,x:e.x-n.x,y:e.y-n.y}}return w(i)}function Y(t,e){const n=H(t);return!(n===e||!L(n)||N(n))&&("fixed"===P(n).position||Y(n,e))}function G(t,e,n){const o=C(e),i=T(e),r="fixed"===n,s=V(t,!0,r,e);let a={scrollLeft:0,scrollTop:0};const c=l(0);if(o||!o&&!r)if(("body"!==b(e)||A(i))&&(a=j(e)),o){const t=V(e,!0,r,e);c.x=t.x+e.clientLeft,c.y=t.y+e.clientTop}else i&&(c.x=U(i));return{x:s.left+a.scrollLeft-c.x,y:s.top+a.scrollTop-c.y,width:s.width,height:s.height}}function J(t,e){return C(t)&&"fixed"!==P(t).position?e?e(t):t.offsetParent:null}function K(t,e){const n=x(t);if(!C(t)||q(t))return n;let o=J(t,e);for(;o&&D(o)&&"static"===P(o).position;)o=J(o,e);return o&&("html"===b(o)||"body"===b(o)&&"static"===P(o).position&&!S(o))?n:o||function(t){let e=H(t);for(;C(e)&&!N(e);){if(S(e))return e;e=H(e)}return null}(t)||n}const Q={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:i}=t;const r="fixed"===i,s=T(o),a=!!e&&q(e.floating);if(o===s||a&&r)return n;let c={scrollLeft:0,scrollTop:0},f=l(1);const u=l(0),d=C(o);if((d||!d&&!r)&&(("body"!==b(o)||A(s))&&(c=j(o)),C(o))){const t=V(o);f=B(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}return{width:n.width*f.x,height:n.height*f.y,x:n.x*f.x-c.scrollLeft*f.x+u.x,y:n.y*f.y-c.scrollTop*f.y+u.y}},getDocumentElement:T,getClippingRect:function(t){let{element:e,boundary:i,rootBoundary:r,strategy:l}=t;const s=[..."clippingAncestors"===i?function(t,e){const n=e.get(t);if(n)return n;let o=_(t,[],!1).filter((t=>L(t)&&"body"!==b(t))),i=null;const r="fixed"===P(t).position;let l=r?H(t):t;for(;L(l)&&!N(l);){const e=P(l),n=S(l);n||"fixed"!==e.position||(i=null),(r?!n&&!i:!n&&"static"===e.position&&i&&["absolute","fixed"].includes(i.position)||A(l)&&!n&&Y(t,l))?o=o.filter((t=>t!==l)):i=e,l=H(l)}return e.set(t,o),o}(e,this._c):[].concat(i),r],a=s[0],c=s.reduce(((t,i)=>{const r=X(e,i,l);return t.top=o(r.top,t.top),t.right=n(r.right,t.right),t.bottom=n(r.bottom,t.bottom),t.left=o(r.left,t.left),t}),X(e,a,l));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:K,getElementRects:async function(t){const e=this.getOffsetParent||K,n=this.getDimensions;return{reference:G(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,...await n(t.floating)}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=k(t);return{width:e,height:n}},getScale:B,isElement:L,isRTL:function(t){return"rtl"===P(t).direction}};function Z(t,e,i,l){void 0===l&&(l={});const{ancestorScroll:s=!0,ancestorResize:a=!0,elementResize:c="function"==typeof ResizeObserver,layoutShift:f="function"==typeof IntersectionObserver,animationFrame:u=!1}=l,d=M(t),p=s||a?[...d?_(d):[],..._(e)]:[];p.forEach((t=>{s&&t.addEventListener("scroll",i,{passive:!0}),a&&t.addEventListener("resize",i)}));const m=d&&f?function(t,e){let i,l=null;const s=T(t);function a(){var t;clearTimeout(i),null==(t=l)||t.disconnect(),l=null}return function c(f,u){void 0===f&&(f=!1),void 0===u&&(u=1),a();const{left:d,top:p,width:m,height:h}=t.getBoundingClientRect();if(f||e(),!m||!h)return;const g={rootMargin:-r(p)+"px "+-r(s.clientWidth-(d+m))+"px "+-r(s.clientHeight-(p+h))+"px "+-r(d)+"px",threshold:o(0,n(1,u))||1};let y=!0;function w(t){const e=t[0].intersectionRatio;if(e!==u){if(!y)return c();e?c(!1,e):i=setTimeout((()=>{c(!1,1e-7)}),100)}y=!1}try{l=new IntersectionObserver(w,{...g,root:s.ownerDocument})}catch(t){l=new IntersectionObserver(w,g)}l.observe(t)}(!0),a}(d,i):null;let h,g=-1,y=null;c&&(y=new ResizeObserver((t=>{let[n]=t;n&&n.target===d&&y&&(y.unobserve(e),cancelAnimationFrame(g),g=requestAnimationFrame((()=>{var t;null==(t=y)||t.observe(e)}))),i()})),d&&!u&&y.observe(d),y.observe(e));let w=u?V(t):null;return u&&function e(){const n=V(t);!w||n.x===w.x&&n.y===w.y&&n.width===w.width&&n.height===w.height||i();w=n,h=requestAnimationFrame(e)}(),i(),()=>{var t;p.forEach((t=>{s&&t.removeEventListener("scroll",i),a&&t.removeEventListener("resize",i)})),null==m||m(),null==(t=y)||t.disconnect(),y=null,u&&cancelAnimationFrame(h)}}const tt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:i,middlewareData:r,rects:l,initialPlacement:s,platform:a,elements:p}=e,{mainAxis:y=!0,crossAxis:w=!0,fallbackPlacements:v,fallbackStrategy:b="bestFit",fallbackAxisSideDirection:x="none",flipAlignment:T=!0,...R}=c(t,e);if(null!=(n=r.arrow)&&n.alignmentOffset)return{};const L=f(i),C=f(s)===s,O=await(null==a.isRTL?void 0:a.isRTL(p.floating)),A=v||(C||!T?[g(s)]:function(t){const e=g(t);return[h(t),e,h(e)]}(s));v||"none"===x||A.push(...function(t,e,n,o){const i=u(t);let r=function(t,e,n){const o=["left","right"],i=["right","left"],r=["top","bottom"],l=["bottom","top"];switch(t){case"top":case"bottom":return n?e?i:o:e?o:i;case"left":case"right":return e?r:l;default:return[]}}(f(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(h)))),r}(s,T,x,O));const D=[s,...A],S=await E(e,R),F=[];let N=(null==(o=r.flip)?void 0:o.overflows)||[];if(y&&F.push(S[L]),w){const t=function(t,e,n){void 0===n&&(n=!1);const o=u(t),i=m(t),r=d(i);let l="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(l=g(l)),[l,g(l)]}(i,l,O);F.push(S[t[0]],S[t[1]])}if(N=[...N,{placement:i,overflows:F}],!F.every((t=>t<=0))){var P,j;const t=((null==(P=r.flip)?void 0:P.index)||0)+1,e=D[t];if(e)return{data:{index:t,overflows:N},reset:{placement:e}};let n=null==(j=N.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:j.placement;if(!n)switch(b){case"bestFit":{var H;const t=null==(H=N.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:H[0];t&&(n=t);break}case"initialPlacement":n=s}if(i!==n)return{reset:{placement:n}}}return{}}}},et=t=>({name:"arrow",options:t,async fn(e){const{x:i,y:r,placement:l,rects:s,platform:a,elements:f,middlewareData:p}=e,{element:h,padding:g=0}=c(t,e)||{};if(null==h)return{};const w=y(g),v={x:i,y:r},E=m(l),b=d(E),x=await a.getDimensions(h),T="y"===E,R=T?"top":"left",L=T?"bottom":"right",C=T?"clientHeight":"clientWidth",O=s.reference[b]+s.reference[E]-v[E]-s.floating[b],A=v[E]-s.reference[E],D=await(null==a.getOffsetParent?void 0:a.getOffsetParent(h));let S=D?D[C]:0;S&&await(null==a.isElement?void 0:a.isElement(D))||(S=f.floating[C]||s.floating[b]);const F=O/2-A/2,N=S/2-x[b]/2-1,P=n(w[R],N),j=n(w[L],N),H=P,I=S-x[b]-j,_=S/2-x[b]/2+F,k=o(H,n(_,I));const M=!p.arrow&&null!=u(l)&&_!==k&&s.reference[b]/2-(_<H?P:j)-x[b]/2<0,B=M?_<H?_-H:_-I:0;return{[E]:v[E]+B,data:{[E]:k,centerOffset:_-k-B,...M&&{alignmentOffset:B}},reset:M}}}),nt=(t,e,n)=>{const o=new Map,i={platform:Q,...n},r={...i.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:i="absolute",middleware:r=[],platform:l}=n,s=r.filter(Boolean),a=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:i}),{x:f,y:u}=v(c,o,a),d=o,p={},m=0;for(let n=0;n<s.length;n++){const{name:r,fn:h}=s[n],{x:g,y,data:w,reset:E}=await h({x:f,y:u,initialPlacement:o,placement:d,strategy:i,middlewareData:p,rects:c,platform:l,elements:{reference:t,floating:e}});f=null!=g?g:f,u=null!=y?y:u,p={...p,[r]:{...p[r],...w}},E&&m<=50&&(m++,"object"==typeof E&&(E.placement&&(d=E.placement),E.rects&&(c=!0===E.rects?await l.getElementRects({reference:t,floating:e,strategy:i}):E.rects),({x:f,y:u}=v(c,d,a))),n=-1)}return{x:f,y:u,placement:d,strategy:i,middlewareData:p}})(t,e,{...i,platform:r})};const ot={TRANSITION_END:"transitionend",getUID(t){do{t+=~~(1e6*Math.random())}while(document.getElementById(t));return t},getSelectorFromElement(t){let e=t.getAttribute("data-target");if(!e||"#"===e){const n=t.getAttribute("href");e=n&&"#"!==n?n.trim():""}try{return document.querySelector(e)?e:null}catch(t){return null}},getTransitionDurationFromElement(t){if(!t)return 0;let e=window.getComputedStyle(t).transitionDuration,n=window.getComputedStyle(t).transitionDelay;const o=parseFloat(e),i=parseFloat(n);return o||i?(e=e.split(",")[0],n=n.split(",")[0],1e3*(parseFloat(e)+parseFloat(n))):0},reflow:t=>t.offsetHeight,triggerTransitionEnd(t){const e=new CustomEvent(ot.TRANSITION_END,{});t.dispatchEvent(e)},isElement:t=>(t[0]||t).nodeType,emulateTransitionEnd(t,e){let n=!1;const o=e+5;t.addEventListener(ot.TRANSITION_END,(function e(){n=!0,t.removeEventListener(ot.TRANSITION_END,e)})),setTimeout((()=>{n||ot.triggerTransitionEnd(t)}),o)},typeCheckConfig(t,e,n){for(const i in n)if(Object.prototype.hasOwnProperty.call(n,i)){const r=n[i],l=e[i],s=l&&ot.isElement(l)?"element":(o=l,{}.toString.call(o).match(/\s([a-z]+)/i)[1].toLowerCase());if(!new RegExp(r).test(s))throw new Error(`${t.toUpperCase()}: Option "${i}" provided type "${s}" but expected type "${r}".`)}var o},makeArray:t=>null==t?[]:[].slice.call(t),findShadowRoot(t){if(!document.documentElement.attachShadow)return null;if("function"==typeof t.getRootNode){const e=t.getRootNode();return e instanceof ShadowRoot?e:null}return t instanceof ShadowRoot?t:t.parentNode?ot.findShadowRoot(t.parentElement):null},throttle(t,e,n,o,i){let r,l,s,a=null,c=0;const f=()=>{c=Date.now(),a=null,s=t.apply(l,r)};return()=>{const u=Date.now();c||n||(c=u);const d=e-(u-c);return l=i||this,r=arguments,d<=0?(clearTimeout(a),a=null,c=u,s=t.apply(l,r)):!a&&o&&(a=setTimeout(f,d)),s}},coerceBool:t=>Boolean(t)},it=ot,rt={hasArrow:!0,isColorInverse:!1,placement:"top",isContentHtml:!1},lt={element:"nj-tooltip",modifier:{withoutArrow:"nj-tooltip--without-arrow",inverse:"nj-tooltip--inverse",placed:t=>`nj-tooltip--${t}`}},st={element:"nj-tooltip__arrow",modifier:{center:"nj-tooltip__arrow--center"}},at={element:"nj-tooltip__inner"};class ct{constructor(t,e,n){var o;this._isDisplayed=!1,this.anchorElement=t,this.anchorParentElement=t.parentElement,this.createTooltipElement(),Object.defineProperty(this.anchorElement,"_njTooltip",{value:this,writable:!0});const i=null!=e?e:t.dataset.tooltipContent;this.options=Object.assign({},rt,null!=n?n:{},t.dataset?this.getOptionsFromDataset(t.dataset):{}),this.updateTooltipModifiers(this.options),this.setContent(i,this.options.isContentHtml),"string"==typeof(null===(o=t.dataset)||void 0===o?void 0:o.tooltipAlways)&&this.show()}createTooltipElement(){const t=document.createElement("div");t.className=lt.element,t.role="tooltip",t.id=it.getUID("tooltip-");const e=document.createElement("div");e.className=`${st.element} ${st.modifier.center}`,e.ariaHidden="true";const n=document.createElement("div");n.className=at.element,t.appendChild(e),t.appendChild(n),this.tooltipElement=t,this.arrowElement=e,this.innerElement=n}getOptionsFromDataset(t){const e={};return"string"==typeof t.tooltipArrow&&(e.hasArrow="true"===t.tooltipArrow),"string"==typeof t.tooltipInverse&&(e.isColorInverse="true"===t.tooltipInverse),"string"==typeof t.tooltipPlacement&&(e.placement=t.tooltipPlacement),"string"==typeof t.tooltipHtml&&(e.isContentHtml="true"===t.tooltipHtml),e}updateTooltipModifiers(t){"boolean"==typeof t.hasArrow&&(t.hasArrow?this.tooltipElement.classList.remove(lt.modifier.withoutArrow):this.tooltipElement.classList.add(lt.modifier.withoutArrow)),"boolean"==typeof t.isColorInverse&&(t.isColorInverse?this.tooltipElement.classList.add(lt.modifier.inverse):this.tooltipElement.classList.remove(lt.modifier.inverse)),"string"==typeof t.placement&&(this.tooltipElement.classList.remove(lt.modifier.placed("top")),this.tooltipElement.classList.remove(lt.modifier.placed("right")),this.tooltipElement.classList.remove(lt.modifier.placed("bottom")),this.tooltipElement.classList.remove(lt.modifier.placed("left")),this.tooltipElement.classList.add(lt.modifier.placed(t.placement)))}show(){this._isDisplayed||(this.anchorParentElement.appendChild(this.tooltipElement),this.anchorElement.setAttribute("aria-describedby",this.tooltipElement.id),this._isDisplayed=!0,this.cleanupFunction=Z(this.anchorElement,this.tooltipElement,(()=>{nt(this.anchorElement,this.tooltipElement,{placement:this.options.placement,middleware:[tt(),this.options.hasArrow&&et({element:this.arrowElement})]}).then((t=>{let{x:e,y:n,placement:o}=t;Object.assign(this.tooltipElement.style,{left:`${e}px`,top:`${n}px`}),this.updateTooltipModifiers({placement:o})}))})))}hide(){var t,e;this._isDisplayed&&(null===(t=this.cleanupFunction)||void 0===t||t.call(this),this.cleanupFunction=null,null===(e=this.anchorElement.parentElement)||void 0===e||e.removeChild(this.tooltipElement),this.anchorElement.removeAttribute("aria-describedby"),this._isDisplayed=!1)}setContent(t){"string"==typeof t?(arguments.length>1&&void 0!==arguments[1]?arguments[1]:rt.isContentHtml)?this.innerElement.innerHTML=t:this.innerElement.innerText=t:this.innerElement.appendChild(t)}updateOptions(t){this.options=Object.assign(Object.assign({},this.options),t),this.updateTooltipModifiers(this.options)}}const ft=(t,e,n)=>new ct(t,e,n),ut=(t,e)=>{const n=new AbortController,{signal:o}=n,i=null!=e?e:t.anchorElement;return i.addEventListener("focusin",(()=>{t.show()}),{signal:o}),i.addEventListener("mouseenter",(()=>{t.show()}),{signal:o}),i.addEventListener("focusout",(()=>{t.hide()}),{signal:o}),i.addEventListener("mouseleave",(()=>{t.hide()}),{signal:o}),()=>{t.hide(),n.abort()}},dt={njTooltip:ft,initAllTooltips:function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:'[data-toggle="tooltip"]';const n=null!=t?t:document.body,o=[],i=[];n.querySelectorAll(e).forEach((t=>{const e=t,n=ft(e);"true"!==e.dataset.tooltipAlways&&i.push(ut(n)),o.push(n)}));return{tooltips:o,unmount:()=>{i.forEach((t=>t()))}}},Tooltip:ct,displayTooltipOnHoverAndFocus:ut};return e=e.default})())); | ||
| //# sourceMappingURL=index.js.map |
@@ -12,3 +12,3 @@ import './auto-init'; | ||
| import InputNumber from './components/input-number'; | ||
| import Search from './components/search'; | ||
| import { IMenuOptions, openMenu } from './components/menu'; | ||
| import Modal, { BeforeHideEventSource } from './components/modal'; | ||
@@ -18,2 +18,3 @@ import Navbar from './components/navbar'; | ||
| import Radio from './components/radio'; | ||
| import Search from './components/search'; | ||
| import SegmentedControl from './components/segmented-control'; | ||
@@ -26,3 +27,3 @@ import Select from './components/select'; | ||
| import Tag from './components/tag'; | ||
| import { createTooltipElement, initAllTooltips, ITooltipOptions, njTooltip, updateTooltipContent, updateTooltipModifiers } from './components/tooltip'; | ||
| import { displayTooltipOnHoverAndFocus, initAllTooltips, ITooltipOptions, njTooltip, Tooltip } from './components/tooltip'; | ||
| /** | ||
@@ -51,19 +52,13 @@ * Main class of Fluid Design System library | ||
| static readonly Tag: typeof Tag; | ||
| static readonly njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => { | ||
| tooltip: HTMLDivElement; | ||
| unmount: () => void; | ||
| }; | ||
| static readonly createTooltipElement: (content: string | HTMLElement, options?: Omit<ITooltipOptions, "isAlwaysDisplayed">) => { | ||
| tooltip: HTMLDivElement; | ||
| arrowElement: HTMLDivElement; | ||
| }; | ||
| static readonly updateTooltipContent: (tooltip: HTMLDivElement, content: string | HTMLElement, isContentHTML?: boolean) => void; | ||
| static readonly updateTooltipModifiers: (tooltip: HTMLDivElement, options: Omit<ITooltipOptions, "isAlwaysDisplayed" | "isContentHtml">) => void; | ||
| static readonly njTooltip: (anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) => Tooltip; | ||
| static readonly initAllTooltips: (element?: HTMLElement, querySelector?: string) => { | ||
| tooltips: HTMLDivElement[]; | ||
| tooltips: Tooltip[]; | ||
| unmount: () => void; | ||
| }; | ||
| static readonly displayTooltipOnHoverAndFocus: (tooltip: Tooltip, triggerElement?: HTMLElement) => () => void; | ||
| static readonly Tooltip: typeof Tooltip; | ||
| static readonly Password: typeof Password; | ||
| static readonly SelectInput: typeof SelectInput; | ||
| static readonly AutocompleteInput: typeof AutocompleteInput; | ||
| static readonly openMenu: typeof openMenu; | ||
| /** | ||
@@ -74,3 +69,3 @@ * Initialize the components listed in the AUTOINIT_COMPONENTS variable | ||
| } | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, BeforeHideEventSource, njTooltip, updateTooltipModifiers, updateTooltipContent, createTooltipElement, initAllTooltips, ITooltipOptions }; | ||
| export { Alert, Checkbox, Collapse, Dropdown, Fab, Form, Header, InlineMessage, InputNumber, Search, Modal, Navbar, Password, Radio, Select, Sidebar, Slider, Tab, Tag, AutocompleteInput, SelectInput, SegmentedControl, BeforeHideEventSource, njTooltip, initAllTooltips, displayTooltipOnHoverAndFocus, Tooltip, ITooltipOptions, openMenu, IMenuOptions }; | ||
| declare global { | ||
@@ -77,0 +72,0 @@ interface Window { |
| { | ||
| "name": "@engie-group/fluid-design-system", | ||
| "version": "5.10.2", | ||
| "version": "5.11.0", | ||
| "description": "The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.", | ||
@@ -82,3 +82,3 @@ "keywords": [ | ||
| "dependencies": { | ||
| "@engie-group/fluid-design-tokens": "^5.7.0" | ||
| "@engie-group/fluid-design-tokens": "^5.7.1" | ||
| }, | ||
@@ -135,3 +135,3 @@ "devDependencies": { | ||
| }, | ||
| "gitHead": "e2bc7fbc6ddfdce652fd3d09b44ea3397d587f9b" | ||
| "gitHead": "b09f873d0046d81009de0594512e3c25f3bdaabd" | ||
| } |
@@ -6,2 +6,3 @@ /** | ||
| */ | ||
| import { VirtualElement } from '@floating-ui/dom'; | ||
| import AbstractComponent from '../../globals/ts/abstract-component'; | ||
@@ -13,3 +14,3 @@ import Data from '../../globals/ts/data'; | ||
| import Util from '../../globals/ts/util'; | ||
| import { createTooltipElement, updateTooltipContent } from '../tooltip'; | ||
| import { njTooltip, Tooltip } from '../tooltip'; | ||
@@ -45,3 +46,4 @@ export default class Slider extends AbstractComponent { | ||
| private input: HTMLInputElement; | ||
| private tooltip: HTMLDivElement; | ||
| private tooltip: Tooltip; | ||
| private currentProgress = 0; | ||
@@ -58,3 +60,41 @@ constructor(element: HTMLElement, options = {}) { | ||
| if (this.options.tooltip) { | ||
| this.addTooltip(); | ||
| const anchor = document.createElement('div'); | ||
| anchor.className = 'nj-slider__tooltip-anchor'; | ||
| this.element.appendChild(anchor); | ||
| const virtualElement: VirtualElement & { | ||
| parentElement: HTMLElement; | ||
| setAttribute: Element['setAttribute']; | ||
| removeAttribute: Element['removeAttribute']; | ||
| } = { | ||
| parentElement: this.element, | ||
| setAttribute: (name, value) => { | ||
| this.input.setAttribute(name, value); | ||
| }, | ||
| removeAttribute: (name) => { | ||
| this.input.removeAttribute(name); | ||
| }, | ||
| contextElement: anchor, | ||
| getBoundingClientRect: () => { | ||
| const { x, y, width, height, top, left, right, bottom } = this.input.getBoundingClientRect(); | ||
| const correction = this.currentProgress * (-1 * Slider.THUMB_WIDTH); | ||
| return { | ||
| x: width * this.currentProgress + correction + x, | ||
| y, | ||
| width: Slider.THUMB_WIDTH, | ||
| height, | ||
| top, | ||
| left: width * this.currentProgress + correction + left, | ||
| right, | ||
| bottom | ||
| }; | ||
| } | ||
| }; | ||
| this.tooltip = njTooltip(virtualElement as HTMLElement, this.input.value, { | ||
| hasArrow: false, | ||
| placement: 'top' | ||
| }); | ||
| this.tooltip.show(); | ||
| this.setTooltipListeners(); | ||
@@ -66,15 +106,2 @@ } | ||
| private addTooltip(): void { | ||
| const { tooltip } = createTooltipElement('', { | ||
| placement: 'top', | ||
| hasArrow: false | ||
| }); | ||
| this.tooltip = tooltip; | ||
| const abstractTooltip = this.tooltip as HTMLDivElement & { key: Record<string, string> }; | ||
| abstractTooltip.key = { key: '', id: '' }; | ||
| this.element.insertBefore(this.tooltip, this.element.querySelector(Slider.SELECTOR.label)); | ||
| this.refreshTooltipValue(); | ||
| } | ||
| private setListeners(): void { | ||
@@ -111,4 +138,6 @@ EventHandler.on(this.element, 'input change keyup', () => { | ||
| const value = parseFloat(this.input.value); | ||
| const perc = (Slider.PERCENT_CONV * (value - min)) / (max - min); | ||
| this.currentProgress = (value - min) / (max - min); | ||
| const perc = Slider.PERCENT_CONV * this.currentProgress; | ||
| input.style.setProperty('--nj-slider-track-position', `${perc}% 100%`); | ||
| input.style.setProperty('--nj-slider-anchor-left', `calc(${perc}% + ${this.currentProgress} * -20px + 10px)`); | ||
| } | ||
@@ -118,19 +147,5 @@ } | ||
| private refreshTooltipValue(): void { | ||
| updateTooltipContent(this.tooltip, this.input.value); | ||
| this.replaceTooltip(); | ||
| this.tooltip.setContent(this.input.value); | ||
| } | ||
| private replaceTooltip(): void { | ||
| const min = this.input.min === '' ? 0 : parseFloat(this.input.min); | ||
| // eslint-disable-next-line no-magic-numbers | ||
| const max = this.input.max === '' ? 100 : parseFloat(this.input.max); | ||
| const val = parseFloat(this.input.value); | ||
| const pos = (val - min) / (max - min); | ||
| this.tooltip.style.left = `${ | ||
| pos * (this.input.offsetWidth - Slider.THUMB_WIDTH) - this.tooltip.offsetWidth / 2 + Slider.THUMB_WIDTH / 2 | ||
| }px`; | ||
| } | ||
| private static getOptions(element: HTMLElement, options = {}): any { | ||
@@ -149,2 +164,3 @@ options = { | ||
| dispose(): void { | ||
| this.tooltip?.hide(); | ||
| EventHandler.off(this.element, 'input change keyup'); | ||
@@ -151,0 +167,0 @@ EventHandler.off(document, 'resize'); |
@@ -19,6 +19,2 @@ import { arrow, autoUpdate, computePosition, flip, Side } from '@floating-ui/dom'; | ||
| /** | ||
| * Whether the tooltip should always be displayed or only on hover/focus | ||
| */ | ||
| isAlwaysDisplayed?: boolean; | ||
| /** | ||
| * Whether the provided string content should be interpreted as HTML. | ||
@@ -34,3 +30,2 @@ * Prefer passing content as HTMLElement when possible instead | ||
| placement: 'top', | ||
| isAlwaysDisplayed: false, | ||
| isContentHtml: false | ||
@@ -49,3 +44,6 @@ }; | ||
| arrow: { | ||
| element: 'nj-tooltip__arrow' | ||
| element: 'nj-tooltip__arrow', | ||
| modifier: { | ||
| center: 'nj-tooltip__arrow--center' | ||
| } | ||
| }, | ||
@@ -58,116 +56,182 @@ inner: { | ||
| const INIT_QUERY_SELECTOR = '[data-toggle="tooltip"]'; | ||
| export class Tooltip { | ||
| private _isDisplayed = false; | ||
| readonly anchorElement: HTMLElement; | ||
| private readonly anchorParentElement: HTMLElement; | ||
| private tooltipElement: HTMLDivElement; | ||
| private arrowElement: HTMLDivElement; | ||
| private innerElement: HTMLDivElement; | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param tooltip The tooltip you want to update its classes | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export const updateTooltipModifiers = ( | ||
| tooltip: HTMLDivElement, | ||
| options: Omit<ITooltipOptions, 'isAlwaysDisplayed' | 'isContentHtml'> | ||
| ) => { | ||
| if (typeof options.hasArrow === 'boolean') { | ||
| if (options.hasArrow) { | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } else { | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } | ||
| } | ||
| private cleanupFunction?: () => void; | ||
| private options: ITooltipOptions; | ||
| constructor(anchorElement: HTMLElement, content?: string | HTMLElement, options?: ITooltipOptions) { | ||
| this.anchorElement = anchorElement; | ||
| this.anchorParentElement = anchorElement.parentElement; | ||
| this.createTooltipElement(); | ||
| Object.defineProperty(this.anchorElement, '_njTooltip', { | ||
| value: this, | ||
| writable: true | ||
| }); | ||
| if (typeof options.isColorInverse === 'boolean') { | ||
| if (options.isColorInverse) { | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.inverse); | ||
| } else { | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.inverse); | ||
| const tooltipContent = content ?? anchorElement.dataset.tooltipContent; | ||
| this.options = Object.assign( | ||
| {}, | ||
| DEFAULT_OPTIONS, | ||
| options ?? {}, | ||
| anchorElement.dataset ? this.getOptionsFromDataset(anchorElement.dataset) : {} | ||
| ); | ||
| this.updateTooltipModifiers(this.options); | ||
| this.setContent(tooltipContent, this.options.isContentHtml); | ||
| if (typeof anchorElement.dataset?.tooltipAlways === 'string') { | ||
| this.show(); | ||
| } | ||
| } | ||
| if (typeof options.placement === 'string') { | ||
| // Reset positions | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('top')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('right')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('bottom')); | ||
| tooltip.classList.remove(CLASS_NAME.tooltip.modifier.placed('left')); | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| */ | ||
| private createTooltipElement() { | ||
| const tooltipElement = document.createElement('div'); | ||
| tooltipElement.className = CLASS_NAME.tooltip.element; | ||
| tooltipElement.role = 'tooltip'; | ||
| tooltipElement.id = Util.getUID('tooltip-'); | ||
| tooltip.classList.add(CLASS_NAME.tooltip.modifier.placed(options.placement)); | ||
| } | ||
| }; | ||
| const arrowElement = document.createElement('div'); | ||
| arrowElement.className = `${CLASS_NAME.arrow.element} ${CLASS_NAME.arrow.modifier.center}`; | ||
| arrowElement.ariaHidden = 'true'; | ||
| /** | ||
| * Update tooltip content | ||
| * @param tooltip The tooltip you want to update its content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML. | ||
| * Prefer passing content as HTMLElement when possible instead | ||
| */ | ||
| export const updateTooltipContent = ( | ||
| tooltip: HTMLDivElement, | ||
| content: string | HTMLElement, | ||
| isContentHTML = DEFAULT_OPTIONS.isContentHtml | ||
| ) => { | ||
| const inner = tooltip.querySelector(`.${CLASS_NAME.inner.element}`) as HTMLDivElement; | ||
| if (!inner) { | ||
| return; | ||
| const innerElement = document.createElement('div'); | ||
| innerElement.className = CLASS_NAME.inner.element; | ||
| tooltipElement.appendChild(arrowElement); | ||
| tooltipElement.appendChild(innerElement); | ||
| this.tooltipElement = tooltipElement; | ||
| this.arrowElement = arrowElement; | ||
| this.innerElement = innerElement; | ||
| } | ||
| if (typeof content === 'string') { | ||
| if (isContentHTML) { | ||
| inner.innerHTML = content; | ||
| } else { | ||
| inner.innerText = content; | ||
| private getOptionsFromDataset(dataset: DOMStringMap): ITooltipOptions { | ||
| const options: ITooltipOptions = {}; | ||
| if (typeof dataset.tooltipArrow === 'string') { | ||
| options.hasArrow = dataset.tooltipArrow === 'true'; | ||
| } | ||
| } else { | ||
| inner.appendChild(content); | ||
| if (typeof dataset.tooltipInverse === 'string') { | ||
| options.isColorInverse = dataset.tooltipInverse === 'true'; | ||
| } | ||
| if (typeof dataset.tooltipPlacement === 'string') { | ||
| options.placement = dataset.tooltipPlacement as Side; | ||
| } | ||
| if (typeof dataset.tooltipHtml === 'string') { | ||
| options.isContentHtml = dataset.tooltipHtml === 'true'; | ||
| } | ||
| return options; | ||
| } | ||
| }; | ||
| /** | ||
| * Generate a tooltip element without any display logic | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| export const createTooltipElement = ( | ||
| content: string | HTMLElement, | ||
| options?: Omit<ITooltipOptions, 'isAlwaysDisplayed'> | ||
| ) => { | ||
| const tooltip = document.createElement('div'); | ||
| tooltip.className = CLASS_NAME.tooltip.element; | ||
| tooltip.role = 'tooltip'; | ||
| tooltip.id = Util.getUID('tooltip-'); | ||
| /** | ||
| * Update tooltip classes to reflect desired options | ||
| * @param options The options to customize the tooltip | ||
| */ | ||
| private updateTooltipModifiers(options: Omit<ITooltipOptions, 'isContentHtml'>) { | ||
| if (typeof options.hasArrow === 'boolean') { | ||
| if (options.hasArrow) { | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } else { | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.withoutArrow); | ||
| } | ||
| } | ||
| const arrowElement = document.createElement('div'); | ||
| arrowElement.className = CLASS_NAME.arrow.element; | ||
| if (typeof options.isColorInverse === 'boolean') { | ||
| if (options.isColorInverse) { | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.inverse); | ||
| } else { | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.inverse); | ||
| } | ||
| } | ||
| const inner = document.createElement('div'); | ||
| inner.className = CLASS_NAME.inner.element; | ||
| if (typeof options.placement === 'string') { | ||
| // Reset positions | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('top')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('right')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('bottom')); | ||
| this.tooltipElement.classList.remove(CLASS_NAME.tooltip.modifier.placed('left')); | ||
| updateTooltipModifiers(tooltip, Object.assign({}, DEFAULT_OPTIONS, options ?? {})); | ||
| this.tooltipElement.classList.add(CLASS_NAME.tooltip.modifier.placed(options.placement)); | ||
| } | ||
| } | ||
| tooltip.appendChild(arrowElement); | ||
| tooltip.appendChild(inner); | ||
| /** | ||
| * Display the tooltip. Make sure to `hide()` it when no longer needed. | ||
| */ | ||
| show() { | ||
| if (this._isDisplayed) { | ||
| return; | ||
| } | ||
| updateTooltipContent(tooltip, content, options.isContentHtml); | ||
| this.anchorParentElement.appendChild(this.tooltipElement); | ||
| this.anchorElement.setAttribute('aria-describedby', this.tooltipElement.id); | ||
| return { tooltip, arrowElement }; | ||
| }; | ||
| this._isDisplayed = true; | ||
| const getOptionsFromDataset = (dataset: DOMStringMap): ITooltipOptions => { | ||
| const options: ITooltipOptions = {}; | ||
| if (typeof dataset.tooltipArrow === 'string') { | ||
| options.hasArrow = dataset.tooltipArrow === 'true'; | ||
| this.cleanupFunction = autoUpdate(this.anchorElement, this.tooltipElement, () => { | ||
| computePosition(this.anchorElement, this.tooltipElement, { | ||
| placement: this.options.placement, | ||
| middleware: [flip(), this.options.hasArrow && arrow({ element: this.arrowElement })] | ||
| }).then(({ x, y, placement }) => { | ||
| Object.assign(this.tooltipElement.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| this.updateTooltipModifiers({ placement: placement as Side }); | ||
| }); | ||
| }); | ||
| } | ||
| if (typeof dataset.tooltipInverse === 'string') { | ||
| options.isColorInverse = dataset.tooltipInverse === 'true'; | ||
| /** | ||
| * Hide the tooltip | ||
| */ | ||
| hide() { | ||
| if (!this._isDisplayed) { | ||
| return; | ||
| } | ||
| this.cleanupFunction?.(); | ||
| this.cleanupFunction = null; | ||
| this.anchorElement.parentElement?.removeChild(this.tooltipElement); | ||
| this.anchorElement.removeAttribute('aria-describedby'); | ||
| this._isDisplayed = false; | ||
| } | ||
| if (typeof dataset.tooltipPlacement === 'string') { | ||
| options.placement = dataset.tooltipPlacement as Side; | ||
| /** | ||
| * Update tooltip content | ||
| * @param content The content of the tooltip, it can be a string or an {@link HTMLElement} | ||
| * @param isContentHTML Whether the provided string content should be interpreted as HTML, | ||
| * prefer passing content as HTMLElement when possible instead. | ||
| * Default to `false`. | ||
| */ | ||
| setContent(content: string | HTMLElement, isContentHTML = DEFAULT_OPTIONS.isContentHtml) { | ||
| if (typeof content === 'string') { | ||
| if (isContentHTML) { | ||
| this.innerElement.innerHTML = content; | ||
| } else { | ||
| this.innerElement.innerText = content; | ||
| } | ||
| } else { | ||
| this.innerElement.appendChild(content); | ||
| } | ||
| } | ||
| if (typeof dataset.tooltipAlways === 'string') { | ||
| options.isAlwaysDisplayed = dataset.tooltipAlways === 'true'; | ||
| /** | ||
| * Update tooltip options | ||
| * @param options | ||
| */ | ||
| updateOptions(options: Omit<ITooltipOptions, 'isContentHtml'>) { | ||
| this.options = { | ||
| ...this.options, | ||
| ...options | ||
| }; | ||
| this.updateTooltipModifiers(this.options); | ||
| } | ||
| if (typeof dataset.tooltipHtml === 'string') { | ||
| options.isContentHtml = dataset.tooltipHtml === 'true'; | ||
| } | ||
| return options; | ||
| }; | ||
| } | ||
@@ -182,3 +246,3 @@ /** | ||
| * | ||
| * @return The initialized tooltip element and the unmount function to call on cleanup | ||
| * @return The tooltip reference for further manipulation | ||
| */ | ||
@@ -189,104 +253,84 @@ export const njTooltip = ( | ||
| options?: ITooltipOptions | ||
| ): { tooltip: HTMLDivElement | null; unmount: () => void } => { | ||
| const tooltipContent = content ?? anchorElement.dataset.tooltipContent; | ||
| ): Tooltip => new Tooltip(anchorElement, content, options); | ||
| if (!tooltipContent) { | ||
| return { | ||
| tooltip: null, | ||
| // eslint-disable-next-line no-empty-function | ||
| unmount() {} | ||
| }; | ||
| } | ||
| /** | ||
| * Initialize all tooltip anchor matching query selector on given element. | ||
| * | ||
| * @param element Parent element on which we will apply query selection. Default to `document.body` | ||
| * @param querySelector Query selector of your tooltip anchors. Default to `[data-toggle="tooltip"]` | ||
| * | ||
| * @return The initialized tooltip element references and a function to unmount them all | ||
| */ | ||
| export const initAllTooltips = ( | ||
| element?: HTMLElement, | ||
| querySelector = INIT_QUERY_SELECTOR | ||
| ): { tooltips: Tooltip[]; unmount: () => void } => { | ||
| const parentElement = element ?? document.body; | ||
| const finalOptions = Object.assign({}, DEFAULT_OPTIONS, options ?? {}, getOptionsFromDataset(anchorElement.dataset)); | ||
| const tooltips: Tooltip[] = []; | ||
| const unmountFunctions: Array<() => void> = []; | ||
| const { tooltip, arrowElement } = createTooltipElement(tooltipContent, finalOptions); | ||
| arrowElement.classList.add('nj-tooltip__arrow--center'); | ||
| parentElement.querySelectorAll(querySelector).forEach((anchor) => { | ||
| const anchorElement = anchor as HTMLElement; | ||
| let cleanup: () => void; | ||
| let isMounted = false; | ||
| const tooltip = njTooltip(anchorElement); | ||
| function mountTooltip() { | ||
| anchorElement.parentElement.appendChild(tooltip); | ||
| anchorElement.setAttribute('aria-describedby', tooltip.id); | ||
| if (!(anchorElement.dataset.tooltipAlways === 'true')) { | ||
| unmountFunctions.push(displayTooltipOnHoverAndFocus(tooltip)); | ||
| } | ||
| isMounted = true; | ||
| tooltips.push(tooltip); | ||
| }); | ||
| cleanup = autoUpdate(anchorElement, tooltip, () => { | ||
| computePosition(anchorElement, tooltip, { | ||
| placement: finalOptions.placement, | ||
| middleware: [flip(), finalOptions.hasArrow && arrow({ element: arrowElement })] | ||
| }).then(({ x, y, placement }) => { | ||
| Object.assign(tooltip.style, { | ||
| left: `${x}px`, | ||
| top: `${y}px` | ||
| }); | ||
| updateTooltipModifiers(tooltip, { placement: placement as Side }); | ||
| }); | ||
| }); | ||
| } | ||
| function hideTooltip() { | ||
| if (!isMounted) { | ||
| return; | ||
| } | ||
| cleanup?.(); | ||
| cleanup = null; | ||
| anchorElement.parentElement?.removeChild(tooltip); | ||
| anchorElement.removeAttribute('aria-describedby'); | ||
| isMounted = false; | ||
| } | ||
| const unmount = () => { | ||
| hideTooltip(); | ||
| anchorElement.removeEventListener('focusin', mountTooltip); | ||
| anchorElement.removeEventListener('mouseenter', mountTooltip); | ||
| anchorElement.removeEventListener('focusout', hideTooltip); | ||
| anchorElement.removeEventListener('mouseleave', hideTooltip); | ||
| unmountFunctions.forEach((unmount) => unmount()); | ||
| }; | ||
| if (finalOptions.isAlwaysDisplayed) { | ||
| mountTooltip(); | ||
| } else { | ||
| anchorElement.addEventListener('focusin', mountTooltip); | ||
| anchorElement.addEventListener('mouseenter', mountTooltip); | ||
| anchorElement.addEventListener('focusout', hideTooltip); | ||
| anchorElement.addEventListener('mouseleave', hideTooltip); | ||
| } | ||
| return { tooltip, unmount }; | ||
| return { tooltips, unmount }; | ||
| }; | ||
| /** | ||
| * Initialize all elements matching query selector on given element has tooltip anchor. | ||
| * | ||
| * @param element Parent element on which we will apply query selection. Default to `document.body` | ||
| * @param querySelector Query selector of your tooltip anchors. Default to `[data-toggle="tooltip"]` | ||
| * | ||
| * @return The initialized tooltip elements and a function to unmount them all | ||
| * Attach listeners to focus and hover events to toggle tooltip | ||
| * @param tooltip The tooltip which will be displayed | ||
| * @param triggerElement The element on which would be attached event listeners. Default to tooltip anchor | ||
| * @return Dismount function to remove event listeners, should be called before disposing the tooltip | ||
| */ | ||
| export const initAllTooltips = ( | ||
| element?: HTMLElement, | ||
| querySelector = INIT_QUERY_SELECTOR | ||
| ): { tooltips: HTMLDivElement[]; unmount: () => void } => { | ||
| const parentElement = element ?? document.body; | ||
| export const displayTooltipOnHoverAndFocus = (tooltip: Tooltip, triggerElement?: HTMLElement): (() => void) => { | ||
| const controller = new AbortController(); | ||
| const { signal } = controller; | ||
| const unmountFunctions = []; | ||
| const tooltips = []; | ||
| const anchorElement = triggerElement ?? tooltip.anchorElement; | ||
| parentElement.querySelectorAll(querySelector).forEach((anchorElement) => { | ||
| const initializationResult = njTooltip(anchorElement as HTMLElement); | ||
| if (initializationResult.tooltip !== null) { | ||
| unmountFunctions.push(initializationResult.unmount); | ||
| tooltips.push(initializationResult.tooltip); | ||
| } | ||
| }); | ||
| anchorElement.addEventListener( | ||
| 'focusin', | ||
| () => { | ||
| tooltip.show(); | ||
| }, | ||
| { signal } | ||
| ); | ||
| anchorElement.addEventListener( | ||
| 'mouseenter', | ||
| () => { | ||
| tooltip.show(); | ||
| }, | ||
| { signal } | ||
| ); | ||
| anchorElement.addEventListener( | ||
| 'focusout', | ||
| () => { | ||
| tooltip.hide(); | ||
| }, | ||
| { signal } | ||
| ); | ||
| anchorElement.addEventListener( | ||
| 'mouseleave', | ||
| () => { | ||
| tooltip.hide(); | ||
| }, | ||
| { signal } | ||
| ); | ||
| return { | ||
| tooltips, | ||
| unmount: () => { | ||
| unmountFunctions.forEach((unmount) => { | ||
| unmount(); | ||
| }); | ||
| } | ||
| return () => { | ||
| tooltip.hide(); | ||
| controller.abort(); | ||
| }; | ||
@@ -297,6 +341,5 @@ }; | ||
| njTooltip, | ||
| updateTooltipContent, | ||
| createTooltipElement, | ||
| updateTooltipModifiers, | ||
| initAllTooltips | ||
| initAllTooltips, | ||
| Tooltip, | ||
| displayTooltipOnHoverAndFocus | ||
| }; |
@@ -12,3 +12,3 @@ import './auto-init'; | ||
| import InputNumber from './components/input-number'; | ||
| import Search from './components/search'; | ||
| import { IMenuOptions, openMenu } from './components/menu'; | ||
| import Modal, { BeforeHideEventSource } from './components/modal'; | ||
@@ -18,2 +18,3 @@ import Navbar from './components/navbar'; | ||
| import Radio from './components/radio'; | ||
| import Search from './components/search'; | ||
| import SegmentedControl from './components/segmented-control'; | ||
@@ -27,8 +28,7 @@ import Select from './components/select'; | ||
| import { | ||
| createTooltipElement, | ||
| displayTooltipOnHoverAndFocus, | ||
| initAllTooltips, | ||
| ITooltipOptions, | ||
| njTooltip, | ||
| updateTooltipContent, | ||
| updateTooltipModifiers | ||
| Tooltip | ||
| } from './components/tooltip'; | ||
@@ -87,9 +87,9 @@ | ||
| static readonly njTooltip = njTooltip; | ||
| static readonly createTooltipElement = createTooltipElement; | ||
| static readonly updateTooltipContent = updateTooltipContent; | ||
| static readonly updateTooltipModifiers = updateTooltipModifiers; | ||
| static readonly initAllTooltips = initAllTooltips; | ||
| static readonly displayTooltipOnHoverAndFocus = displayTooltipOnHoverAndFocus; | ||
| static readonly Tooltip = Tooltip; | ||
| static readonly Password = Password; | ||
| static readonly SelectInput = SelectInput; | ||
| static readonly AutocompleteInput = AutocompleteInput; | ||
| static readonly openMenu = openMenu; | ||
@@ -137,7 +137,8 @@ // NEW_COMPONENT add component name here | ||
| njTooltip, | ||
| updateTooltipModifiers, | ||
| updateTooltipContent, | ||
| createTooltipElement, | ||
| initAllTooltips, | ||
| ITooltipOptions | ||
| displayTooltipOnHoverAndFocus, | ||
| Tooltip, | ||
| ITooltipOptions, | ||
| openMenu, | ||
| IMenuOptions | ||
| }; | ||
@@ -144,0 +145,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by2.64%
8192057
- Number of package files
- increased by0.62%
488
- Lines of code
- increased by1.81%
21322