@patternfly/elements 2.3.1 → 2.4.0

package/pf-popover/pf-popover.js

@@ -1,5 +1,6 @@
+var _PfPopover_instances, _PfPopover_referenceTrigger, _PfPopover_float, _PfPopover_slots, _PfPopover_getReferenceTrigger, _PfPopover_triggerChanged, _PfPopover_outsideClick;
 var PfPopover_1;
-import { __decorate } from "tslib";
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
 import { LitElement, nothing, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
@@ -11,7 +12,6 @@ import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { bound } from '@patternfly/pfe-core/decorators/bound.js';
 import { ComposedEvent, StringListConverter } from '@patternfly/pfe-core/core.js';
-import { observed } from '@patternfly/pfe-core/decorators/observed.js';
 import '@patternfly/elements/pf-button/pf-button.js';
 import { css } from "lit";
 const styles = css `:host{display:inline;--_floating-arrow-size:var(--pf-c-popover__arrow--Width, var(--pf-global--arrow--width-lg, 1.5625rem));--_header-text-color:var(--pf-c-popover__title-text--Color, inherit);--_header-icon-color:var(--pf-c-popover__title-icon--Color, var(--pf-global--Color--100, #151515));--_animation-speed:var(--pf-popover--animation-speed, 300ms);--_z-index:var(--pf-popover--z-index, 9999)}.visually-hidden{position:fixed;top:0;left:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}#container{display:inline-flex;position:relative}#trigger{display:inline-block;position:relative}#arrow{display:block;position:absolute;background-color:var(--pf-c-popover__arrow--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-popover__arrow--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));content:'';height:var(--pf-c-popover__arrow--Height,var(--pf-global--arrow--width-lg,1.5625rem));width:var(--pf-c-popover__arrow--Width,var(--pf-global--arrow--width-lg,1.5625rem));rotate:45deg;z-index:-1;pointer-events:none}#popover{display:block;position:absolute;opacity:0;z-index:-1;transition:visibility 0s,opacity var(--_animation-speed) cubic-bezier(.54, 1.5, .38, 1.11) 0s;left:0;top:0;translate:var(--_floating-content-translate);box-shadow:var(--pf-c-popover--BoxShadow,var(--pf-global--BoxShadow--lg,0 .5rem 1rem 0 rgba(3,3,3,.16),0 0 .375rem 0 rgba(3,3,3,.08)));border:0;padding:0;visibility:hidden}#popover[open]{opacity:1;z-index:var(--_z-index);visibility:visible}[part=content]{position:relative;padding:var(--pf-c-popover__content--PaddingTop,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingBottom,var(--pf-global--spacer--md,1rem)) var(--pf-c-popover__content--PaddingLeft,var(--pf-global--spacer--md,1rem));word-break:break-word;line-height:var(--pf-c-popover--line-height, 1.5);font-size:var(--pf-c-popover__content--FontSize, var(--pf-global--FontSize--sm, .875rem));color:var(--pf-c-popover__content--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-popover__content--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));max-width:var(--pf-c-popover--MaxWidth,calc(var(--pf-c-popover__content--PaddingLeft,1rem) + var(--pf-c-popover__content--PaddingRight,1rem) + 18.75rem));min-width:var(--pf-c-popover--MinWidth,calc(var(--pf-c-popover__content--PaddingLeft,1rem) + var(--pf-c-popover__content--PaddingRight,1rem) + 18.75rem));width:max-content}[part=close-button]{cursor:pointer;position:absolute;right:var(--pf-c-popover--c-button--Right,calc(var(--pf-c-popover__content--PaddingRight,1rem) - var(--pf-global--spacer--md,1rem)));top:var(--pf-c-popover--c-button--Top,calc(var(--pf-c-popover__content--PaddingTop,1rem) - var(--pf-global--spacer--form-element,.375rem)))}[part=content]>[part=close-button]:not([hidden])~:not([hidden]){padding-right:var(--pf-c-popover--c-button--sibling--PaddingRight,var(--pf-global--spacer--2xl,3rem))}[part=header]{display:flex;align-items:baseline}[part=icon]{color:var(--_header-icon-color);margin-right:var(--pf-c-popover__title-icon--MarginRight,var(--pf-global--spacer--sm,.5rem))}[part=icon] *,[part=icon] ::slotted(*){vertical-align:-.125em}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)),[part=icon]{font-size:var(--pf-c-popover__title--FontSize, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-global--FontWeight--normal,400);--pf-icon--size:var(\n    --pf-c-popover__title--FontSize,\n    var(--pf-global--FontSize--md, var(--pf-global--icon--FontSize--md, 1em))\n  )}[part=heading] :is(h2,h3,h4,h5,h6),[part=heading]::slotted(:is(h2,h3,h4,h5,h6)){color:var(--_header-text-color);margin-top:0;margin-bottom:var(--pf-c-popover__title--MarginBottom,var(--pf-global--spacer--sm,.5rem));line-height:var(--pf-c-popover__title--LineHeight, var(--pf-global--LineHeight--md, 1.5));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  )}[part=body]{display:block;word-wrap:break-word}[part=footer]{margin-top:var(--pf-c-popover__footer--MarginTop,var(--pf-global--spacer--md,1rem))}:host([alert-severity=default]){--_header-text-color:var(--pf-c-popover--m-default__title-text--Color, var(--pf-global--default-color--300, #003737));--_header-icon-color:var(--pf-c-popover--m-default__title-icon--Color, var(--pf-global--default-color--200, #009596))}:host([alert-severity=info]){--_header-text-color:var(--pf-c-popover--m-info__title-text--Color, var(--pf-global--info-color--200, #002952));--_header-icon-color:var(--pf-c-popover--m-info__title-icon--Color, var(--pf-global--info-color--100, #2b9af3))}:host([alert-severity=warning]){--_header-icon-color:var(--pf-c-popover--m-warning__title-icon--Color, var(--pf-global--warning-color--100, #f0ab00));--_header-text-color:var(--pf-c-popover--m-warning__title-text--Color, var(--pf-global--warning-color--200, #795600))}:host([alert-severity=success]){--_header-icon-color:var(--pf-c-popover--m-success__title-icon--Color, var(--pf-global--success-color--100, #3e8635));--_header-text-color:var(--pf-c-popover--m-success__title-text--Color, var(--pf-global--success-color--200, #1e4f18))}:host([alert-severity=danger]){--_header-icon-color:var(--pf-c-popover--m-danger__title-icon--Color, var(--pf-global--danger-color--100, #c9190b));--_header-text-color:var(--pf-c-popover--m-danger__title-text--Color, var(--pf-global--danger-color--200, #a30000))}`;
@@ -173,6 +173,7 @@ export class PopoverShownEvent extends ComposedEvent {
 let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
     constructor() {
         super(...arguments);
+        _PfPopover_instances.add(this);
         /**
          * Indicates the initial popover position.
          * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,
@@ -184,44 +185,23 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
          * Disable the flip behavior. The default is `false`.
          */
         this.noFlip = false;
-        this.#referenceTrigger = null;
-        this.#float = new FloatingDOMController(this, {
+        _PfPopover_referenceTrigger.set(this, null);
+        _PfPopover_float.set(this, new FloatingDOMController(this, {
             content: () => this._popover,
             arrow: () => this._arrow,
-            invoker: () => this.#referenceTrigger || this._slottedTrigger,
-        });
-        this.#slots = new SlotController(this, null, 'icon', 'heading', 'body', 'footer');
-    }
-    static { this.styles = [styles]; }
-    static { this.instances = new Set(); }
-    static { this.alertIcons = new Map(Object.entries({
-        default: 'bell',
-        info: 'circle-info',
-        success: 'circle-check',
-        warning: 'triangle-exclamation',
-        danger: 'circle-exclamation',
-    })); }
-    static {
-        document.addEventListener('click', function (event) {
-            for (const instance of PfPopover_1.instances) {
-                if (!instance.noOutsideClick) {
-                    instance.#outsideClick(event);
-                }
-            }
-        });
+            invoker: () => __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || this._slottedTrigger,
+        }));
+        _PfPopover_slots.set(this, new SlotController(this, null, 'icon', 'heading', 'body', 'footer'));
     }
