@patternfly/elements 2.3.1 → 2.4.0

package/pf-tooltip/BaseTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTooltip.js","sourceRoot":"","sources":["BaseTooltip.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;;;AAIpG,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;AAEtD,MAAsB,WAAY,SAAQ,UAAU;aAClC,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IAOjC,MAAM,GAAG,IAAI,qBAAqB,CAAC,IAAI,EAAE;QACvC,OAAO,EAAE,GAAmC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;KAC1F,CAAC,CAAC;IAEM,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,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,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC;QAExD,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;iBACnB,QAAQ,CAAC,EAAE,IAAI;YACJ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM;YAClB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;;;6BAI1B,MAAM,CAAC,CAAC,IAAI,CAAqB,KAAK,IAAI,CAAC,OAAO;;KAE1E,CAAC;IACJ,CAAC;;SA9CmB,WAAW","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport style from './BaseTooltip.css';\n\nconst enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst exitEvents = ['focusout', 'blur', 'mouseleave'];\n\nexport abstract class BaseTooltip extends LitElement {\n  static readonly styles = [style];\n\n  abstract content?: string;\n\n  /** The position of the tooltip, relative to the invoking content */\n  abstract position?: Placement;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    enterEvents.forEach(evt => this.addEventListener(evt, this.show));\n    exitEvents.forEach(evt => this.addEventListener(evt, this.hide));\n  }\n\n  async show() {\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({ offset, placement });\n  }\n\n  async hide() {\n    await this.#float.hide();\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n        class=\"${classMap({ open,\n                            [anchor]: !!anchor,\n                            [alignment]: !!alignment })}\">\n        <slot id=\"invoker\" role=\"tooltip\" aria-labelledby=\"tooltip\"></slot>\n        <slot id=\"tooltip\"\n              name=\"content\"\n              aria-hidden=\"${String(!open) as 'true' | 'false'}\">${this.content}</slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"BaseTooltip.js","sourceRoot":"","sources":["BaseTooltip.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;;;AAIpG,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;AAEtD;;GAEG;AACH,MAAsB,WAAY,SAAQ,UAAU;IAApD;;QAQE,6BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,OAAO,EAAE,GAAmC,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC;SAC1F,CAAC,EAAC;IAqCL,CAAC;IAnCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAClE,UAAU,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,KAAK,CAAC,IAAI;QACR,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,0BAAO,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChD,CAAC;IAED,KAAK,CAAC,IAAI;QACR,MAAM,uBAAA,IAAI,0BAAO,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC;IAEQ,MAAM;QACb,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,0BAAO,CAAC;QAExD,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;;;;6BAI7B,MAAM,CAAC,CAAC,IAAI,CAAqB,KAAK,IAAI,CAAC,OAAO;;KAE1E,CAAC;IACJ,CAAC;;;AA7Ce,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,WAAW","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport style from './BaseTooltip.css';\n\nconst enterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst exitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * @deprecated - Will be removed in the next major version. Use FloatingDOMController\n */\nexport abstract class BaseTooltip extends LitElement {\n  static readonly styles = [style];\n\n  abstract content?: string;\n\n  /** The position of the tooltip, relative to the invoking content */\n  abstract position?: Placement;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | undefined | null => this.shadowRoot?.querySelector('#tooltip'),\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    enterEvents.forEach(evt => this.addEventListener(evt, this.show));\n    exitEvents.forEach(evt => this.addEventListener(evt, this.hide));\n  }\n\n  async show() {\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({ offset, placement });\n  }\n\n  async hide() {\n    await this.#float.hide();\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <slot id=\"invoker\" role=\"tooltip\" aria-labelledby=\"tooltip\"></slot>\n        <slot id=\"tooltip\"\n              name=\"content\"\n              aria-hidden=\"${String(!open) as 'true' | 'false'}\">${this.content}</slot>\n      </div>\n    `;\n  }\n}\n"]}

package/pf-tooltip/pf-tooltip.css

@@ -1,11 +1,43 @@
 :host {
   --_timestamp-text-decoration: underline dashed 1px;
   --_timestamp-text-underline-offset: 4px;
+  display: inline;
+}
+
+* { box-sizing: border-box; }
+
+#container {
+  display: inline-flex;
+  position: relative;
+  max-width: 100%;
+  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
+}
+
+#invoker.block {
+  display: block;
+}
+
+#tooltip,
+#tooltip::after {
+  position: absolute;
 }
 
 #tooltip {
   --_timestamp-text-decoration: none;
   --_timestamp-text-underline-offset: initial;
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10000;
+  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
+  text-align: center;
+  word-break: break-word;
+  translate: var(--_floating-content-translate);
+  max-width: calc(100vw - 10px);
+  width: max-content;
+  top: 0;
+  left: 0;
+  will-change: opacity;
   line-height: var(--pf-c-tooltip--line-height, 1.5);
   max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);
   box-shadow: var(--pf-c-tooltip--BoxShadow,
@@ -29,12 +61,42 @@
     var(--pf-global--BackgroundColor--dark-100, #151515));
 }
 
-#container {
-  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);
-}
-
 #tooltip::after {
