{"version":3,"file":"ToolTip.js","names":["ToolTip","a","setters","Component","default","AOS","mix","on","off","debounce","deepMerge","Accessibility","AccessibilityService","LoaderMixin","isTouchDevice","isFiresTouchEvents","isChildOf","Event","execute","with","constructor","element","options","arguments","length","_resizable","classNames","modifier","position","text","preventOverflow","preventOverflowOffset","flip","scroll","resize","destroyOnHide","strategy","removeOnDestroy","triggerSelector","showOnClick","trackFocusedElements","width","closeLabel","hideTooltipOnMouseLeave","tooltipArrowOffset","tooltipOffset","afterClose","initCache","classes","tooltip","tooltipArrow","tooltipAriaLink","tooltipClose","tooltipContent","tooltipTitle","tooltipBody","activeModifier","selectors","target","querySelector","createTooltipLayout","popperInstance","cssClass","ariaLabel","hasAttribute","getAttribute","titleCssClass","titleClassNames","forEach","className","titleTemplate","title","id","innerHTML","closeTemplate","ariaLinkTemplate","template","document","createElement","initState","state","isActive","hasContent","areCustomEventsBound","isForceContentLoad","isFocusDisabled","bindEvents","onDocumentClick","bind","onMouseEnter","onMouseLeave","onKeyboardControl","onClick","onDocumentKeyDown","checkComponent","onTooltipTouchOpened","afterInit","bindCustomTooltipEvents","onContentMouseLeave","onTooltipKeyboardControl","onTooltipCloseClick","unbindCustomTooltipEvents","event","keyBoardActions","Enter","toggleContentFromKeyboard","\" \"","Tab","onTabKey","Escape","focus","hideContent","focusTrap","toggleContent","preventDefault","stopImmediatePropagation","showContent","relatedTarget","contains","addDialogMarkup","showAriaLink","showCloseButton","setAttribute","setDialogTitle","tooltipTitleElement","removeDialogMarkup","hideAriaLink","hideCloseButton","removeAttribute","classList","remove","add","hideContentFromMouse","emit","obj","key","isContentValid","saveLastFocusState","closest","initAccessibility","body","appendChild","createPopper","addNewState","setContent","updatePopper","indexOf","onResize","content","update","popperOptions","placement","eventsEnabled","modifiers","name","padding","offset","tether","rootBoundary","flipVariations","gpuAcceleration","onFirstUpdate","onPopperCreate","popper","SystemJS","import","then","forceUpdate","setWidth","refresh","initModalPattern","setFocusedOrder","style","destroyPopper","destroy","destroyModalPattern","resetFocusedOrder","restorePrevState","removeListener"],"sources":["components/global/ToolTip.js"],"sourcesContent":["/* eslint max-lines: off */\nimport Component from 'core/Component';\nimport AOS from 'aos';\nimport { mix } from 'core/mixwith';\nimport { on, off } from 'toolbox/event';\nimport { debounce } from 'toolbox/debounce';\nimport { deepMerge } from 'toolbox/deepMerge';\nimport Accessibility from 'mixins/Accessibility';\nimport AccessibilityService from 'services/Accessibility';\nimport LoaderMixin from 'mixins/Loader';\nimport { isTouchDevice, isFiresTouchEvents } from 'toolbox/device';\nimport { isChildOf } from 'toolbox/html';\nimport { Event } from 'services/EventEmitter';\n\n/**\n * This is a description of the ToolTip constructor function.\n * See documentation for API: https://popper.js.org/docs/v2/\n * @class\n * @classdesc This is a description of the ToolTip class.\n * @extends Component\n */\nexport default class ToolTip extends mix(Component).with(Accessibility, LoaderMixin) {\n /**\n * Constructor of the class that mainly merge the options of the components\n *\n * @param {HTMLElement} element HTMLElement of the component\n * @param {Object} options options that belongs to the component\n * @typedef {Object} optionsObject\n * @property {String} classNames.modifier - Additional class modifier inserted on Tooltip\n * @property {enum} position - Popper placement (see API).\n * List of accepted placements: `auto`, `top`, `right`, `bottom`, `left`\n * Each placement can have a variation suffix: '-start`, `-end'\n * Some valid examples: `top-end`, `right-start`, `bottom`, `auto-end`\n * @property {String} text - text to show in a tooltip.\n * @property {Boolean} preventOverflow - Set to true to prevent the popper from being positioned outside the boundary\n * @property {Boolean} preventOverflowOffset - Padding on all four sides of view port.\n * Different padding on certain sides – unspecified sides are 0\n * padding: { top: 8, right: 16 },\n * @property {String} tooltipArrowOffset - You can pass a number, which will set an equal padding for all four sides,\n * or an object containing side properties each with their own padding value.\n * @property {Array} tooltipOffset - [0, 0], The first number, skidding, displaces the popper along the reference element.\n* The second number, distance, displaces the popper away from, or toward,\n* the reference element in the direction of its placement. A positive number displaces it\n further away, while a negative number lets it overlap the reference.\n * @property {Boolean} flip - Set to true to flip the popper’s placement when it starts to overlap its reference element\n * Requires the preventOverflow modifier before it in order to work\n * @property {Boolean} scroll - Determines if scroll listeners are added.\n * @property {Boolean} resize - Determines if resize listeners are added.\n * @property {Boolean} strategy - Set position of popper. By default, it is absolute\n * Accepted placements: `fixed`, `sticky`, `relative`\n * @property {Boolean} removeOnDestroy - Set to true if you want to automatically remove the popper when you call\n * the destroy method\n * @property {Number} width - width of a tooltip content in px. Set to 0 if the width is defined by the content inside\n * @property {Function} afterClose - Function which will be executed right after Tooltip is closed\n */\n constructor(element, options = {}) {\n super(element, deepMerge({\n _resizable: true,\n classNames: { modifier: null },\n position: 'bottom',\n text: null,\n preventOverflow: true,\n preventOverflowOffset: 10,\n flip: true,\n scroll: false,\n resize: true,\n destroyOnHide: true,\n strategy: 'absolute',\n removeOnDestroy: true,\n triggerSelector: null, // dom selector for the custom target\n showOnClick: false, // show content on click (disable mouse enter/leave events)\n trackFocusedElements: true,\n width: 0,\n closeLabel: 'Close',\n hideTooltipOnMouseLeave: true, // hide tooltip on mouse tooltip leave\n tooltipArrowOffset: 5, // 5px from the edges of the popper\n tooltipOffset: [], // 0px from the edges of the reference element\n /**\n * It will execute right after Tooltip is closed\n */\n afterClose() {\n // Callback methods\n },\n }, options));\n }\n\n /**\n * All selectors must be cached. Never cache elements that are out of the component scope\n */\n initCache() {\n this.classes = {\n tooltip: 'c-tooltip',\n tooltipArrow: 'c-tooltip__arrow',\n tooltipAriaLink: 'c-tooltip__arialink',\n tooltipClose: 'c-tooltip__close',\n tooltipContent: 'c-tooltip__content',\n tooltipTitle: 'c-tooltip__title',\n tooltipBody: 'c-tooltip__body',\n activeModifier: 'm-active',\n };\n\n this.selectors.target = (this.options.triggerSelector && this.element.querySelector(this.options.triggerSelector))\n || this.element;\n\n this.tooltip = this.createTooltipLayout();\n\n this.selectors.tooltipArrow = this.tooltip.querySelector(`.${this.classes.tooltipArrow}`);\n this.selectors.tooltipAriaLink = this.tooltip.querySelector(`.${this.classes.tooltipAriaLink}`);\n this.selectors.tooltipClose = this.tooltip.querySelector(`.${this.classes.tooltipClose}`);\n this.selectors.tooltipBody = this.tooltip.querySelector(`.${this.classes.tooltipBody}`);\n this.selectors.tooltipContent = this.tooltip.querySelector(`.${this.classes.tooltipContent}`);\n\n this.popperInstance = null;\n }\n\n /* eslint-disable complexity */\n /**\n * Create the tooltip HTML structure\n *\n * @returns { HTMLElement } tooltip container\n */\n createTooltipLayout() {\n const cssClass = this.options.classNames.modifier !== null ? `${this.classes.tooltip} ${this.options.classNames.modifier}` : this.classes.tooltip;\n const ariaLabel = this.selectors.target.hasAttribute('aria-label') ? `aria-label=\"${this.selectors.target.getAttribute('aria-label')}\"` : '';\n\n let titleCssClass = this.classes.tooltipTitle;\n if (this.options.titleClassNames) {\n this.options.titleClassNames.forEach((className) => {\n titleCssClass += ` ${className}`;\n });\n }\n const titleTemplate = `
`;\n\n const closeLabel = this.selectors.target.hasAttribute('data-js-aria-close-label') ? this.selectors.target.getAttribute('data-js-aria-close-label') : this.options.closeLabel;\n const closeTemplate = ``;\n\n const ariaLinkTemplate = this.selectors.target.getAttribute('data-href')\n ? `${this.selectors.target.innerHTML}` : '';\n\n const template = `