-    #referenceTrigger;
-    #float;
-    #slots;
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('keydown', this.onKeydown);
     }
     render() {
-        const { alignment, anchor, styles } = this.#float;
-        const hasFooter = this.#slots.hasSlotted('footer') || !!this.footer;
-        const hasHeading = this.#slots.hasSlotted('heading') || !!this.heading;
-        const hasIcon = this.#slots.hasSlotted('icon') || !!this.icon || !!this.alertSeverity;
+        const { alignment, anchor, styles } = __classPrivateFieldGet(this, _PfPopover_float, "f");
+        const hasFooter = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('footer') || !!this.footer;
+        const hasHeading = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('heading') || !!this.heading;
+        const hasIcon = __classPrivateFieldGet(this, _PfPopover_slots, "f").hasSlotted('icon') || !!this.icon || !!this.alertSeverity;
         // https://github.com/asyncLiz/minify-html-literals/issues/37
         let headingContent = html `<h6>${this.heading ?? ''}</h6>`;
         switch (this.headingLevel) {
@@ -258,7 +238,10 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
       <div id="container"
            style="${styleMap(styles)}"
            class="${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}">
-        <slot id="trigger" @keydown=${this.onKeydown} @click=${this.toggle}></slot>
+        <slot id="trigger"
+              @slotchange="${__classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_triggerChanged)}"
+              @keydown=${this.onKeydown}
+              @click=${this.toggle}></slot>
         <dialog id="popover" aria-labelledby="heading" aria-describedby="body" aria-label=${ifDefined(this.label)}>
           <div id="arrow"></div>
           <div id="content" part="content">
@@ -286,8 +269,8 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
     disconnectedCallback() {
         super.disconnectedCallback();
         PfPopover_1.instances.delete(this);
-        this.#referenceTrigger?.removeEventListener('click', this.show);
-        this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('click', this.toggle);
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.removeEventListener('keydown', this.onKeydown);
     }
     onKeydown(event) {
         switch (event.key) {
@@ -297,39 +280,27 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
                 this.hide();
                 return;
             case 'Enter':
-                if (event.target === this.#referenceTrigger || event.target === this._slottedTrigger) {
+                if (event.target === __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f") || event.target === this._slottedTrigger) {
                     event.preventDefault();
                     this.show();
                 }
                 return;
         }
     }
-    #outsideClick(event) {
-        const path = event.composedPath();
-        if (!path.includes(this) && !path.includes(this.#referenceTrigger)) {
-            this.hide();
-        }
-    }
     /**
      * Removes event listeners from the old trigger element and attaches
      * them to the new trigger element.
      */
-    triggerChanged(oldValue, newValue) {
-        if (oldValue) {
-            this.#referenceTrigger?.removeEventListener('click', this.show);
-            this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);
-        }
-        if (newValue) {
-            this.#referenceTrigger = this.getRootNode().getElementById(newValue);
-            this.#referenceTrigger?.addEventListener('click', this.show);
-            this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);
+    willUpdate(changed) {
+        if (changed.has('trigger')) {
+            __classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_triggerChanged).call(this);
         }
     }
     /**
      * Toggle the popover
      */
     async toggle() {
-        this.#float.open ? this.hide() : this.show();
+        __classPrivateFieldGet(this, _PfPopover_float, "f").open ? this.hide() : this.show();
     }
     /**
      * Opens the popover
@@ -337,7 +308,7 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
     async show() {
         this.dispatchEvent(new PopoverShowEvent());
         await this.updateComplete;
-        await this.#float.show({
+        await __classPrivateFieldGet(this, _PfPopover_float, "f").show({
             offset: this.distance ?? 25,
             placement: this.position,
             flip: !this.noFlip,
@@ -352,12 +323,54 @@ let PfPopover = PfPopover_1 = class PfPopover extends LitElement {
      */
     async hide() {
         this.dispatchEvent(new PopoverHideEvent());
-        await this.#float.hide();
+        await __classPrivateFieldGet(this, _PfPopover_float, "f").hide();
         this._popover?.close();
         this.dispatchEvent(new PopoverHiddenEvent());
         PfPopover_1.instances.delete(this);
     }
 };
+_PfPopover_referenceTrigger = new WeakMap();
+_PfPopover_float = new WeakMap();
+_PfPopover_slots = new WeakMap();
+_PfPopover_instances = new WeakSet();
+_PfPopover_getReferenceTrigger = function _PfPopover_getReferenceTrigger() {
+    const root = this.getRootNode();
+    return !this.trigger ? null : root.getElementById(this.trigger);
+};
+_PfPopover_triggerChanged = function _PfPopover_triggerChanged() {
+    const oldReferenceTrigger = __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f");
+    __classPrivateFieldSet(this, _PfPopover_referenceTrigger, __classPrivateFieldGet(this, _PfPopover_instances, "m", _PfPopover_getReferenceTrigger).call(this), "f");
+    if (oldReferenceTrigger !== __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")) {
+        oldReferenceTrigger?.removeEventListener('click', this.toggle);
+        oldReferenceTrigger?.removeEventListener('keydown', this.onKeydown);
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('click', this.toggle);
+        __classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f")?.addEventListener('keydown', this.onKeydown);
+    }
+};
+_PfPopover_outsideClick = function _PfPopover_outsideClick(event) {
+    const path = event.composedPath();
+    if (!path.includes(this) && !path.includes(__classPrivateFieldGet(this, _PfPopover_referenceTrigger, "f"))) {
+        this.hide();
+    }
+};
+PfPopover.styles = [styles];
+PfPopover.instances = new Set();
+PfPopover.alertIcons = new Map(Object.entries({
+    default: 'bell',
+    info: 'circle-info',
+    success: 'circle-check',
+    warning: 'triangle-exclamation',
+    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);
+            }
+        }
+    });
+})();
 __decorate([
     property({ reflect: true })
 ], PfPopover.prototype, "position", void 0);