+  display: block;
+  content: '';
+  rotate: 45deg;
+  width: var(--_floating-arrow-size);
+  height: var(--_floating-arrow-size);
+  will-change: left top right bottom;
   background-color: var(--pf-c-tooltip__content--BackgroundColor,
     var(--pf-global--BackgroundColor--dark-100, #151515));
 }
 
+.open #tooltip {
+  opacity: 1;
+}
+
+/* LEFT */
+.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
+.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.left.start #tooltip::after    { top: var(--_floating-arrow-size); }
+.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }
+
+/* TOP */
+.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.start #tooltip::after     { left: var(--_floating-arrow-size); }
+.top.end #tooltip::after       { right: var(--_floating-arrow-size); }
+
+/* RIGHT */
+.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.start #tooltip::after   { top: var(--_floating-arrow-size); }
+.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }
+
+/* BOTTOM */
+.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }
+.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }
+

package/pf-tooltip/pf-tooltip.d.ts

@@ -1,5 +1,6 @@
-import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
-import { BaseTooltip } from './BaseTooltip.js';
+import type { PropertyValues } from 'lit';
+import { LitElement } from 'lit';
+import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 /**
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
@@ -87,11 +88,32 @@ import { BaseTooltip } from './BaseTooltip.js';
  *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
  *              {@default `45deg`}
  */
