@patternfly/elements 3.0.2 → 4.0.1

package/pf-panel/test/pf-panel.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-panel.e2e.js","sourceRoot":"","sources":["pf-panel.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-panel';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}
+{"version":3,"file":"pf-panel.e2e.js","sourceRoot":"","sources":["pf-panel.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAE3E,MAAM,OAAO,GAAG,UAAU,CAAC;AAE3B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE;QAChC,MAAM,OAAO,GAAG,IAAI,OAAO,CAAC;YAC1B,OAAO;YACP,OAAO;YACP,OAAO,EAAE,IAAI,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC;YAC7C,gBAAgB,EAAE;gBAChB,wBAAwB,OAAO,IAAI,OAAO,KAAK;aAChD;SACF,CAAC,CAAC;QACH,MAAM,OAAO,CAAC,SAAS,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\nimport { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';\n\nconst tagName = 'pf-panel';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n\n  test('ssr', async ({ browser }) => {\n    const fixture = new SSRPage({\n      tagName,\n      browser,\n      demoDir: new URL('../demo/', import.meta.url),\n      importSpecifiers: [\n        `@patternfly/elements/${tagName}/${tagName}.js`,\n      ],\n    });\n    await fixture.snapshots();\n  });\n});\n"]}

package/pf-popover/pf-popover.d.ts

@@ -1,9 +1,8 @@
-import { LitElement, type PropertyValues } from 'lit';
-import { ComposedEvent } from '@patternfly/pfe-core/core.js';
 import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core/core.js';
 import '@patternfly/elements/pf-button/pf-button.js';