@@ -414,7 +427,6 @@ __decorate([
     })
 ], PfPopover.prototype, "noOutsideClick", void 0);
 __decorate([
-    observed('triggerChanged'),
     property({ reflect: true })
 ], PfPopover.prototype, "trigger", void 0);
 __decorate([

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 } 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 { observed } from '@patternfly/pfe-core/decorators/observed.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';\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 *\n * @summary Toggle the visibility of helpful or contextual information.\n *\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 *\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 *\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({ type: Number, reflect: true, attribute: 'heading-level' }) 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: 'close-label' }) 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  @observed('triggerChanged')\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  #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  connectedCallback() {\n    super.connectedCallback();\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 header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n      <header part=\"header\">\n        <span part=\"icon\">\n          <slot name=\"icon\">\n            <pf-icon icon=\"${this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''}\"\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    `;\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ [anchor]: !!anchor, [alignment]: !!alignment })}\">\n        <slot id=\"trigger\" @keydown=${this.onKeydown} @click=${this.toggle}></slot>\n        <dialog id=\"popover\" aria-labelledby=\"heading\" aria-describedby=\"body\" 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.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            ${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.show);\n    this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);\n  }\n\n  @bound private 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  triggerChanged(oldValue?: string, newValue?: string) {\n    if (oldValue) {\n      this.#referenceTrigger?.removeEventListener('click', this.show);\n      this.#referenceTrigger?.removeEventListener('keydown', this.onKeydown);\n    }\n    if (newValue) {\n      this.#referenceTrigger = (this.getRootNode() as Document | ShadowRoot).getElementById(newValue);\n      this.#referenceTrigger?.addEventListener('click', this.show);\n      this.#referenceTrigger?.addEventListener('keydown', this.onKeydown);\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.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  }\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":"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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';\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 *\n * @summary Toggle the visibility of helpful or contextual information.\n *\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 *\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 *\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({ type: Number, reflect: true, attribute: 'heading-level' }) 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: 'close-label' }) 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  #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  connectedCallback() {\n    super.connectedCallback();\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 header = !(hasHeading && hasIcon) ? headingSlotWithFallback : html`\n      <header part=\"header\">\n        <span part=\"icon\">\n          <slot name=\"icon\">\n            <pf-icon icon=\"${this.icon ?? PfPopover.alertIcons.get(this.alertSeverity as AlertSeverity) ?? ''}\"\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    `;\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\" aria-labelledby=\"heading\" aria-describedby=\"body\" 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.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            ${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\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  @bound private 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.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  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-popover': PfPopover;\n  }\n}\n"]}