-export declare class PfTooltip extends BaseTooltip {
+export declare class PfTooltip extends LitElement {
+    #private;
     static readonly styles: import("lit").CSSResult[];
+    /** The position of the tooltip, relative to the invoking content */
     position: Placement;
     /** Tooltip content. Overridden by the content slot */
     content?: string;
+    /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */
+    noFlip: boolean;
+    trigger?: string | Element;
+    /**
+     * The flip order when flip is enabled and the initial position is not possible.
+     * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,
+     * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.
+     * The default is [oppositePlacement], where only the opposite placement is tried.
+     */
+    flipBehavior?: Placement[];
+    connectedCallback(): void;
+    /**
+     * Removes event listeners from the old trigger element and attaches
+     * them to the new trigger element.
+     */
+    willUpdate(changed: PropertyValues<this>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-tooltip/pf-tooltip.js

@@ -1,9 +1,17 @@
-import { __decorate } from "tslib";
+var _PfTooltip_instances, _PfTooltip_invoker_get, _PfTooltip_content_get, _PfTooltip_blockInvoker, _PfTooltip_referenceTrigger, _PfTooltip_float, _PfTooltip_invokerChanged, _PfTooltip_getReferenceTrigger, _PfTooltip_updateTrigger;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
-import { BaseTooltip } from './BaseTooltip.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { FloatingDOMController, } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { bound } from '@patternfly/pfe-core/decorators/bound.js';
+import { StringListConverter } from '@patternfly/pfe-core';
 import { css } from "lit";
-const styles = css `:host{--_timestamp-text-decoration:underline dashed 1px;--_timestamp-text-underline-offset:4px}#tooltip{--_timestamp-text-decoration:none;--_timestamp-text-underline-offset:initial;line-height:var(--pf-c-tooltip--line-height, 1.5);max-width:var(--pf-c-tooltip--MaxWidth,18.75rem);box-shadow:var(--pf-c-tooltip--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));padding:var(--pf-c-tooltip__content--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingRight,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingLeft,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-tooltip__content--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}#container{--_floating-arrow-size:var(--pf-c-tooltip__arrow--Width, 0.5rem)}#tooltip::after{background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}`;
+const styles = css `:host{--_timestamp-text-decoration:underline dashed 1px;--_timestamp-text-underline-offset:4px;display:inline}*{box-sizing:border-box}#container{display:inline-flex;position:relative;max-width:100%;--_floating-arrow-size:var(--pf-c-tooltip__arrow--Width, 0.5rem)}#invoker.block{display:block}#tooltip,#tooltip::after{position:absolute}#tooltip{--_timestamp-text-decoration:none;--_timestamp-text-underline-offset:initial;display:block;opacity:0;pointer-events:none;z-index:10000;transition:opacity .3s cubic-bezier(.54, 1.5, .38, 1.11) 0s;text-align:center;word-break:break-word;translate:var(--_floating-content-translate);max-width:calc(100vw - 10px);width:max-content;top:0;left:0;will-change:opacity;line-height:var(--pf-c-tooltip--line-height, 1.5);max-width:var(--pf-c-tooltip--MaxWidth,18.75rem);box-shadow:var(--pf-c-tooltip--BoxShadow,var(--pf-global--BoxShadow--md,0 .25rem .5rem 0 rgba(3,3,3,.12),0 0 .25rem 0 rgba(3,3,3,.06)));padding:var(--pf-c-tooltip__content--PaddingTop,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingRight,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingBottom,var(--pf-global--spacer--sm,.5rem)) var(--pf-c-tooltip__content--PaddingLeft,var(--pf-global--spacer--sm,.5rem));font-size:var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-tooltip__content--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}#tooltip::after{display:block;content:'';rotate:45deg;width:var(--_floating-arrow-size);height:var(--_floating-arrow-size);will-change:left top right bottom;background-color:var(--pf-c-tooltip__content--BackgroundColor,var(--pf-global--BackgroundColor--dark-100,#151515))}.open #tooltip{opacity:1}.left #tooltip::after{right:calc(-.5 * var(--_floating-arrow-size))}.left.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.left.start #tooltip::after{top:var(--_floating-arrow-size)}.left.end #tooltip::after{bottom:var(--_floating-arrow-size)}.top #tooltip::after{top:calc(100% - .5 * var(--_floating-arrow-size))}.top.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.top.start #tooltip::after{left:var(--_floating-arrow-size)}.top.end #tooltip::after{right:var(--_floating-arrow-size)}.right #tooltip::after{right:calc(100% - .5 * var(--_floating-arrow-size))}.right.center #tooltip::after{top:calc(50% - .5 * var(--_floating-arrow-size))}.right.start #tooltip::after{top:var(--_floating-arrow-size)}.right.end #tooltip::after{bottom:var(--_floating-arrow-size)}.bottom #tooltip::after{bottom:calc(100% - .5 * var(--_floating-arrow-size))}.bottom.center #tooltip::after{right:calc(50% - .5 * var(--_floating-arrow-size))}.bottom.start #tooltip::after{left:var(--_floating-arrow-size)}.bottom.end #tooltip::after{right:var(--_floating-arrow-size)}`;
+const EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
+const ExitEvents = ['focusout', 'blur', 'mouseleave'];
 /**
  * A **tooltip** is in-app messaging used to identify elements on a page with short,
  * clarifying text.
@@ -91,19 +99,150 @@ const styles = css `:host{--_timestamp-text-decoration:underline dashed 1px;--_t
  *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
  *              {@default `45deg`}
  */
-let PfTooltip = class PfTooltip extends BaseTooltip {
+let PfTooltip = class PfTooltip extends LitElement {
     constructor() {
         super(...arguments);
+        _PfTooltip_instances.add(this);
+        /** The position of the tooltip, relative to the invoking content */
         this.position = 'top';
+        /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */
+        this.noFlip = false;
+        _PfTooltip_blockInvoker.set(this, false);
+        _PfTooltip_referenceTrigger.set(this, void 0);
+        _PfTooltip_float.set(this, new FloatingDOMController(this, {
+            content: () => __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_content_get),
+            invoker: () => {
+                if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
+                    return __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");
+                }
+                else if (__classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get) instanceof HTMLSlotElement && __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get).assignedElements().length > 0) {
+                    return __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get).assignedElements().at(0);
+                }
+                else {
+                    return __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get);
+                }
+            },
+        }));
     }
