@patternfly/elements
Version:
PatternFly Elements
1 lines • 14.5 kB
Source Map (JSON)
{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":";;AACA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EACL,qBAAqB,GAEtB,MAAM,6DAA6D,CAAC;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;;;AAI3D,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC9D,MAAM,UAAU,GAAG,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;AAuF/C,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;;QAGL,oEAAoE;QACxD,aAAQ,GAAc,KAAK,CAAC;QAKxC,qGAAqG;QAClD,WAAM,GAAG,KAAK,CAAC;QAuBlE,8CAAuC;QAEvC,2BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,OAAO,EAAE,GAAmC,EAAE,CAAC,uBAAA,IAAI,oDAAS;YAC5D,OAAO,EAAE,GAAmC,EAAE;gBAC5C,IAAI,uBAAA,IAAI,mCAAkB,EAAE,CAAC;oBAC3B,OAAO,uBAAA,IAAI,mCAAkB,CAAC;gBAChC,CAAC;qBAAM,IAAI,uBAAA,IAAI,oDAAS,YAAY,eAAe;uBACxC,uBAAA,IAAI,oDAAS,CAAC,gBAAgB,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;oBACvD,OAAO,uBAAA,IAAI,oDAAS,CAAC,gBAAgB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAgB,CAAC;gBAC/D,CAAC;qBAAM,CAAC;oBACN,OAAO,uBAAA,IAAI,oDAAS,CAAC;gBACvB,CAAC;YACH,CAAC;SACF,CAAC,EAAC;;IAEM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,uDAAgB,MAApB,IAAI,CAAkB,CAAC;QACvB,uBAAA,IAAI,sDAAe,MAAnB,IAAI,CAAiB,CAAC;IACxB,CAAC;IAED;;;;OAIG;IACM,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,uBAAA,IAAI,sDAAe,MAAnB,IAAI,CAAiB,CAAC;QACxB,CAAC;IACH,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAExD,MAAM,YAAY,GAChB,uBAAA,IAAI,oDAAS,EAAE,gBAAgB,EAAE,CAAC,MAAM,KAAK,CAAC;eAC3C,uBAAA,IAAI,oDAAS,EAAE,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC/C,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC;QAEpD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;oBAChB,QAAQ,CAAC,EAAE,IAAI;YACJ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM;YAClB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;sBAEpC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;;4CAEC,uBAAA,IAAI,uDAAgB;;4BAEpC,MAAM,CAAC,CAAC,IAAI,CAAqB;8CACf,IAAI,CAAC,OAAO;;;KAGrD,CAAC;IACJ,CAAC;IAwCY,AAAN,KAAK,CAAC,IAAI;QACf,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAChC,MAAM,MAAM,GACR,CAAC,SAAS,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE;YACtC,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC;QACxC,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC;YACrB,MAAM;YACN,SAAS;YACT,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;YAClB,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC,CAAC;IACL,CAAC;IAEY,AAAN,KAAK,CAAC,IAAI;QACf,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;;;;;;IAxHC,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,EAAE,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC;AAC9D,CAAC;;IAGC,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,EAAE,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC;AAC9D,CAAC;;IA+DC,IAAI,CAAC,aAAa,EAAE,CAAC;AACvB,CAAC;;IAGC,OAAQ,IAAI,CAAC,WAAW,EAA4B;SAC/C,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;AACvD,CAAC;;IAGC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,MAAM,mBAAmB,GAAG,uBAAA,IAAI,mCAAkB,CAAC;QACnD,uBAAA,IAAI,+BACA,IAAI,CAAC,OAAO,YAAY,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO;YACpD,CAAC,CAAC,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,uBAAA,IAAI,4DAAqB,MAAzB,IAAI,CAAuB;gBAChE,CAAC,CAAC,IAAI,MAAA,CAAC;QACT,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;YAC9B,IAAI,uBAAA,IAAI,mCAAkB,EAAE,CAAC;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACzC,uBAAA,IAAI,mCAAkB,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,mBAAmB,EAAE,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACzD,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;QACD,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAC7B,IAAI,uBAAA,IAAI,mCAAkB,EAAE,CAAC;gBAC3B,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACzC,uBAAA,IAAI,mCAAkB,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1D,CAAC;iBAAM,CAAC;gBACN,mBAAmB,EAAE,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBACzD,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;YACxC,CAAC;QACH,CAAC;IACH,CAAC;AACH,CAAC;AA/He,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGvC;IAAX,QAAQ,EAAE;2CAA6B;AAG5B;IAAX,QAAQ,EAAE;0CAAkB;AAGsB;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAEtD;IAAX,QAAQ,EAAE;0CAA4B;AAWpC;IAHF,QAAQ,CAAC;QACR,SAAS,EAAE,eAAe;QAC1B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;+CAA4B;AA2GjB;IAAZ,KAAK;qCAYL;AAEY;IAAZ,KAAK;qCAEL;AAlJU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import type { PropertyValues, TemplateResult } from 'lit';\nimport { LitElement, html, isServer } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n FloatingDOMController,\n type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\n\nimport { StringListConverter } from '@patternfly/pfe-core';\n\nimport styles from './pf-tooltip.css';\n\nconst EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst ExitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot\n * This slot wraps around the element that should be used to invoke the tooltip content to display.\n * Typically this would be an icon, button, or other small sized element.\n * @slot content\n * This slot renders the content that will be displayed inside of the tooltip.\n * Typically this would include a string of text without any additional elements.\n * This element is wrapped with a div inside of the component to give it the stylings and background colors.\n * @cssprop {<color>} [--pf-c-tooltip__content--BackgroundColor=#1b1d21]\n * Sets the background color for the tooltip content.\n *\n * @cssprop {<color>} [--pf-c-tooltip__content--Color=#e0e0e0]\n * Sets the font color for the tooltip content.\n *\n * @cssprop {<number>} [--pf-c-tooltip--line-height=1.5]\n * Sets the font color for the tooltip content.\n *\n * @cssprop {<length>} [--pf-c-tooltip--MaxWidth=18.75rem]\n * Maximum width for the tooltip.\n *\n * @cssprop [--pf-c-tooltip--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]\n * Box shadow for the tooltip.\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=0.5rem]\n * Top padding for the tooltip.\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem]\n * Right padding for the tooltip.\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=0.5rem]\n * Bottom padding for the tooltip.\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=0.5rem]\n * Left Padding for the tooltip.\n *\n * @cssprop [--pf-c-tooltip__content--FontSize=0.875rem]\n * Font size for the tooltip content.\n *\n * @cssprop {<length>} [--pf-c-tooltip__arrow--Width=0.5rem]\n * Tooltip arrow width.\n *\n * @cssprop {<length>} [--pf-c-tooltip__arrow--Height=0.5rem]\n * Tooltip arrow height.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-top--TranslateX=-50]\n * Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-top--TranslateY=50]\n * Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-top--Rotate=45deg]\n * Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-right--TranslateX=-50]\n * Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-right--TranslateY=-50]\n * Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-right--Rotate=45deg]\n * Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-bottom--TranslateX=-50]\n * Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-bottom--TranslateY=-50]\n * Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-bottom--Rotate=45deg]\n * Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-left--TranslateX=50]\n * Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-left--TranslateY=-50]\n * Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *\n * @cssprop [--pf-c-tooltip__arrow--m-left--Rotate=45deg]\n * Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /** The position of the tooltip, relative to the invoking content */\n @property() position: Placement = 'top';\n\n /** Tooltip content. Overridden by the content slot */\n @property() content?: string;\n\n /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */\n @property({ type: Boolean, attribute: 'no-flip' }) noFlip = false;\n\n @property() trigger?: string | Element;\n\n /**\n * The flip order when flip is enabled and the initial position is not possible.\n * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n * The default is [oppositePlacement], where only the opposite placement is tried.\n */\n @property({\n attribute: 'flip-behavior',\n converter: StringListConverter,\n }) flipBehavior?: Placement[];\n\n get #invoker(): HTMLSlotElement | null {\n return this.shadowRoot?.querySelector?.('#invoker') ?? null;\n }\n\n get #content(): HTMLElement | null {\n return this.shadowRoot?.querySelector?.('#tooltip') ?? null;\n }\n\n #referenceTrigger?: HTMLElement | null;\n\n #float = new FloatingDOMController(this, {\n content: (): HTMLElement | null | undefined => this.#content,\n invoker: (): HTMLElement | null | undefined => {\n if (this.#referenceTrigger) {\n return this.#referenceTrigger;\n } else if (this.#invoker instanceof HTMLSlotElement\n && this.#invoker.assignedElements().length > 0) {\n return this.#invoker.assignedElements().at(0) as HTMLElement;\n } else {\n return this.#invoker;\n }\n },\n });\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#invokerChanged();\n this.#updateTrigger();\n }\n\n /**\n * Removes event listeners from the old trigger element and attaches\n * them to the new trigger element.\n * @param changed changed properties\n */\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('trigger')) {\n this.#updateTrigger();\n }\n }\n\n override render(): TemplateResult<1> {\n const { alignment, anchor, open, styles } = this.#float;\n\n const blockInvoker =\n this.#invoker?.assignedElements().length === 0\n && this.#invoker?.assignedNodes().length > 0;\n const display = blockInvoker ? 'block' : 'contents';\n\n return html`\n <div id=\"container\"\n style=\"${styleMap(styles)}\"\n class=\"${classMap({ open,\n [anchor]: !!anchor,\n [alignment]: !!alignment })}\">\n <div role=\"tooltip\"\n style=\"${styleMap({ display })}\"\n aria-labelledby=\"tooltip\">\n <slot id=\"invoker\" @slotchange=\"${this.#invokerChanged}\"></slot>\n </div>\n <div aria-hidden=\"${String(!open) as 'true' | 'false'}\">\n <slot id=\"tooltip\" name=\"content\">${this.content}</slot>\n </div>\n </div>\n `;\n }\n\n /** the invoker slot should render at block level if it only has text nodes */\n #invokerChanged() {\n this.requestUpdate();\n }\n\n #getReferenceTrigger() {\n return (this.getRootNode() as Document | ShadowRoot)\n .getElementById(this.trigger?.normalize() ?? '');\n }\n\n #updateTrigger() {\n if (!isServer) {\n const oldReferenceTrigger = this.#referenceTrigger;\n this.#referenceTrigger =\n this.trigger instanceof HTMLElement ? this.trigger\n : typeof this.trigger === 'string' ? this.#getReferenceTrigger()\n : null;\n for (const evt of EnterEvents) {\n if (this.#referenceTrigger) {\n this.removeEventListener(evt, this.show);\n this.#referenceTrigger.addEventListener(evt, this.show);\n } else {\n oldReferenceTrigger?.removeEventListener(evt, this.show);\n this.addEventListener(evt, this.show);\n }\n }\n for (const evt of ExitEvents) {\n if (this.#referenceTrigger) {\n this.removeEventListener(evt, this.hide);\n this.#referenceTrigger.addEventListener(evt, this.hide);\n } else {\n oldReferenceTrigger?.removeEventListener(evt, this.hide);\n this.addEventListener(evt, this.hide);\n }\n }\n }\n }\n\n @bound async show(): Promise<void> {\n await this.updateComplete;\n const placement = this.position;\n const offset =\n !placement?.match(/top|bottom/) ? 15\n : { mainAxis: 15, alignmentAxis: -4 };\n await this.#float.show({\n offset,\n placement,\n flip: !this.noFlip,\n fallbackPlacements: this.flipBehavior,\n });\n }\n\n @bound async hide(): Promise<void> {\n await this.#float.hide();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tooltip': PfTooltip;\n }\n}\n"]}