-declare const headingLevels: readonly [2, 3, 4, 5, 6];
-type HeadingLevel = (typeof headingLevels)[number];
+type HeadingLevel = 2 | 3 | 4 | 5 | 6;
 type AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';
 export declare class PopoverHideEvent extends ComposedEvent {
     constructor();
@@ -41,111 +40,93 @@ export declare class PopoverShownEvent extends ComposedEvent {
  * @csspart close-button - The close button
  * @csspart body - The container for the body content
  * @csspart footer - The container for the footer content
- * @cssprop {<length>} --pf-c-popover__arrow--Height
- *          Height of the arrow
- *          {@default `1.5625rem`}
- * @cssprop {<length>} --pf-c-popover__arrow--Width
- *          Width of the arrow
- *          {@default `1.5625rem`}
- * @cssprop {<color>} --pf-c-popover__title-text--Color
- *          Heading font color
- *          {@default `inherit`}
- * @cssprop {<color>} --pf-c-popover__title-icon--Color
- *          Heading icon font color
- *          {@default `#151515`}
- * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor
- *          Arrow background color
- *          {@default `#fff`}
- * @cssprop --pf-c-popover__arrow--BoxShadow
- *          Arrow box shadow
- *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
- * @cssprop --pf-c-popover--BoxShadow
- *          Popover box shadow
- *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop
- *          Popover top padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
- *          Popover right padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom
+ * @cssprop {<length>} [--pf-c-popover__arrow--Height=1.5625rem] Height of the arrow
+ * @cssprop {<length>} [--pf-c-popover__arrow--Width=1.5625rem] Width of the arrow
+ * @cssprop {<color>} [--pf-c-popover__title-text--Color=inherit] Heading font color
+ * @cssprop {<color>} [--pf-c-popover__title-icon--Color=#151515] Heading icon font color
+ * @cssprop {<color>} [--pf-c-popover__arrow--BackgroundColor=#fff] Arrow background color
+ * @cssprop [--pf-c-popover__arrow--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Arrow box shadow
+ * @cssprop [--pf-c-popover--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Popover box shadow
+ * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=1rem] Popover top padding
+ * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=1rem] Popover right padding
+ * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=1rem]
  *          Popover bottom padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft
+ *
+ * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=1rem]
  *          Popover left padding
- *          {@default `1rem`}
- * @cssprop {<number>} --pf-c-popover--line-height
+ *
+ * @cssprop {<number>} [--pf-c-popover--line-height=1.5]
  *          Popover line height
- *          {@default `1.5`}
- * @cssprop {<length>} --pf-c-popover__content--FontSize
+ *
+ * @cssprop {<length>} [--pf-c-popover__content--FontSize=0.875rem]
  *          Popover font-size
- *          {@default `0.875rem`}
- * @cssprop {<color>} --pf-c-popover__content--BackgroundColor
+ *
+ * @cssprop {<color>} [--pf-c-popover__content--BackgroundColor=#fff]
  *          Popover background color
- *          {@default `#fff`}
- * @cssprop {<length>} --pf-c-popover--MaxWidth
+ *
+ * @cssprop {<length>} [--pf-c-popover--MaxWidth=20.75rem]
  *          Popover max-width
- *          {@default `20.75rem`}
- * @cssprop {<length>} --pf-c-popover--MinWidth
+ *
+ * @cssprop {<length>} [--pf-c-popover--MinWidth=20.75rem]
  *          Popover min-width
- *          {@default `20.75rem`}
- * @cssprop {<number>} --pf-c-popover--c-button--Right
+ *
+ * @cssprop {<number>} [--pf-c-popover--c-button--Right=`0]
  *          Close button right position
- *          {@default `0}
- * @cssprop {<number>} --pf-c-popover--c-button--Top
+ *
+ * @cssprop {<number>} [--pf-c-popover--c-button--Top=0]
  *          Close button top position
- *          {@default `0`}
- * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight
+ *
+ * @cssprop {<length>} [--pf-c-popover--c-button--sibling--PaddingRight=3rem]
  *          Padding between close button and its immediate sibling
- *          {@default `3rem`}
- * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight
+ *
+ * @cssprop {<length>} [--pf-c-popover__title-icon--MarginRight=0.5rem]
  *          Heading icon right margin
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-popover__title--FontSize
+ *
+ * @cssprop {<length>} [--pf-c-popover__title--FontSize=1rem]
  *          Header font-size
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-popover__title--MarginBottom
+ *
+ * @cssprop {<length>} [--pf-c-popover__title--MarginBottom=0.5rem]
  *          Header bottom margin
- *          {@default `0.5rem`}
- * @cssprop {<number>} --pf-c-popover__title--LineHeight
+ *
+ * @cssprop {<number>} [--pf-c-popover__title--LineHeight=1.5]
  *          Header line height
- *          {@default `1.5`}
- * @cssprop {<string>} --pf-c-popover__title--FontFamily
+ *
+ * @cssprop {<string>} [--pf-c-popover__title--FontFamily='RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif]
  *          Header font-family
- *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}
- * @cssprop {<length>} --pf-c-popover__footer--MarginTop
+ *
+ * @cssprop {<length>} [--pf-c-popover__footer--MarginTop=1rem]
  *          Footer top margin
- *          {@default `1rem`}
- * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-default__title-text--Color=#003737]
  *          Default alert heading color
- *          {@default `#003737`}
- * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-default__title-icon--Color=#009596]
  *          Default alert icon color
- *          {@default `#009596`}
- * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-info__title-text--Color=#002952]
  *          Default alert heading color
- *          {@default `#002952`}
- * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-info__title-icon--Color=#2b9af3]
  *          Default alert icon color
- *          {@default `#2b9af3`}
- * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-warning__title-text--Color=#795600]
  *          Default alert heading color
- *          {@default `#795600`}
- * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-warning__title-icon--Color=#f0ab00]
  *          Default alert icon color
- *          {@default `#f0ab00`}
- * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-success__title-text--Color=#1e4f18]
  *          Default alert heading color
- *          {@default `#1e4f18`}
- * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-success__title-icon--Color=#3e8635]
  *          Default alert icon color
- *          {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-danger__title-text--Color=#a30000]
  *          Default alert heading color
- *          {@default `#a30000`}
- * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color
+ *
+ * @cssprop {<color>} [--pf-c-popover--m-danger__title-icon--Color=#c9190b]
  *          Default alert icon color
- *          {@default `#c9190b`}
+ *
  */
 export declare class PfPopover extends LitElement {
     #private;
@@ -237,11 +218,12 @@ export declare class PfPopover extends LitElement {
     private _slottedTrigger?;
     private _arrow;
     constructor();
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     disconnectedCallback(): void;
     /**
      * Removes event listeners from the old trigger element and attaches
      * them to the new trigger element.
+     * @param changed changed props
      */
     willUpdate(changed: PropertyValues<this>): void;
     /**

package/pf-popover/pf-popover.js

@@ -1,7 +1,6 @@
 var _PfPopover_instances, _PfPopover_hideDialog, _PfPopover_referenceTrigger, _PfPopover_float, _PfPopover_slots, _PfPopover_getReferenceTrigger, _PfPopover_triggerChanged, _PfPopover_onKeydown, _PfPopover_outsideClick;
-var PfPopover_1;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
-import { LitElement, nothing, html } from 'lit';
+import { LitElement, nothing, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
@@ -10,13 +9,12 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';
 import { bound } from '@patternfly/pfe-core/decorators/bound.js';
 import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
 const styles = css `:host {\n  display: inline;\n  --_floating-arrow-size: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));\n  --_header-text-color: var(--pf-c-popover__title-text--Color, inherit);\n  --_header-icon-color: var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));\n  --_animation-speed: var(--pf-popover--animation-speed, 300ms);\n  --_z-index: var(--pf-popover--z-index, 9999);\n}\n\n.visually-hidden {\n  position: fixed;\n  top: 0;\n  left: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n#container {\n  display: inline-flex;\n  position: relative;\n}\n\n#trigger {\n  display: inline-block;\n  position: relative;\n}\n\n#arrow {\n  display: block;\n  position: absolute;\n  background-color: var(--pf-c-popover__arrow--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));\n  box-shadow: var(\n    --pf-c-popover__arrow--BoxShadow,\n    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))\n  );\n  content: '';\n  height: var(--pf-c-popover__arrow--Height, var(--pf-global--arrow--width-lg, 1.5625rem));\n  width: var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));\n  rotate: 45deg;\n  z-index: -1;\n  pointer-events: none;\n}\n\n#popover {\n  display: block;\n  position: absolute;\n  opacity: 0;\n  z-index: -1;\n  transition: visibility 0s, opacity var(--_animation-speed) cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  left: 0;\n  top: 0;\n  translate: var(--_floating-content-translate);\n  box-shadow: var(\n    --pf-c-popover--BoxShadow,\n    var(--pf-global--BoxShadow--lg, 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08))\n  );\n  border: 0;\n  padding: 0;\n  visibility: hidden;\n}\n\n#popover[open] {\n  opacity: 1;\n  z-index: var(--_z-index);\n  visibility: visible;\n}\n\n[part='content'] {\n  position: relative;\n  padding: var(--pf-c-popover__content--PaddingTop, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingRight, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingBottom, var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-popover__content--PaddingLeft, var(--pf-global--spacer--md, 1rem));\n  word-break: break-word;\n  line-height: var(--pf-c-popover--line-height, 1.5);\n  font-size: var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-popover__content--Color, var(--pf-global--Color--100, #151515));\n  background-color: var(--pf-c-popover__content--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));\n  max-width: var(\n    --pf-c-popover--MaxWidth,\n    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)\n  );\n  min-width: var(\n    --pf-c-popover--MinWidth,\n    calc(var(--pf-c-popover__content--PaddingLeft, 1rem) + var(--pf-c-popover__content--PaddingRight, 1rem) + 18.75rem)\n  );\n  width: max-content;\n}\n\n[part='close-button'] {\n  cursor: pointer;\n  position: absolute;\n  right: var(\n    --pf-c-popover--c-button--Right,\n    calc(var(--pf-c-popover__content--PaddingRight, 1rem) - var(--pf-global--spacer--md, 1rem))\n  );\n  top: var(\n    --pf-c-popover--c-button--Top,\n    calc(var(--pf-c-popover__content--PaddingTop, 1rem) - var(--pf-global--spacer--form-element, 0.375rem))\n  );\n}\n\n[part='content'] > [part='close-button']:not([hidden]) ~ *:not([hidden]) {\n  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight, var(--pf-global--spacer--2xl, 3rem));\n}\n\n[part='header'] {\n  display: flex;\n  align-items: baseline;\n}\n\n[part='icon'] {\n  color: var(--_header-icon-color);\n  margin-right: var(--pf-c-popover__title-icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n}\n\n[part='icon'] ::slotted(*),\n[part='icon'] * {\n  vertical-align: -0.125em;\n}\n\n[part='icon'],\n[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),\n[part='heading'] :is(h2, h3, h4, h5, h6) {\n  font-size: var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  --pf-icon--size: var(\n    --pf-c-popover__title--FontSize,\n    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))\n  );\n}\n\n[part='heading']::slotted(:is(h2, h3, h4, h5, h6)),\n[part='heading'] :is(h2, h3, h4, h5, h6) {\n  color: var(--_header-text-color);\n  margin-top: 0;\n  margin-bottom: var(--pf-c-popover__title--MarginBottom, var(--pf-global--spacer--sm, 0.5rem));\n  line-height: var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));\n  font-family: var(\n    --pf-c-popover__title--FontFamily,\n    var(\n      --pf-global--FontFamily--heading--sans-serif,\n      'RedHatDisplay',\n      'Overpass',\n      overpass,\n      helvetica,\n      arial,\n      sans-serif\n    )\n  );\n}\n\n[part='body'] {\n  display: block;\n  word-wrap: break-word;\n}\n\n[part='footer'] {\n  margin-top: var(--pf-c-popover__footer--MarginTop, var(--pf-global--spacer--md, 1rem));\n}\n\n:host([alert-severity='default']) {\n  --_header-text-color: var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));\n  --_header-icon-color: var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596));\n}\n\n:host([alert-severity='info']) {\n  --_header-text-color: var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));\n  --_header-icon-color: var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3));\n}\n\n:host([alert-severity='warning']) {\n  --_header-icon-color: var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));\n  --_header-text-color: var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600));\n}\n\n:host([alert-severity='success']) {\n  --_header-icon-color: var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));\n  --_header-text-color: var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18));\n}\n\n:host([alert-severity='danger']) {\n  --_header-icon-color: var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));\n  --_header-text-color: var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000));\n}\n`;
-import { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';
-const headingLevels = [2, 3, 4, 5, 6];
 export class PopoverHideEvent extends ComposedEvent {
     constructor() {
         super('hide');
@@ -37,137 +35,7 @@ export class PopoverShownEvent extends ComposedEvent {
         super('shown');
     }
 }
-/**
- * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.
- * @summary Toggle the visibility of helpful or contextual information.
- * @slot -
- *         The default slot holds invoking element.
- *         Typically this would be an icon, button, or other small sized element.
- * @slot heading
- *       This slot renders the content that will be displayed inside of the header of the popover.
- *       Typically this would be a heading element.
- * @slot icon
- *       This slot renders the icon that will be displayed inside the header of the popover,
- *       before the heading.
- * @slot body
- *       This slot renders the content that will be displayed inside of the body of the popover.
- * @slot footer
- *       This slot renders the content that will be displayed inside of the footer of the popover.
- * @csspart container - The component wrapper
- * @csspart content - The content wrapper
- * @csspart header - The header element; only visible if both an icon annd heading are provided.
- * @csspart heading - The heading element
- * @csspart icon - The header icon
- * @csspart close-button - The close button
- * @csspart body - The container for the body content
- * @csspart footer - The container for the footer content
- * @cssprop {<length>} --pf-c-popover__arrow--Height
- *          Height of the arrow
- *          {@default `1.5625rem`}
- * @cssprop {<length>} --pf-c-popover__arrow--Width
- *          Width of the arrow
- *          {@default `1.5625rem`}
- * @cssprop {<color>} --pf-c-popover__title-text--Color
- *          Heading font color
- *          {@default `inherit`}
- * @cssprop {<color>} --pf-c-popover__title-icon--Color
- *          Heading icon font color
- *          {@default `#151515`}
- * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor
- *          Arrow background color
- *          {@default `#fff`}
- * @cssprop --pf-c-popover__arrow--BoxShadow
- *          Arrow box shadow
- *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
- * @cssprop --pf-c-popover--BoxShadow
- *          Popover box shadow
- *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop
- *          Popover top padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight
- *          Popover right padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom
- *          Popover bottom padding
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft
- *          Popover left padding
- *          {@default `1rem`}
- * @cssprop {<number>} --pf-c-popover--line-height
- *          Popover line height
- *          {@default `1.5`}
- * @cssprop {<length>} --pf-c-popover__content--FontSize
- *          Popover font-size
- *          {@default `0.875rem`}
- * @cssprop {<color>} --pf-c-popover__content--BackgroundColor
- *          Popover background color
- *          {@default `#fff`}
- * @cssprop {<length>} --pf-c-popover--MaxWidth
- *          Popover max-width
- *          {@default `20.75rem`}
- * @cssprop {<length>} --pf-c-popover--MinWidth
- *          Popover min-width
- *          {@default `20.75rem`}
- * @cssprop {<number>} --pf-c-popover--c-button--Right
- *          Close button right position
- *          {@default `0}
- * @cssprop {<number>} --pf-c-popover--c-button--Top
- *          Close button top position
- *          {@default `0`}
- * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight
- *          Padding between close button and its immediate sibling
- *          {@default `3rem`}
- * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight
- *          Heading icon right margin
- *          {@default `0.5rem`}
- * @cssprop {<length>} --pf-c-popover__title--FontSize
- *          Header font-size
- *          {@default `1rem`}
- * @cssprop {<length>} --pf-c-popover__title--MarginBottom
- *          Header bottom margin
- *          {@default `0.5rem`}
- * @cssprop {<number>} --pf-c-popover__title--LineHeight
- *          Header line height
- *          {@default `1.5`}
- * @cssprop {<string>} --pf-c-popover__title--FontFamily
- *          Header font-family
- *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}
- * @cssprop {<length>} --pf-c-popover__footer--MarginTop
- *          Footer top margin
- *          {@default `1rem`}
- * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color
- *          Default alert heading color
- *          {@default `#003737`}
- * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color
- *          Default alert icon color
- *          {@default `#009596`}
- * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color
- *          Default alert heading color
- *          {@default `#002952`}
- * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color
- *          Default alert icon color
- *          {@default `#2b9af3`}
- * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color
- *          Default alert heading color
- *          {@default `#795600`}
- * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color
- *          Default alert icon color
- *          {@default `#f0ab00`}
- * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color
- *          Default alert heading color
- *          {@default `#1e4f18`}
- * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color
- *          Default alert icon color
- *          {@default `#3e8635`}
- * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color
- *          Default alert heading color
- *          {@default `#a30000`}
- * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color
- *          Default alert icon color
- *          {@default `#c9190b`}
- */
-let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
+let PfPopover = class PfPopover extends LitElement {
     constructor() {
         super();
         _PfPopover_instances.add(this);
@@ -206,7 +74,9 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
                     return;
             }
         });
-        this.addEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
+        if (!isServer) {
+            this.addEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
+        }
     }
     render() {
         const { alignment, anchor, styles } = __classPrivateFieldGet(this, _PfPopover_float, "f");
@@ -233,7 +103,7 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
       <slot id="heading" name="heading" part="heading" ?hidden=${!hasHeading}>${headingContent}</slot>
     `;
         const headerIcon = this.icon
-            ?? PfPopover_1.alertIcons.get(this.alertSeverity)
+            ?? PfPopover.alertIcons.get(this.alertSeverity)
             ?? '';
         return html `
       <div id="container"
@@ -284,13 +154,14 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        PfPopover_1.instances.delete(this);
+        PfPopover.instances.delete(this);
         __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('click', this.toggle);
         __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', __classPrivateFieldGet(this, _PfPopover_onKeydown, "f"));
     }
     /**
      * Removes event listeners from the old trigger element and attaches
      * them to the new trigger element.
+     * @param changed changed props
      */
     willUpdate(changed) {
         if (changed.has('trigger')) {
@@ -301,7 +172,12 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
      * Toggle the popover
      */
     async toggle() {
-        __classPrivateFieldGet(this, _PfPopover_float, "f").open ? this.hide() : this.show();
+        if (__classPrivateFieldGet(this, _PfPopover_float, "f").open) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
     }
     /**
      * Opens the popover
@@ -319,7 +195,7 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
         });
         this._popover?.show();
         this.dispatchEvent(new PopoverShownEvent());
-        PfPopover_1.instances.add(this);
+        PfPopover.instances.add(this);
     }
     /**
      * Closes the popover
@@ -329,7 +205,7 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
         await __classPrivateFieldGet(this, _PfPopover_float, "f").hide();
         this._popover?.close();
         this.dispatchEvent(new PopoverHiddenEvent());
-        PfPopover_1.instances.delete(this);
+        PfPopover.instances.delete(this);
         __classPrivateFieldSet(this, _PfPopover_hideDialog, true, "f");
         this.requestUpdate();
     }
@@ -341,8 +217,12 @@ _PfPopover_slots = new WeakMap();
 _PfPopover_onKeydown = new WeakMap();
 _PfPopover_instances = new WeakSet();
 _PfPopover_getReferenceTrigger = function _PfPopover_getReferenceTrigger() {
-    const root = this.getRootNode();
-    return !this.trigger ? null : root.getElementById(this.trigger);
+    if (isServer || !this.trigger) {
+        return null;
+    }
+    else {
+        return this.getRootNode().getElementById(this.trigger);
+    }
 };
 _PfPopover_triggerChanged = function _PfPopover_triggerChanged() {
     const oldReferenceTrigger = __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f");
@@ -370,14 +250,17 @@ PfPopover.alertIcons = new Map(Object.entries({
     danger: 'circle-exclamation',
 }));
 (() => {
-    document.addEventListener('click', function (event) {
-        for (const instance of PfPopover_1.instances) {
-            if (!instance.noOutsideClick) {
-                __classPrivateFieldGet(instance, _PfPopover_instances, "m", _PfPopover_outsideClick).call(instance, event);
+    if (!isServer) {
+        document.addEventListener('click', function (event) {
+            for (const instance of PfPopover.instances) {
+                if (!instance.noOutsideClick) {
+                    __classPrivateFieldGet(instance, _PfPopover_instances, "m", _PfPopover_outsideClick).call(instance, event);
+                }
             }
-        }
-    });
+        });
+    }
 })();
+PfPopover.version = "4.0.1";
 __decorate([
     property({ reflect: true })
 ], PfPopover.prototype, "position", void 0);
@@ -464,7 +347,7 @@ __decorate([
 __decorate([
     bound
 ], PfPopover.prototype, "hide", null);
-PfPopover = PfPopover_1 = __decorate([
+PfPopover = __decorate([
     customElement('pf-popover')
 ], PfPopover);
 export { PfPopover };

package/pf-popover/pf-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, nothing, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\nimport type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport styles from './pf-popover.css';\nimport { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';\n\nconst headingLevels = [2, 3, 4, 5, 6] as const;\n\ntype HeadingLevel = (typeof headingLevels)[number];\n\ntype AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';\n\nexport class PopoverHideEvent extends ComposedEvent {\n  constructor() {\n    super('hide');\n  }\n}\n\nexport class PopoverHiddenEvent extends ComposedEvent {\n  constructor() {\n    super('hidden');\n  }\n}\n\nexport class PopoverShowEvent extends ComposedEvent {\n  constructor() {\n    super('show');\n  }\n}\n\nexport class PopoverShownEvent extends ComposedEvent {\n  constructor() {\n    super('shown');\n  }\n}\n\n/**\n * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot -\n *         The default slot holds invoking element.\n *         Typically this would be an icon, button, or other small sized element.\n * @slot heading\n *       This slot renders the content that will be displayed inside of the header of the popover.\n *       Typically this would be a heading element.\n * @slot icon\n *       This slot renders the icon that will be displayed inside the header of the popover,\n *       before the heading.\n * @slot body\n *       This slot renders the content that will be displayed inside of the body of the popover.\n * @slot footer\n *       This slot renders the content that will be displayed inside of the footer of the popover.\n * @csspart container - The component wrapper\n * @csspart content - The content wrapper\n * @csspart header - The header element; only visible if both an icon annd heading are provided.\n * @csspart heading - The heading element\n * @csspart icon - The header icon\n * @csspart close-button - The close button\n * @csspart body - The container for the body content\n * @csspart footer - The container for the footer content\n * @cssprop {<length>} --pf-c-popover__arrow--Height\n *          Height of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<length>} --pf-c-popover__arrow--Width\n *          Width of the arrow\n *          {@default `1.5625rem`}\n * @cssprop {<color>} --pf-c-popover__title-text--Color\n *          Heading font color\n *          {@default `inherit`}\n * @cssprop {<color>} --pf-c-popover__title-icon--Color\n *          Heading icon font color\n *          {@default `#151515`}\n * @cssprop {<color>} --pf-c-popover__arrow--BackgroundColor\n *          Arrow background color\n *          {@default `#fff`}\n * @cssprop --pf-c-popover__arrow--BoxShadow\n *          Arrow box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop --pf-c-popover--BoxShadow\n *          Popover box shadow\n *          {@default `0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingTop\n *          Popover top padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingRight\n *          Popover right padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingBottom\n *          Popover bottom padding\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-tooltip__content--PaddingLeft\n *          Popover left padding\n *          {@default `1rem`}\n * @cssprop {<number>} --pf-c-popover--line-height\n *          Popover line height\n *          {@default `1.5`}\n * @cssprop {<length>} --pf-c-popover__content--FontSize\n *          Popover font-size\n *          {@default `0.875rem`}\n * @cssprop {<color>} --pf-c-popover__content--BackgroundColor\n *          Popover background color\n *          {@default `#fff`}\n * @cssprop {<length>} --pf-c-popover--MaxWidth\n *          Popover max-width\n *          {@default `20.75rem`}\n * @cssprop {<length>} --pf-c-popover--MinWidth\n *          Popover min-width\n *          {@default `20.75rem`}\n * @cssprop {<number>} --pf-c-popover--c-button--Right\n *          Close button right position\n *          {@default `0}\n * @cssprop {<number>} --pf-c-popover--c-button--Top\n *          Close button top position\n *          {@default `0`}\n * @cssprop {<length>} --pf-c-popover--c-button--sibling--PaddingRight\n *          Padding between close button and its immediate sibling\n *          {@default `3rem`}\n * @cssprop {<length>} --pf-c-popover__title-icon--MarginRight\n *          Heading icon right margin\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-popover__title--FontSize\n *          Header font-size\n *          {@default `1rem`}\n * @cssprop {<length>} --pf-c-popover__title--MarginBottom\n *          Header bottom margin\n *          {@default `0.5rem`}\n * @cssprop {<number>} --pf-c-popover__title--LineHeight\n *          Header line height\n *          {@default `1.5`}\n * @cssprop {<string>} --pf-c-popover__title--FontFamily\n *          Header font-family\n *          {@default `'RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif`}\n * @cssprop {<length>} --pf-c-popover__footer--MarginTop\n *          Footer top margin\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-text--Color\n *          Default alert heading color\n *          {@default `#003737`}\n * @cssprop {<color>} --pf-c-popover--m-default__title-icon--Color\n *          Default alert icon color\n *          {@default `#009596`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-text--Color\n *          Default alert heading color\n *          {@default `#002952`}\n * @cssprop {<color>} --pf-c-popover--m-info__title-icon--Color\n *          Default alert icon color\n *          {@default `#2b9af3`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-text--Color\n *          Default alert heading color\n *          {@default `#795600`}\n * @cssprop {<color>} --pf-c-popover--m-warning__title-icon--Color\n *          Default alert icon color\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-text--Color\n *          Default alert heading color\n *          {@default `#1e4f18`}\n * @cssprop {<color>} --pf-c-popover--m-success__title-icon--Color\n *          Default alert icon color\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-text--Color\n *          Default alert heading color\n *          {@default `#a30000`}\n * @cssprop {<color>} --pf-c-popover--m-danger__title-icon--Color\n *          Default alert icon color\n *          {@default `#c9190b`}\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles = [styles];\n\n  private static instances = new Set<PfPopover>();\n\n  private static alertIcons = new Map(Object.entries({\n    default: 'bell',\n    info: 'circle-info',\n    success: 'circle-check',\n    warning: 'triangle-exclamation',\n    danger: 'circle-exclamation',\n  } satisfies Record<AlertSeverity, string>) as [AlertSeverity, string][]);\n\n  static {\n    document.addEventListener('click', function(event) {\n      for (const instance of PfPopover.instances) {\n        if (!instance.noOutsideClick) {\n          instance.#outsideClick(event);\n        }\n      }\n    });\n  }\n\n  /**\n   * Indicates the initial popover position.\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 `top`.\n   */\n  @property({ reflect: true }) position: Placement = 'top';\n\n  /**\n   * The content rendered in the popover's heading.\n   */\n  @property({ reflect: true }) heading?: string;\n\n  /**\n   * The content rendered in the popover's body.\n   */\n  @property({ reflect: true }) body?: string;\n\n  /**\n   * The content rendered in the popover's footer.\n   */\n  @property({ reflect: true }) footer?: string;\n\n  /**\n   * The icon placed before the popover's heading.\n   */\n  @property({ reflect: true }) icon?: string;\n\n  /**\n   * The accessible label for the popover. This is required if the no heading is set.\n   */\n  @property({ reflect: true }) label?: string;\n\n  /**\n   * The distance to set between the popover and its trigger element.\n   */\n  @property({ type: Number, reflect: true }) distance?: number;\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  /**\n   * Disable the flip behavior. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-flip' }) noFlip = false;\n\n  /**\n   * The heading level to use for the popover's header. The default is `h6`.\n   */\n  @property({\n    type: Number,\n    reflect: true,\n    attribute: 'heading-level',\n  }) headingLevel?: HeadingLevel;\n\n  /**\n   * Indicates which icon set to use for the header's icon.\n   * The default is `fas` (Font Awesome Free Solid).\n   */\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Hide the close button. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' }) hideClose?: boolean;\n\n  /**\n   * Indicates the severity variant to use for the alert popover.\n   * There are five options: `default`, `info`, `warning`, `success`, and `danger`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity' }) alertSeverity?: AlertSeverity;\n\n  /**\n   * The accessible label for the popover's close button. The default is `Close popover`.\n   */\n  @property({ reflect: true, attribute: 'accessible-close-label' }) accessibleCloseLabel?: string;\n\n  /**\n   * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead\n   */\n  @deprecation({\n    alias: 'accessible-close-label',\n    attribute: 'close-label',\n  }) closeButtonLabel?: string;\n\n  /**\n   * The text announced by the screen reader to indicate the popover's severity.\n   * The default is `${alertSeverity} alert:`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity-text' }) alertSeverityText?: string;\n\n  /**\n   * Don't hide the popover when clicking ouside of it.\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'no-outside-click',\n  }) noOutsideClick?: boolean;\n\n  /**\n   * The ID of the element to attach the popover to.\n   */\n  @property({ reflect: true }) trigger?: string;\n\n  @query('#popover') private _popover!: HTMLDialogElement;\n  @query('#trigger') private _slottedTrigger?: HTMLElement | null;\n  @query('#arrow') private _arrow!: HTMLDivElement;\n\n  /** True before the show animation begins and after the hide animation ends */\n  #hideDialog = true;\n\n  #referenceTrigger?: HTMLElement | null = null;\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._popover,\n    arrow: () => this._arrow,\n    invoker: () => this.#referenceTrigger || this._slottedTrigger,\n  });\n\n  #slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');\n\n  constructor() {\n    super();\n    this.addEventListener('keydown', this.#onKeydown);\n  }\n\n  render() {\n    const { alignment, anchor, styles } = this.#float;\n    const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;\n    const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;\n    const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;\n\n    // https://github.com/asyncLiz/minify-html-literals/issues/37\n    let headingContent = html`<h6>${this.heading ?? ''}</h6>`;\n    switch (this.headingLevel) {\n      case 2: headingContent = html`<h2>${this.heading ?? ''}</h2>`; break;\n      case 3: headingContent = html`<h3>${this.heading ?? ''}</h3>`; break;\n      case 4: headingContent = html`<h4>${this.heading ?? ''}</h4>`; break;\n      case 5: headingContent = html`<h5>${this.heading ?? ''}</h5>`; break;\n    }\n\n    const headingSlotWithFallback = html`\n      <slot id=\"heading\" name=\"heading\" part=\"heading\" ?hidden=${!hasHeading}>${headingContent}</slot>\n    `;\n\n    const headerIcon = this.icon\n      ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity)\n      ?? '';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\">\n        <slot id=\"trigger\"\n              @slotchange=\"${this.#triggerChanged}\"\n              @keydown=\"${this.#onKeydown}\"\n              @click=\"${this.toggle}\"></slot>\n        <dialog id=\"popover\"\n                ?hidden=\"${this.#hideDialog}\"\n                aria-labelledby=\"heading\"\n                aria-describedby=\"body\"\n                aria-label=${ifDefined(this.label)}>\n          <div id=\"arrow\"></div>\n          <div id=\"content\" part=\"content\">\n            <pf-button id=\"close-button\"\n                       part=\"close-button\"\n                       plain\n                       label=\"${this.accessibleCloseLabel ?? this.closeButtonLabel ?? 'Close popover'}\"\n                       @click=\"${this.hide}\"\n                       @keydown=\"${this.#onKeydown}\"\n                       ?hidden=\"${this.hideClose}\">\n              <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n              </svg>\n            </pf-button>\n            ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n            <header part=\"header\">\n              <span part=\"icon\">\n                <slot name=\"icon\">\n                  <pf-icon icon=\"${headerIcon}\"\n                           set=\"${ifDefined(this.iconSet)}\"\n                           size=\"md\"></pf-icon>\n                </slot>\n              </span>${!this.alertSeverity ? nothing : html`\n              <span class=\"visually-hidden\">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}\n              ${headingSlotWithFallback}\n            </header>`}\n            <slot id=\"body\" part=\"body\" name=\"body\">${this.body ?? ''}</slot>\n            <footer part=\"footer\" ?hidden=${!hasFooter}>\n              <slot name=\"footer\">${this.footer}</slot>\n            </footer>\n          </div>\n        </dialog>\n      </div>\n    `;\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    PfPopover.instances.delete(this);\n    this.#referenceTrigger?.removeEventListener('click', this.toggle);\n    this.#referenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n  }\n\n  #getReferenceTrigger() {\n    const root = this.getRootNode() as Document | ShadowRoot;\n    return !this.trigger ? null : root.getElementById(this.trigger);\n  }\n\n  #triggerChanged() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger = this.#getReferenceTrigger();\n    if (oldReferenceTrigger !== this.#referenceTrigger) {\n      oldReferenceTrigger?.removeEventListener('click', this.toggle);\n      oldReferenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n      this.#referenceTrigger?.addEventListener('click', this.toggle);\n      this.#referenceTrigger?.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  #onKeydown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.hide();\n        return;\n      case 'Enter':\n        if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {\n          event.preventDefault();\n          this.show();\n        }\n        return;\n    }\n  };\n\n  #outsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {\n      this.hide();\n    }\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.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle() {\n    this.#float.open ? this.hide() : this.show();\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show() {\n    this.#hideDialog = false;\n    this.requestUpdate();\n    this.dispatchEvent(new PopoverShowEvent());\n    await this.updateComplete;\n    await this.#float.show({\n      offset: this.distance ?? 25,\n      placement: this.position,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n    this._popover?.show();\n    this.dispatchEvent(new PopoverShownEvent());\n    PfPopover.instances.add(this);\n  }\n\n  /**\n   * Closes the popover\n   */\n  @bound async hide() {\n    this.dispatchEvent(new PopoverHideEvent());\n    await this.#float.hide();\n    this._popover?.close();\n    this.dispatchEvent(new PopoverHiddenEvent());\n    PfPopover.instances.delete(this);\n    this.#hideDialog = true;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-popover': PfPopover;\n  }\n}\n"]}
+{"version":3,"file":"pf-popover.js","sourceRoot":"","sources":["pf-popover.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAuB,QAAQ,EAAuB,MAAM,KAAK,CAAC;AACpG,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,6DAA6D,CAAC;AACpG,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,0CAA0C,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAElF,OAAO,6CAA6C,CAAC;;;AAQrD,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,kBAAmB,SAAQ,aAAa;IACnD;QACE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClB,CAAC;CACF;AAED,MAAM,OAAO,gBAAiB,SAAQ,aAAa;IACjD;QACE,KAAK,CAAC,MAAM,CAAC,CAAC;IAChB,CAAC;CACF;AAED,MAAM,OAAO,iBAAkB,SAAQ,aAAa;IAClD;QACE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjB,CAAC;CACF;AAmHM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IA2JvC;QACE,KAAK,EAAE,CAAC;;QAnIV;;;;;WAKG;QAC0B,aAAQ,GAAc,KAAK,CAAC;QA2CzD;;WAEG;QAC+D,WAAM,GAAG,KAAK,CAAC;QAiEjF,8EAA8E;QAC9E,gCAAc,IAAI,EAAC;QAEnB,sCAAyC,IAAI,EAAC;QAE9C,2BAAS,IAAI,qBAAqB,CAAC,IAAI,EAAE;YACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ;YAC5B,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM;YACxB,OAAO,EAAE,GAAG,EAAE,CAAC,uBAAA,IAAI,mCAAkB,IAAI,IAAI,CAAC,eAAe;SAC9D,CAAC,EAAC;QAEH,2BAAS,IAAI,cAAc,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAC;QA0G7E,+BAAa,CAAC,KAAoB,EAAE,EAAE;YACpC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;gBAClB,KAAK,QAAQ,CAAC;gBACd,KAAK,KAAK;oBACR,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACZ,OAAO;gBACT,KAAK,OAAO;oBACV,IAAI,KAAK,CAAC,MAAM,KAAK,uBAAA,IAAI,mCAAkB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,eAAe,EAAE,CAAC;wBACrF,KAAK,CAAC,cAAc,EAAE,CAAC;wBACvB,IAAI,CAAC,IAAI,EAAE,CAAC;oBACd,CAAC;oBACD,OAAO;YACX,CAAC;QACH,CAAC,EAAC;QApHA,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,uBAAA,IAAI,wBAAO,CAAC;QAClD,MAAM,SAAS,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;QACpE,MAAM,UAAU,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;QACvE,MAAM,OAAO,GAAG,uBAAA,IAAI,wBAAO,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAEtF,6DAA6D;QAC7D,IAAI,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;QAC1D,QAAQ,IAAI,CAAC,YAAY,EAAE,CAAC;YAC1B,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;YACrE,KAAK,CAAC;gBAAE,cAAc,GAAG,IAAI,CAAA,OAAO,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,CAAC;gBAAC,MAAM;QACvE,CAAC;QAED,MAAM,uBAAuB,GAAG,IAAI,CAAA;iEACyB,CAAC,UAAU,IAAI,cAAc;KACzF,CAAC;QAEF,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI;eACvB,SAAS,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,aAA8B,CAAC;eAC7D,EAAE,CAAC;QAER,OAAO,IAAI,CAAA;;oBAEK,QAAQ,CAAC,MAAM,CAAC;oBAChB,QAAQ,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC;;6BAEjD,uBAAA,IAAI,uDAAgB;0BACvB,uBAAA,IAAI,4BAAW;wBACjB,IAAI,CAAC,MAAM;;2BAER,uBAAA,IAAI,6BAAY;;;6BAGd,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;;;;;gCAMlB,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,gBAAgB,IAAI,eAAe;iCACpE,IAAI,CAAC,IAAI;mCACP,uBAAA,IAAI,4BAAW;kCAChB,IAAI,CAAC,SAAS;;;;;cAKlC,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;mCAIpC,UAAU;kCACX,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;;;uBAGlC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA;8CACb,IAAI,CAAC,iBAAiB,IAAI,GAAG,IAAI,CAAC,aAAa,SAAS,SAAS;gBAC/F,uBAAuB;sBACjB;sDACgC,IAAI,CAAC,IAAI,IAAI,EAAE;4CACzB,CAAC,SAAS;oCAClB,IAAI,CAAC,MAAM;;;;;KAK1C,CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAClE,uBAAA,IAAI,mCAAkB,EAAE,mBAAmB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;IAC1E,CAAC;IA4CD;;;;OAIG;IACM,UAAU,CAAC,OAA6B;QAC/C,IAAI,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,uBAAA,IAAI,uDAAgB,MAApB,IAAI,CAAkB,CAAC;QACzB,CAAC;IACH,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,MAAM;QACjB,IAAI,uBAAA,IAAI,wBAAO,CAAC,IAAI,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,uBAAA,IAAI,yBAAe,KAAK,MAAA,CAAC;QACzB,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,IAAI,CAAC,cAAc,CAAC;QAC1B,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,CAAC;YACrB,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,EAAE;YAC3B,SAAS,EAAE,IAAI,CAAC,QAAQ;YACxB,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM;YAClB,kBAAkB,EAAE,IAAI,CAAC,YAAY;SACtC,CAAC,CAAC;QACH,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,EAAE,CAAC,CAAC;QAC5C,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED;;OAEG;IACU,AAAN,KAAK,CAAC,IAAI;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,gBAAgB,EAAE,CAAC,CAAC;QAC3C,MAAM,uBAAA,IAAI,wBAAO,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,kBAAkB,EAAE,CAAC,CAAC;QAC7C,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACjC,uBAAA,IAAI,yBAAe,IAAI,MAAA,CAAC;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;;;;;;;;;IA7FC,IAAI,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;SAAM,CAAC;QACN,OAAQ,IAAI,CAAC,WAAW,EAA4B,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACpF,CAAC;AACH,CAAC;;IAGC,MAAM,mBAAmB,GAAG,uBAAA,IAAI,mCAAkB,CAAC;IACnD,uBAAA,IAAI,+BAAqB,uBAAA,IAAI,4DAAqB,MAAzB,IAAI,CAAuB,MAAA,CAAC;IACrD,IAAI,mBAAmB,KAAK,uBAAA,IAAI,mCAAkB,EAAE,CAAC;QACnD,mBAAmB,EAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,mBAAmB,EAAE,mBAAmB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;QACrE,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,uBAAA,IAAI,mCAAkB,EAAE,gBAAgB,CAAC,SAAS,EAAE,uBAAA,IAAI,4BAAW,CAAC,CAAC;IACvE,CAAC;AACH,CAAC;2DAkBa,KAAiB;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAA,IAAI,mCAAiC,CAAC,EAAE,CAAC;QAClF,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;AACH,CAAC;AAvRe,gBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;AAEpC,mBAAS,GAAG,IAAI,GAAG,EAAa,AAAvB,CAAwB;AAEjC,oBAAU,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,OAAO,CAAC;IACjD,OAAO,EAAE,MAAM;IACf,IAAI,EAAE,aAAa;IACnB,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE,sBAAsB;IAC/B,MAAM,EAAE,oBAAoB;CACW,CAA8B,CAAC,AAN/C,CAMgD;AAEzE;IACE,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,UAAS,KAAK;YAC/C,KAAK,MAAM,QAAQ,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;gBAC3C,IAAI,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC;oBAC7B,uBAAA,QAAQ,qDAAc,MAAtB,QAAQ,EAAe,KAAK,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,GAAA,CAAA;;AAQ4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA6B;AAK5B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAKjB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAKhB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAKd;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAKD;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmB;AAW1D;IAHF,QAAQ,CAAC;QACR,SAAS,EAAE,eAAe;QAC1B,SAAS,EAAE,mBAAmB;KAC/B,CAAC;+CAA4B;AAKoC;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;yCAAgB;AAS9E;IAJF,QAAQ,CAAC;QACR,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,eAAe;KAC3B,CAAC;+CAA6B;AAMqB;IAAnD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;0CAAkB;AAKA;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;4CAAqB;AAM/B;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;gDAA+B;AAKtB;IAAjE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;uDAA+B;AAQ7F;IAHF,WAAW,CAAC;QACX,KAAK,EAAE,wBAAwB;QAC/B,SAAS,EAAE,aAAa;KACzB,CAAC;mDAA2B;AAMkC;IAA9D,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC;oDAA4B;AASvF;IAJF,QAAQ,CAAC;QACR,IAAI,EAAE,OAAO;QACb,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,kBAAkB;KAC9B,CAAC;iDAA0B;AAKC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AAEnB;IAA1B,KAAK,CAAC,UAAU,CAAC;2CAAsC;AAC7B;IAA1B,KAAK,CAAC,UAAU,CAAC;kDAA8C;AACvC;IAAxB,KAAK,CAAC,QAAQ,CAAC;yCAAiC;AA4JpC;IAAZ,KAAK;uCAML;AAKY;IAAZ,KAAK;qCAcL;AAKY;IAAZ,KAAK;qCAQL;AA9UU,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { LitElement, nothing, html, type PropertyValues, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { deprecation } from '@patternfly/pfe-core/decorators/deprecation.js';\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\nimport { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\n\nimport styles from './pf-popover.css';\n\ntype HeadingLevel = 2 | 3 | 4 | 5 | 6;\n\ntype AlertSeverity = 'default' | 'info' | 'warning' | 'success' | 'danger';\n\nexport class PopoverHideEvent extends ComposedEvent {\n  constructor() {\n    super('hide');\n  }\n}\n\nexport class PopoverHiddenEvent extends ComposedEvent {\n  constructor() {\n    super('hidden');\n  }\n}\n\nexport class PopoverShowEvent extends ComposedEvent {\n  constructor() {\n    super('show');\n  }\n}\n\nexport class PopoverShownEvent extends ComposedEvent {\n  constructor() {\n    super('shown');\n  }\n}\n\n/**\n * A **Popover** displays content in a non-modal dialog and adds contextual information or provides resources via text and links.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot -\n *         The default slot holds invoking element.\n *         Typically this would be an icon, button, or other small sized element.\n * @slot heading\n *       This slot renders the content that will be displayed inside of the header of the popover.\n *       Typically this would be a heading element.\n * @slot icon\n *       This slot renders the icon that will be displayed inside the header of the popover,\n *       before the heading.\n * @slot body\n *       This slot renders the content that will be displayed inside of the body of the popover.\n * @slot footer\n *       This slot renders the content that will be displayed inside of the footer of the popover.\n * @csspart container - The component wrapper\n * @csspart content - The content wrapper\n * @csspart header - The header element; only visible if both an icon annd heading are provided.\n * @csspart heading - The heading element\n * @csspart icon - The header icon\n * @csspart close-button - The close button\n * @csspart body - The container for the body content\n * @csspart footer - The container for the footer content\n * @cssprop {<length>} [--pf-c-popover__arrow--Height=1.5625rem] Height of the arrow\n * @cssprop {<length>} [--pf-c-popover__arrow--Width=1.5625rem] Width of the arrow\n * @cssprop {<color>} [--pf-c-popover__title-text--Color=inherit] Heading font color\n * @cssprop {<color>} [--pf-c-popover__title-icon--Color=#151515] Heading icon font color\n * @cssprop {<color>} [--pf-c-popover__arrow--BackgroundColor=#fff] Arrow background color\n * @cssprop [--pf-c-popover__arrow--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Arrow box shadow\n * @cssprop [--pf-c-popover--BoxShadow=0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08)] Popover box shadow\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingTop=1rem] Popover top padding\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingRight=1rem] Popover right padding\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingBottom=1rem]\n *          Popover bottom padding\n *\n * @cssprop {<length>} [--pf-c-tooltip__content--PaddingLeft=1rem]\n *          Popover left padding\n *\n * @cssprop {<number>} [--pf-c-popover--line-height=1.5]\n *          Popover line height\n *\n * @cssprop {<length>} [--pf-c-popover__content--FontSize=0.875rem]\n *          Popover font-size\n *\n * @cssprop {<color>} [--pf-c-popover__content--BackgroundColor=#fff]\n *          Popover background color\n *\n * @cssprop {<length>} [--pf-c-popover--MaxWidth=20.75rem]\n *          Popover max-width\n *\n * @cssprop {<length>} [--pf-c-popover--MinWidth=20.75rem]\n *          Popover min-width\n *\n * @cssprop {<number>} [--pf-c-popover--c-button--Right=`0]\n *          Close button right position\n *\n * @cssprop {<number>} [--pf-c-popover--c-button--Top=0]\n *          Close button top position\n *\n * @cssprop {<length>} [--pf-c-popover--c-button--sibling--PaddingRight=3rem]\n *          Padding between close button and its immediate sibling\n *\n * @cssprop {<length>} [--pf-c-popover__title-icon--MarginRight=0.5rem]\n *          Heading icon right margin\n *\n * @cssprop {<length>} [--pf-c-popover__title--FontSize=1rem]\n *          Header font-size\n *\n * @cssprop {<length>} [--pf-c-popover__title--MarginBottom=0.5rem]\n *          Header bottom margin\n *\n * @cssprop {<number>} [--pf-c-popover__title--LineHeight=1.5]\n *          Header line height\n *\n * @cssprop {<string>} [--pf-c-popover__title--FontFamily='RedHatDisplay', 'Overpass', overpass, helvetica, arial, sans-serif]\n *          Header font-family\n *\n * @cssprop {<length>} [--pf-c-popover__footer--MarginTop=1rem]\n *          Footer top margin\n *\n * @cssprop {<color>} [--pf-c-popover--m-default__title-text--Color=#003737]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-default__title-icon--Color=#009596]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-info__title-text--Color=#002952]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-info__title-icon--Color=#2b9af3]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-warning__title-text--Color=#795600]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-warning__title-icon--Color=#f0ab00]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-success__title-text--Color=#1e4f18]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-success__title-icon--Color=#3e8635]\n *          Default alert icon color\n *\n * @cssprop {<color>} [--pf-c-popover--m-danger__title-text--Color=#a30000]\n *          Default alert heading color\n *\n * @cssprop {<color>} [--pf-c-popover--m-danger__title-icon--Color=#c9190b]\n *          Default alert icon color\n *\n */\n@customElement('pf-popover')\nexport class PfPopover extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  private static instances = new Set<PfPopover>();\n\n  private static alertIcons = new Map(Object.entries({\n    default: 'bell',\n    info: 'circle-info',\n    success: 'circle-check',\n    warning: 'triangle-exclamation',\n    danger: 'circle-exclamation',\n  } satisfies Record<AlertSeverity, string>) as [AlertSeverity, string][]);\n\n  static {\n    if (!isServer) {\n      document.addEventListener('click', function(event) {\n        for (const instance of PfPopover.instances) {\n          if (!instance.noOutsideClick) {\n            instance.#outsideClick(event);\n          }\n        }\n      });\n    }\n  }\n\n  /**\n   * Indicates the initial popover position.\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 `top`.\n   */\n  @property({ reflect: true }) position: Placement = 'top';\n\n  /**\n   * The content rendered in the popover's heading.\n   */\n  @property({ reflect: true }) heading?: string;\n\n  /**\n   * The content rendered in the popover's body.\n   */\n  @property({ reflect: true }) body?: string;\n\n  /**\n   * The content rendered in the popover's footer.\n   */\n  @property({ reflect: true }) footer?: string;\n\n  /**\n   * The icon placed before the popover's heading.\n   */\n  @property({ reflect: true }) icon?: string;\n\n  /**\n   * The accessible label for the popover. This is required if the no heading is set.\n   */\n  @property({ reflect: true }) label?: string;\n\n  /**\n   * The distance to set between the popover and its trigger element.\n   */\n  @property({ type: Number, reflect: true }) distance?: number;\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  /**\n   * Disable the flip behavior. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'no-flip' }) noFlip = false;\n\n  /**\n   * The heading level to use for the popover's header. The default is `h6`.\n   */\n  @property({\n    type: Number,\n    reflect: true,\n    attribute: 'heading-level',\n  }) headingLevel?: HeadingLevel;\n\n  /**\n   * Indicates which icon set to use for the header's icon.\n   * The default is `fas` (Font Awesome Free Solid).\n   */\n  @property({ reflect: true, attribute: 'icon-set' }) iconSet?: string;\n\n  /**\n   * Hide the close button. The default is `false`.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-close' }) hideClose?: boolean;\n\n  /**\n   * Indicates the severity variant to use for the alert popover.\n   * There are five options: `default`, `info`, `warning`, `success`, and `danger`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity' }) alertSeverity?: AlertSeverity;\n\n  /**\n   * The accessible label for the popover's close button. The default is `Close popover`.\n   */\n  @property({ reflect: true, attribute: 'accessible-close-label' }) accessibleCloseLabel?: string;\n\n  /**\n   * @deprecated do not use the color-palette attribute, which was added by mistake. use context-providing containers (e.g. rh-card) instead\n   */\n  @deprecation({\n    alias: 'accessible-close-label',\n    attribute: 'close-label',\n  }) closeButtonLabel?: string;\n\n  /**\n   * The text announced by the screen reader to indicate the popover's severity.\n   * The default is `${alertSeverity} alert:`.\n   */\n  @property({ reflect: true, attribute: 'alert-severity-text' }) alertSeverityText?: string;\n\n  /**\n   * Don't hide the popover when clicking ouside of it.\n   */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'no-outside-click',\n  }) noOutsideClick?: boolean;\n\n  /**\n   * The ID of the element to attach the popover to.\n   */\n  @property({ reflect: true }) trigger?: string;\n\n  @query('#popover') private _popover!: HTMLDialogElement;\n  @query('#trigger') private _slottedTrigger?: HTMLElement | null;\n  @query('#arrow') private _arrow!: HTMLDivElement;\n\n  /** True before the show animation begins and after the hide animation ends */\n  #hideDialog = true;\n\n  #referenceTrigger?: HTMLElement | null = null;\n\n  #float = new FloatingDOMController(this, {\n    content: () => this._popover,\n    arrow: () => this._arrow,\n    invoker: () => this.#referenceTrigger || this._slottedTrigger,\n  });\n\n  #slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');\n\n  constructor() {\n    super();\n    if (!isServer) {\n      this.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  render(): TemplateResult<1> {\n    const { alignment, anchor, styles } = this.#float;\n    const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;\n    const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;\n    const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;\n\n    // https://github.com/asyncLiz/minify-html-literals/issues/37\n    let headingContent = html`<h6>${this.heading ?? ''}</h6>`;\n    switch (this.headingLevel) {\n      case 2: headingContent = html`<h2>${this.heading ?? ''}</h2>`; break;\n      case 3: headingContent = html`<h3>${this.heading ?? ''}</h3>`; break;\n      case 4: headingContent = html`<h4>${this.heading ?? ''}</h4>`; break;\n      case 5: headingContent = html`<h5>${this.heading ?? ''}</h5>`; break;\n    }\n\n    const headingSlotWithFallback = html`\n      <slot id=\"heading\" name=\"heading\" part=\"heading\" ?hidden=${!hasHeading}>${headingContent}</slot>\n    `;\n\n    const headerIcon = this.icon\n      ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity)\n      ?? '';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\">\n        <slot id=\"trigger\"\n              @slotchange=\"${this.#triggerChanged}\"\n              @keydown=\"${this.#onKeydown}\"\n              @click=\"${this.toggle}\"></slot>\n        <dialog id=\"popover\"\n                ?hidden=\"${this.#hideDialog}\"\n                aria-labelledby=\"heading\"\n                aria-describedby=\"body\"\n                aria-label=${ifDefined(this.label)}>\n          <div id=\"arrow\"></div>\n          <div id=\"content\" part=\"content\">\n            <pf-button id=\"close-button\"\n                       part=\"close-button\"\n                       plain\n                       label=\"${this.accessibleCloseLabel ?? this.closeButtonLabel ?? 'Close popover'}\"\n                       @click=\"${this.hide}\"\n                       @keydown=\"${this.#onKeydown}\"\n                       ?hidden=\"${this.hideClose}\">\n              <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 352 512\">\n                <path d=\"M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z\"/>\n              </svg>\n            </pf-button>\n            ${!(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n            <header part=\"header\">\n              <span part=\"icon\">\n                <slot name=\"icon\">\n                  <pf-icon icon=\"${headerIcon}\"\n                           set=\"${ifDefined(this.iconSet)}\"\n                           size=\"md\"></pf-icon>\n                </slot>\n              </span>${!this.alertSeverity ? nothing : html`\n              <span class=\"visually-hidden\">${this.alertSeverityText ?? `${this.alertSeverity} alert:`}</span>`}\n              ${headingSlotWithFallback}\n            </header>`}\n            <slot id=\"body\" part=\"body\" name=\"body\">${this.body ?? ''}</slot>\n            <footer part=\"footer\" ?hidden=${!hasFooter}>\n              <slot name=\"footer\">${this.footer}</slot>\n            </footer>\n          </div>\n        </dialog>\n      </div>\n    `;\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    PfPopover.instances.delete(this);\n    this.#referenceTrigger?.removeEventListener('click', this.toggle);\n    this.#referenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n  }\n\n  #getReferenceTrigger() {\n    if (isServer || !this.trigger) {\n      return null;\n    } else {\n      return (this.getRootNode() as Document | ShadowRoot).getElementById(this.trigger);\n    }\n  }\n\n  #triggerChanged() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger = this.#getReferenceTrigger();\n    if (oldReferenceTrigger !== this.#referenceTrigger) {\n      oldReferenceTrigger?.removeEventListener('click', this.toggle);\n      oldReferenceTrigger?.removeEventListener('keydown', this.#onKeydown);\n      this.#referenceTrigger?.addEventListener('click', this.toggle);\n      this.#referenceTrigger?.addEventListener('keydown', this.#onKeydown);\n    }\n  }\n\n  #onKeydown = (event: KeyboardEvent) => {\n    switch (event.key) {\n      case 'Escape':\n      case 'Esc':\n        event.preventDefault();\n        this.hide();\n        return;\n      case 'Enter':\n        if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {\n          event.preventDefault();\n          this.show();\n        }\n        return;\n    }\n  };\n\n  #outsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this) && !path.includes(this.#referenceTrigger as HTMLElement)) {\n      this.hide();\n    }\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 props\n   */\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('trigger')) {\n      this.#triggerChanged();\n    }\n  }\n\n  /**\n   * Toggle the popover\n   */\n  @bound async toggle(): Promise<void> {\n    if (this.#float.open) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  /**\n   * Opens the popover\n   */\n  @bound async show(): Promise<void> {\n    this.#hideDialog = false;\n    this.requestUpdate();\n    this.dispatchEvent(new PopoverShowEvent());\n    await this.updateComplete;\n    await this.#float.show({\n      offset: this.distance ?? 25,\n      placement: this.position,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n    this._popover?.show();\n    this.dispatchEvent(new PopoverShownEvent());\n    PfPopover.instances.add(this);\n  }\n\n  /**\n   * Closes the popover\n   */\n  @bound async hide(): Promise<void> {\n    this.dispatchEvent(new PopoverHideEvent());\n    await this.#float.hide();\n    this._popover?.close();\n    this.dispatchEvent(new PopoverHiddenEvent());\n    PfPopover.instances.delete(this);\n    this.#hideDialog = true;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-popover': PfPopover;\n  }\n}\n"]}