-    static { this.styles = [...BaseTooltip.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_invokerChanged).call(this);
+        __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_updateTrigger).call(this);
+    }
+    /**
+     * Removes event listeners from the old trigger element and attaches
+     * them to the new trigger element.
+     */
+    willUpdate(changed) {
+        if (changed.has('trigger')) {
+            __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_updateTrigger).call(this);
+        }
+    }
+    render() {
+        const { alignment, anchor, open, styles } = __classPrivateFieldGet(this, _PfTooltip_float, "f");
+        const block = __classPrivateFieldGet(this, _PfTooltip_blockInvoker, "f");
+        return html `
+      <div id="container"
+           style="${styleMap(styles)}"
+           class="${classMap({ open,
+            [anchor]: !!anchor,
+            [alignment]: !!alignment })}">
+        <slot id="invoker"
+              class="${classMap({ block })}"
+              @slotchange="${__classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_invokerChanged)}"
+              role="tooltip"
+              aria-labelledby="tooltip"></slot>
+        <slot id="tooltip"
+              name="content"
+              aria-hidden="${String(!open)}">${this.content}</slot>
+      </div>
+    `;
+    }
+    async show() {
+        await this.updateComplete;
+        const placement = this.position;
+        const offset = !placement?.match(/top|bottom/) ? 15
+            : { mainAxis: 15, alignmentAxis: -4 };
+        await __classPrivateFieldGet(this, _PfTooltip_float, "f").show({
+            offset,
+            placement,
+            flip: !this.noFlip,
+            fallbackPlacements: this.flipBehavior,
+        });
+    }
+    async hide() {
+        await __classPrivateFieldGet(this, _PfTooltip_float, "f").hide();
+    }
+};
+_PfTooltip_blockInvoker = new WeakMap();
+_PfTooltip_referenceTrigger = new WeakMap();
+_PfTooltip_float = new WeakMap();
+_PfTooltip_instances = new WeakSet();
+_PfTooltip_invoker_get = function _PfTooltip_invoker_get() {
+    return this.shadowRoot?.querySelector('#invoker') ?? null;
+};
+_PfTooltip_content_get = function _PfTooltip_content_get() {
+    return this.shadowRoot?.querySelector('#tooltip') ?? null;
+};
+_PfTooltip_invokerChanged = function _PfTooltip_invokerChanged() {
+    __classPrivateFieldSet(this, _PfTooltip_blockInvoker, __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedElements().length === 0 &&
+        __classPrivateFieldGet(this, _PfTooltip_instances, "a", _PfTooltip_invoker_get)?.assignedNodes().length > 0, "f");
+    this.requestUpdate();
+};
+_PfTooltip_getReferenceTrigger = function _PfTooltip_getReferenceTrigger() {
+    return this.getRootNode().getElementById(this.trigger?.normalize() ?? '');
 };
+_PfTooltip_updateTrigger = function _PfTooltip_updateTrigger() {
+    const oldReferenceTrigger = __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");
+    __classPrivateFieldSet(this, _PfTooltip_referenceTrigger, this.trigger instanceof HTMLElement ? this.trigger
+        : typeof this.trigger === 'string' ? __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_getReferenceTrigger).call(this)
+            : null, "f");
+    for (const evt of EnterEvents) {
+        if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
+            this.removeEventListener(evt, this.show);
+            __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.show);
+        }
+        else {
+            oldReferenceTrigger?.removeEventListener(evt, this.show);
+            this.addEventListener(evt, this.show);
+        }
+    }
+    for (const evt of ExitEvents) {
+        if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
+            this.removeEventListener(evt, this.hide);
+            __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.hide);
+        }
+        else {
+            oldReferenceTrigger?.removeEventListener(evt, this.hide);
+            this.addEventListener(evt, this.hide);
+        }
+    }
+};
+PfTooltip.styles = [styles];
 __decorate([
     property()
 ], PfTooltip.prototype, "position", void 0);
 __decorate([
     property()
 ], PfTooltip.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-flip' })
+], PfTooltip.prototype, "noFlip", void 0);
+__decorate([
+    property()
+], PfTooltip.prototype, "trigger", void 0);
+__decorate([
+    property({
+        attribute: 'flip-behavior',
+        converter: StringListConverter,
+    })
+], PfTooltip.prototype, "flipBehavior", void 0);
+__decorate([
+    bound
+], PfTooltip.prototype, "show", null);
+__decorate([
+    bound
+], PfTooltip.prototype, "hide", null);
 PfTooltip = __decorate([
     customElement('pf-tooltip')
 ], PfTooltip);