package/pf-progress/README.md

@@ -0,0 +1,33 @@
+# Progress
+
+A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
+
+Read more about Progress in the [PatternFly Elements Progress documentation][docs].
+
+##  Installation
+
+Load `<pf-progress>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-progress/pf-progress.js"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-progress/pf-progress.js';
+```
+
+## Usage
+
+```html
+<pf-progress title="Default" value="33"></pf-progress>
+```
+
+[docs]: https://patternflyelements.org/components/progress

package/pf-progress/pf-progress.css

@@ -0,0 +1,210 @@
+* {
+  box-sizing: border-box;
+}
+
+#container {
+  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: #0066cc33; /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-success__bar--BackgroundColorWithOpacity: #3e863533;  /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */
+  --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */
+
+  --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);
+  --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);
+  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);
+  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);
+  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);
+  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);
+  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);
+  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);
+  display: grid;
+  align-items: end;
+  grid-gap: var(--pf-c-progress--GridGap);
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+  width: 100%;
+}
+
+.sm {
+  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);
+  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-sm__bar--Height);
+}
+
+.sm #description {
+  font-size: var(--pf-c-progress--m-sm__description--FontSize);
+}
+
+.lg {
+  --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);
+  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-lg__bar--Height);
+}
+
+.outside #description {
+  grid-column: 1/3;
+}
+
+.outside #status {
+  grid-column: 2/3;
+  grid-row: 2/3;
+  align-self: center;
+}
+
+.outside progress,
+.outside span {
+  display: inline-block;
+  font-size: var(--pf-c-progress--m-outside__measure--FontSize);
+  grid-column: 1/2;
+}
+
+.singleline {
+  grid-template-rows: 1fr;
+}
+
+.singleline #description {
+  display: none;
+  visibility: hidden;
+}
+
+.singleline progress,
+.singleline span {
+  grid-row: 1/2;
+  grid-column: 1/2;
+}
+
+.singleline #status {
+  grid-row: 1/2;
+  grid-column: 2/3;
+}
+
+.outside, .singleline {
+  grid-template-columns: 1fr fit-content(50%);
+}
+
+#container.success {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);
+  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);
+}
+
+#container.warning {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);
+  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);
+}
+
+#container.danger {
+  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);
+  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity);
+  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);
+}
+
+#description {
+  word-break: break-word;
+  grid-column: 1/2;
+}
+
+.descriptionTruncated #description {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#status {
+  grid-column: 2/3;
+  grid-row: 1/2;
+  text-align: right;
+  word-break: break-word;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+}
+
+pf-icon {
+  margin-left: var(--pf-c-progress__status-icon--MarginLeft);
+  color: var(--pf-c-progress__status-icon--Color);
+}
+
+progress {
+  position: relative;
+  grid-column: 1/3;
+  grid-row: 2/3;
+  align-self: center;
+  height: var(--pf-c-progress__bar--Height);
+  background-color: var(--pf-c-progress__bar--BackgroundColor);
+}
+
+.indicator {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: var(--pf-c-progress__indicator--Height);
+  background-color: var(--pf-c-progress__indicator--BackgroundColor);
+}
+
+.indicator {
+  width: 100%;
+  height: var(--pf-c-progress__bar--Height);
+
+  display: block;
+}
+
+span {
+  grid-column: 1/3;
+  grid-row: 2/3;
+  text-align: center;
+  color: var(--pf-c-progress--m-success--m-inside__measure--Color);
+}
+
+span::after {
+  content: attr(data-value);
+  position: relative;
+  height: 100%;
+}
+
+progress[value] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);
+
+  width: 100%;
+  height: var(--pf-c-progress__bar--Height);
+}
+
+progress:not([value]) {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+progress[value]::-webkit-progress-bar {
+  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);
+}
+
+progress[value]::-moz-progress-bar {
+  background: var(--pf-c-progress__bar--before--BackgroundColor);
+}
+
+progress[value]::-webkit-progress-value {
+  background-size: 100% 100%;
+  background-image: linear-gradient(
+    90deg,
+    var(--pf-c-progress__bar--before--BackgroundColor) 100%,
+    var(--pf-c-progress__bar--before--BackgroundColor) 100%
+  );
+}
+
+pf-tooltip {
+  height: 0.01px;
+}