package/pf-tooltip/pf-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AAEH,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,WAAW;IAA1C;;QAGc,aAAQ,GAAc,KAAK,CAAC;IAI1C,CAAC;aANiB,WAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAAlC,CAAmC;;AAE7C;IAAX,QAAQ,EAAE;2CAA6B;AAG5B;IAAX,QAAQ,EAAE;0CAAkB;AANlB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAOrB;SAPY,SAAS","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { BaseTooltip } from './BaseTooltip.js';\n\nimport styles from './pf-tooltip.css';\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n *\n * @summary Toggle the visibility of helpful or contextual information.\n *\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 *\n * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor\n *              Sets the background color for the tooltip content.\n *              {@default `#1b1d21`}\n * @cssprop     {<color>} --pf-c-tooltip__content--Color\n *              Sets the font color for the tooltip content.\n *              {@default `#e0e0e0`}\n * @cssprop     {<number>} --pf-c-tooltip--line-height\n *              Sets the font color for the tooltip content.\n *              {@default `1.5`}\n * @cssprop     {<length>} --pf-c-tooltip--MaxWidth\n *              Maximum width for the tooltip.\n *              {@default `18.75rem`}\n * @cssprop     --pf-c-tooltip--BoxShadow\n *              Box shadow for the tooltip.\n *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop\n *              Top padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight\n *              Right padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom\n *              Bottom padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft\n *              Left Padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__content--FontSize\n *              Font size for the tooltip content.\n *              {@default `0.875rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Width\n *              Tooltip arrow width.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Height\n *              Tooltip arrow height.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *              {@default `45deg`}\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends BaseTooltip {\n  static readonly styles = [...BaseTooltip.styles, styles];\n\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } 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\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 *\n * @summary Toggle the visibility of helpful or contextual information.\n *\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 *\n * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor\n *              Sets the background color for the tooltip content.\n *              {@default `#1b1d21`}\n * @cssprop     {<color>} --pf-c-tooltip__content--Color\n *              Sets the font color for the tooltip content.\n *              {@default `#e0e0e0`}\n * @cssprop     {<number>} --pf-c-tooltip--line-height\n *              Sets the font color for the tooltip content.\n *              {@default `1.5`}\n * @cssprop     {<length>} --pf-c-tooltip--MaxWidth\n *              Maximum width for the tooltip.\n *              {@default `18.75rem`}\n * @cssprop     --pf-c-tooltip--BoxShadow\n *              Box shadow for the tooltip.\n *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop\n *              Top padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight\n *              Right padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom\n *              Bottom padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft\n *              Left Padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__content--FontSize\n *              Font size for the tooltip content.\n *              {@default `0.875rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Width\n *              Tooltip arrow width.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Height\n *              Tooltip arrow height.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *              {@default `45deg`}\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n  static readonly styles = [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  #blockInvoker = false;\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 && 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() {\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   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#updateTrigger();\n    }\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    const block = this.#blockInvoker;\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <slot id=\"invoker\"\n              class=\"${classMap({ block })}\"\n              @slotchange=\"${this.#invokerChanged}\"\n              role=\"tooltip\"\n              aria-labelledby=\"tooltip\"></slot>\n        <slot id=\"tooltip\"\n              name=\"content\"\n              aria-hidden=\"${String(!open) as 'true' | 'false'}\">${this.content}</slot>\n      </div>\n    `;\n  }\n\n  /** the invoker slot should render at block level if it only has text nodes */\n  #invokerChanged() {\n    this.#blockInvoker =\n      this.#invoker?.assignedElements().length === 0 &&\n      this.#invoker?.assignedNodes().length > 0;\n    this.requestUpdate();\n  }\n\n  #getReferenceTrigger() {\n    return (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger?.normalize() ?? '');\n  }\n\n  #updateTrigger() {\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  @bound async show() {\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() {\n    await this.#float.hide();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}