@patternfly/elements 2.4.0 → 3.0.1

package/pf-popover/test/pf-popover.spec.js

@@ -0,0 +1,233 @@
+import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testing';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';
+import { sendKeys, resetMouse } from '@web/test-runner-commands';
+import { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js';
+import { PfButton } from '@patternfly/elements/pf-button/pf-button.js';
+function press(key) {
+    return async function () {
+        await sendKeys({ press: key });
+    };
+}
+describe('<pf-popover>', function () {
+    let element;
+    /** create a simple test fixture */
+    async function setupSimpleInstance() {
+        element = await fixture(html `<pf-popover></pf-popover>`);
+    }
+    /** Wait on the element's update cycle */
+    async function updateComplete() {
+        await element.updateComplete;
+    }
+    /** Asserts that an aXe audit on the page passes */
+    async function expectA11yAxe() {
+        await expect(element).to.be.accessible();
+    }
+    /**
+     * Assert that the accessibility tree reports the expected snapshot
+     * e.g. for a closed popover, does not announce popover child content
+     * e.g. for an opened popover, it does announce popover child content
+     * If the expected children snapshot is undefined, then assistive technology
+     * reports nothing at all, e.g. a popover element with no attrs and no children
+     */
+    async function expectA11ySnapshot(expected = { role: 'WebArea', name: '' }) {
+        const snapshot = await a11ySnapshot();
+        expect(snapshot).to.deep.equal(expected);
+    }
+    function resetElement() {
+        document.querySelectorAll('pf-popover').forEach(e => e.remove());
+        // @ts-expect-error: resetting test state, so we don't mind the ts error.
+        element = undefined;
+    }
+    afterEach(resetElement);
+    afterEach(fixtureCleanup);
+    describe('simply instantiating', function () {
+        beforeEach(setupSimpleInstance);
+        it('should upgrade', async function () {
+            const klass = customElements.get('pf-popover');
+            expect(element)
+                .to.be.an.instanceOf(klass)
+                .and
+                .to.be.an.instanceOf(PfPopover);
+        });
+        it('should be accessible', expectA11yAxe);
+        it('imperatively instantiates', function () {
+            expect(document.createElement('pf-popover'))
+                .to.be.an.instanceof(PfPopover);
+        });
+        it('should not report anything to assistive technology', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children).to.not.be.ok;
+        });
+    });
+    describe('with a slotted trigger; and with heading, body, and footer attributes', function () {
+        // these tests are flaky, soo...
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        beforeEach(resetElement);
+        beforeEach(nextFrame);
+        /** create a test fixture with slotted trigger and content attrs */
+        beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+            element = await fixture(html `
+        <pf-popover heading="Popover heading"
+                    body="Popovers are triggered by click rather than hover."
+                    footer="Popover footer">
+          <pf-button>Toggle popover</pf-button>
+        </pf-popover>
+      `);
+        });
+        it('should be accessible', expectA11yAxe);
+        it('should hide popover content from assistive technology', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;
+        });
+        describe('tabbing to the trigger', function () {
+            beforeEach(resetElement);
+            beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {
+                element = await fixture(html `
+          <pf-popover heading="Popover heading"
+                      body="Popovers are triggered by click rather than hover."
+                      footer="Popover footer">
+            <pf-button>Toggle popover</pf-button>
+          </pf-popover>
+        `);
+            });
+            beforeEach(updateComplete);
+            beforeEach(press('Tab'));
+            beforeEach(updateComplete);
+            it('doesn\'t steal tab order', function () {
+                expect(document.activeElement).to.be.an.instanceof(PfButton);
+            });
+            describe('and pressing Enter', function () {
+                beforeEach(updateComplete);
+                beforeEach(press('Enter'));
+                beforeEach(updateComplete);
+                it('should show popover content to assistive technology', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+                });
+                describe('then pressing Enter again', function () {
+                    beforeEach(updateComplete);
+                    beforeEach(press('Enter'));
+                    beforeEach(updateComplete);
+                    it('should hide popover content from assistive technology', async function () {
+                        const snapshot = await a11ySnapshot();
+                        expect(snapshot?.children?.length).to.equal(1);
+                        const dialog = snapshot.children?.find(x => x.role === 'dialog');
+                        expect(dialog).to.not.be.ok;
+                    });
+                });
+                describe('then pressing Escape', function () {
+                    beforeEach(updateComplete);
+                    beforeEach(press('Escape'));
+                    beforeEach(updateComplete);
+                    it('should hide popover content from assistive technology', async function () {
+                        const snapshot = await a11ySnapshot();
+                        expect(snapshot?.children?.length).to.equal(1);
+                        const dialog = snapshot.children?.find(x => x.role === 'dialog');
+                        expect(dialog).to.not.be.ok;
+                    });
+                });
+            });
+        });
+    });
+    describe('with a trigger and a sibling button', function () {
+        let btn1;
+        let btn2;
+        async function clickButton1() {
+            await clickElementAtCenter(btn1);
+            await resetMouse();
+        }
+        async function clickButton2() {
+            await clickElementAtCenter(btn2);
+            await resetMouse();
+        }
+        beforeEach(async function () {
+            const container = await fixture(html `
+        <div>
+          <pf-popover id="popover"
+                      trigger="btn-1"
+                      heading="Popover heading"
+                      body="Popovers are triggered by click rather than hover."
+                      footer="Popover footer"></pf-popover>
+          <button id="btn-1">Toggle popover 1</button>
+          <button id="btn-2">Toggle popover 2</button>
+        </div>
+      `);
+            element = container.querySelector('pf-popover');
+            btn1 = container.querySelector('#btn-1');
+            btn2 = container.querySelector('#btn-2');
+        });
+        it('starts closed', async function () {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;
+        });
+        describe('clicking the trigger', function () {
+            beforeEach(updateComplete);
+            beforeEach(clickButton1);
+            beforeEach(updateComplete);
+            it('shows the popover', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+            });
+        });
+        describe('setting the trigger to the sibling button', function () {
+            beforeEach(updateComplete);
+            beforeEach(function () {
+                element.setAttribute('trigger', 'btn-2');
+            });
+            beforeEach(updateComplete);
+            describe('clicking the first button', function () {
+                beforeEach(updateComplete);
+                beforeEach(clickButton1);
+                beforeEach(updateComplete);
+                it('remains closed', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot).to.deep.equal({
+                        name: '',
+                        role: 'WebArea',
+                        children: [
+                            { role: 'button', name: 'Toggle popover 1', focused: true },
+                            { role: 'button', name: 'Toggle popover 2' },
+                        ],
+                    });
+                });
+            });
+            describe('clicking the sibling button', function () {
+                beforeEach(updateComplete);
+                beforeEach(clickButton2);
+                beforeEach(updateComplete);
+                it('shows the popover', async function () {
+                    const snapshot = await a11ySnapshot();
+                    expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;
+                });
+            });
+        });
+        describe('then pressing the Enter key', function () {
+            beforeEach(updateComplete);
+            // Close the popover
+            beforeEach(press('Enter'));
+            beforeEach(updateComplete);
+            it('closes the popover', async function () {
+                const snapshot = await a11ySnapshot();
+                expect(snapshot).to.deep.equal({
+                    role: 'WebArea',
+                    name: '',
+                    children: [
+                        {
+                            name: 'Toggle popover 1',
+                            role: 'button',
+                        },
+                        {
+                            name: 'Toggle popover 2',
+                            role: 'button',
+                        },
+                    ],
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-popover.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-popover.spec.js","sourceRoot":"","sources":["pf-popover.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html, fixture, fixtureCleanup, nextFrame } from '@open-wc/testing';\nimport { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';\nimport { clickElementAtCenter } from '@patternfly/pfe-tools/test/utils.js';\nimport { sendKeys, resetMouse } from '@web/test-runner-commands';\nimport { PfPopover } from '@patternfly/elements/pf-popover/pf-popover.js';\nimport { PfButton } from '@patternfly/elements/pf-button/pf-button.js';\n\nfunction press(key: string) {\n  return async function() {\n    await sendKeys({ press: key });\n  };\n}\n\ndescribe('<pf-popover>', function() {\n  let element: PfPopover;\n\n  /** create a simple test fixture */\n  async function setupSimpleInstance() {\n    element = await fixture<PfPopover>(html`<pf-popover></pf-popover>`);\n  }\n\n  /** Wait on the element's update cycle */\n  async function updateComplete() {\n    await element.updateComplete;\n  }\n\n  /** Asserts that an aXe audit on the page passes */\n  async function expectA11yAxe() {\n    await expect(element).to.be.accessible();\n  }\n\n  /**\n   * Assert that the accessibility tree reports the expected snapshot\n   * e.g. for a closed popover, does not announce popover child content\n   * e.g. for an opened popover, it does announce popover child content\n   * If the expected children snapshot is undefined, then assistive technology\n   * reports nothing at all, e.g. a popover element with no attrs and no children\n   */\n  async function expectA11ySnapshot(expected: A11yTreeSnapshot = { role: 'WebArea', name: '' }) {\n    const snapshot = await a11ySnapshot();\n    expect(snapshot).to.deep.equal(expected);\n  }\n\n  function resetElement() {\n    document.querySelectorAll('pf-popover').forEach(e => e.remove());\n    // @ts-expect-error: resetting test state, so we don't mind the ts error.\n    element = undefined;\n  }\n\n  afterEach(resetElement);\n  afterEach(fixtureCleanup);\n\n  describe('simply instantiating', function() {\n    beforeEach(setupSimpleInstance);\n    it('should upgrade', async function() {\n      const klass = customElements.get('pf-popover');\n      expect(element)\n          .to.be.an.instanceOf(klass)\n          .and\n          .to.be.an.instanceOf(PfPopover);\n    });\n    it('should be accessible', expectA11yAxe);\n    it('imperatively instantiates', function() {\n      expect(document.createElement('pf-popover'))\n          .to.be.an.instanceof(PfPopover);\n    });\n    it('should not report anything to assistive technology', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children).to.not.be.ok;\n    });\n  });\n\n  describe('with a slotted trigger; and with heading, body, and footer attributes', function() {\n    // these tests are flaky, soo...\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n    beforeEach(resetElement);\n    beforeEach(nextFrame);\n\n    /** create a test fixture with slotted trigger and content attrs */\n    beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {\n      element = await fixture<PfPopover>(html`\n        <pf-popover heading=\"Popover heading\"\n                    body=\"Popovers are triggered by click rather than hover.\"\n                    footer=\"Popover footer\">\n          <pf-button>Toggle popover</pf-button>\n        </pf-popover>\n      `);\n    });\n\n    it('should be accessible', expectA11yAxe);\n\n    it('should hide popover content from assistive technology', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;\n    });\n\n    describe('tabbing to the trigger', function() {\n      beforeEach(resetElement);\n      beforeEach(async function setupPopoverWithSlottedTriggerAndContentAttrs() {\n        element = await fixture<PfPopover>(html`\n          <pf-popover heading=\"Popover heading\"\n                      body=\"Popovers are triggered by click rather than hover.\"\n                      footer=\"Popover footer\">\n            <pf-button>Toggle popover</pf-button>\n          </pf-popover>\n        `);\n      });\n\n      beforeEach(updateComplete);\n      beforeEach(press('Tab'));\n      beforeEach(updateComplete);\n\n      it('doesn\\'t steal tab order', function() {\n        expect(document.activeElement).to.be.an.instanceof(PfButton);\n      });\n\n      describe('and pressing Enter', function() {\n        beforeEach(updateComplete);\n        beforeEach(press('Enter'));\n        beforeEach(updateComplete);\n        it('should show popover content to assistive technology', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n        });\n        describe('then pressing Enter again', function() {\n          beforeEach(updateComplete);\n          beforeEach(press('Enter'));\n          beforeEach(updateComplete);\n          it('should hide popover content from assistive technology', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot?.children?.length).to.equal(1);\n            const dialog = snapshot.children?.find(x => x.role === 'dialog');\n            expect(dialog).to.not.be.ok;\n          });\n        });\n        describe('then pressing Escape', function() {\n          beforeEach(updateComplete);\n          beforeEach(press('Escape'));\n          beforeEach(updateComplete);\n          it('should hide popover content from assistive technology', async function() {\n            const snapshot = await a11ySnapshot();\n            expect(snapshot?.children?.length).to.equal(1);\n            const dialog = snapshot.children?.find(x => x.role === 'dialog');\n            expect(dialog).to.not.be.ok;\n          });\n        });\n      });\n    });\n  });\n\n  describe('with a trigger and a sibling button', function() {\n    let btn1: HTMLButtonElement;\n    let btn2: HTMLButtonElement;\n\n    async function clickButton1() {\n      await clickElementAtCenter(btn1);\n      await resetMouse();\n    }\n\n    async function clickButton2() {\n      await clickElementAtCenter(btn2);\n      await resetMouse();\n    }\n\n    beforeEach(async function() {\n      const container = await fixture(html`\n        <div>\n          <pf-popover id=\"popover\"\n                      trigger=\"btn-1\"\n                      heading=\"Popover heading\"\n                      body=\"Popovers are triggered by click rather than hover.\"\n                      footer=\"Popover footer\"></pf-popover>\n          <button id=\"btn-1\">Toggle popover 1</button>\n          <button id=\"btn-2\">Toggle popover 2</button>\n        </div>\n      `);\n      element = container.querySelector('pf-popover')!;\n      btn1 = container.querySelector('#btn-1')!;\n      btn2 = container.querySelector('#btn-2')!;\n    });\n\n    it('starts closed', async function() {\n      const snapshot = await a11ySnapshot();\n      expect(snapshot.children?.find(x => x.role === 'dialog')).to.not.be.ok;\n    });\n\n    describe('clicking the trigger', function() {\n      beforeEach(updateComplete);\n      beforeEach(clickButton1);\n      beforeEach(updateComplete);\n      it('shows the popover', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n      });\n    });\n\n    describe('setting the trigger to the sibling button', function() {\n      beforeEach(updateComplete);\n      beforeEach(function() {\n        element.setAttribute('trigger', 'btn-2');\n      });\n      beforeEach(updateComplete);\n      describe('clicking the first button', function() {\n        beforeEach(updateComplete);\n        beforeEach(clickButton1);\n        beforeEach(updateComplete);\n        it('remains closed', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot).to.deep.equal({\n            name: '',\n            role: 'WebArea',\n            children: [\n              { role: 'button', name: 'Toggle popover 1', focused: true },\n              { role: 'button', name: 'Toggle popover 2' },\n            ],\n          });\n        });\n      });\n      describe('clicking the sibling button', function() {\n        beforeEach(updateComplete);\n        beforeEach(clickButton2);\n        beforeEach(updateComplete);\n        it('shows the popover', async function() {\n          const snapshot = await a11ySnapshot();\n          expect(snapshot.children?.find(x => x.role === 'dialog')).to.be.ok;\n        });\n      });\n    });\n    describe('then pressing the Enter key', function() {\n      beforeEach(updateComplete);\n      // Close the popover\n      beforeEach(press('Enter'));\n      beforeEach(updateComplete);\n      it('closes the popover', async function() {\n        const snapshot = await a11ySnapshot();\n        expect(snapshot).to.deep.equal({\n          role: 'WebArea',\n          name: '',\n          children: [\n            {\n              name: 'Toggle popover 1',\n              role: 'button',\n            },\n            {\n              name: 'Toggle popover 2',\n              role: 'button',\n            },\n          ],\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-progress/demo/kitchen-sink.css

@@ -0,0 +1,4 @@
+pf-progress {
+    padding-bottom: 0.25rem;
+    display: block;
+}

package/pf-progress/pf-progress.d.ts

@@ -2,89 +2,68 @@ import type { PropertyValues } from 'lit';
 import { LitElement } from 'lit';
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
- *
  * @summary Display completion status of ongoing process or task.
- *
  * @cssprop {<length>} --pf-c-progress--GridGap
  *          Gap between the sections of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
  *          Color of the progress bar.
  *          {@default `#06c`}
- *
  * @cssprop {<length>} --pf-c-progress__bar--Height
  *          Height of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
  *          Background color of the progress bar.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress__status-icon--Color
  *          Color of the status icon.
  *          {@default `#151515`}
- *
  * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
  *          Margin left of the status icon.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress__indicator--Height
  *          Height of the progress bar indicator.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
  *          Background color of the progress bar indicator.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
  *          Background color of the progress bar when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
  *          Background color of the progress bar when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
  *          Background color of the progress bar when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
  *          Color of the status icon when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
  *          Color of the status icon when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
  *          Color of the status icon when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
  *          Color of the progress bar measure when variant is success and measure location is inside.
  *          {@default `#ffffff`}
- *
  * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
  *          Font size of the progress bar measure when measure location is outside.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
  *          Height of the progress bar when the size is small.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
  *          Font size of the progress bar description when the size is small.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
  *          Height of the progress bar when the size is large.
  *          {@default `1.5rem`}
- *
  */
 export declare class PfProgress extends LitElement {
     #private;
-    static readonly styles: import("lit").CSSResult[];
+    static readonly styles: CSSStyleSheet[];
     /** Represents the value of the progress bar */
     value: number;
     /** Description (title) above the progress bar */

package/pf-progress/pf-progress.js

@@ -7,93 +7,72 @@ import { property } from 'lit/decorators/property.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { css } from "lit";
-const styles = css `*{box-sizing:border-box}#container{--_pf-c-progress__bar--before--BackgroundColorWithOpacity:#0066cc33;--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity:#3e863533;--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity:#f0ab0033;--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity:#c9190b33;--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:.01px}`;
+const styles = css `* {\n  box-sizing: border-box;\n}\n\n#container {\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: #0066cc33; /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-success__bar--BackgroundColorWithOpacity: #3e863533;  /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity: #f0ab0033;  /* WARNING: not a recognized token value */\n  --_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity: #c9190b33;  /* WARNING: not a recognized token value */\n\n  --pf-c-progress--GridGap: var(--pf-global--spacer--md, 1rem);\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100, #0066cc);\n  --pf-c-progress__bar--Height: var(--pf-global--spacer--md, 1rem);\n  --pf-c-progress__bar--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #ffffff);\n  --pf-c-progress__status-icon--Color: var(--pf-global--Color--100, #151515);\n  --pf-c-progress__status-icon--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress__bar--Height);\n  --pf-c-progress__indicator--BackgroundColor: var(--pf-c-progress__bar--before--BackgroundColor);\n  --pf-c-progress--m-success__bar--BackgroundColor: var(--pf-global--success-color--100, #3e8635);\n  --pf-c-progress--m-warning__bar--BackgroundColor: var(--pf-global--warning-color--100, #f0ab00);\n  --pf-c-progress--m-danger__bar--BackgroundColor: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress--m-success__status-icon--Color: var(--pf-global--success-color--100, #3e8635);\n  --pf-c-progress--m-warning__status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n  --pf-c-progress--m-danger__status-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n  --pf-c-progress--m-success--m-inside__measure--Color: var(--pf-global--Color--light-100, #ffffff);\n  --pf-c-progress--m-outside__measure--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress--m-sm__bar--Height: var(--pf-global--spacer--sm, 0.5rem);\n  --pf-c-progress--m-sm__description--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n  --pf-c-progress--m-lg__bar--Height: var(--pf-global--spacer--lg, 1.5rem);\n  display: grid;\n  align-items: end;\n  grid-gap: var(--pf-c-progress--GridGap);\n  grid-template-columns: 1fr auto;\n  grid-template-rows: 1fr auto;\n  width: 100%;\n}\n\n.sm {\n  --pf-c-progress__bar--Height: var(--pf-c-progress--m-sm__bar--Height);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-sm__bar--Height);\n}\n\n.sm #description {\n  font-size: var(--pf-c-progress--m-sm__description--FontSize);\n}\n\n.lg {\n  --pf-c-progress__bar--Height: var(--pf-c-progress--m-lg__bar--Height);\n  --pf-c-progress__indicator--Height: var(--pf-c-progress--m-lg__bar--Height);\n}\n\n.outside #description {\n  grid-column: 1/3;\n}\n\n.outside #status {\n  grid-column: 2/3;\n  grid-row: 2/3;\n  align-self: center;\n}\n\n.outside progress,\n.outside span {\n  display: inline-block;\n  font-size: var(--pf-c-progress--m-outside__measure--FontSize);\n  grid-column: 1/2;\n}\n\n.singleline {\n  grid-template-rows: 1fr;\n}\n\n.singleline #description {\n  display: none;\n  visibility: hidden;\n}\n\n.singleline progress,\n.singleline span {\n  grid-row: 1/2;\n  grid-column: 1/2;\n}\n\n.singleline #status {\n  grid-row: 1/2;\n  grid-column: 2/3;\n}\n\n.outside, .singleline {\n  grid-template-columns: 1fr fit-content(50%);\n}\n\n#container.success {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-success__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-success__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-success__status-icon--Color);\n}\n\n#container.warning {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-warning__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-warning__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-warning__status-icon--Color);\n}\n\n#container.danger {\n  --pf-c-progress__bar--before--BackgroundColor: var(--pf-c-progress--m-danger__bar--BackgroundColor);\n  --_pf-c-progress__bar--before--BackgroundColorWithOpacity: var(--_pf-c-progress--m-danger__bar--BackgroundColorWithOpacity);\n  --pf-c-progress__status-icon--Color: var(--pf-c-progress--m-danger__status-icon--Color);\n}\n\n#description {\n  word-break: break-word;\n  grid-column: 1/2;\n}\n\n.descriptionTruncated #description {\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#status {\n  grid-column: 2/3;\n  grid-row: 1/2;\n  text-align: right;\n  word-break: break-word;\n  display: flex;\n  align-items: center;\n  justify-content: end;\n}\n\npf-icon {\n  margin-left: var(--pf-c-progress__status-icon--MarginLeft);\n  color: var(--pf-c-progress__status-icon--Color);\n}\n\nprogress {\n  position: relative;\n  grid-column: 1/3;\n  grid-row: 2/3;\n  align-self: center;\n  height: var(--pf-c-progress__bar--Height);\n  background-color: var(--pf-c-progress__bar--BackgroundColor);\n}\n\n.indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: var(--pf-c-progress__indicator--Height);\n  background-color: var(--pf-c-progress__indicator--BackgroundColor);\n}\n\n.indicator {\n  width: 100%;\n  height: var(--pf-c-progress__bar--Height);\n\n  display: block;\n}\n\nspan {\n  grid-column: 1/3;\n  grid-row: 2/3;\n  text-align: center;\n  color: var(--pf-c-progress--m-success--m-inside__measure--Color);\n}\n\nspan::after {\n  content: attr(data-value);\n  position: relative;\n  height: 100%;\n}\n\nprogress[value] {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);\n\n  width: 100%;\n  height: var(--pf-c-progress__bar--Height);\n}\n\nprogress:not([value]) {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n}\n\nprogress[value]::-webkit-progress-bar {\n  background: var(--_pf-c-progress__bar--before--BackgroundColorWithOpacity);\n}\n\nprogress[value]::-moz-progress-bar {\n  background: var(--pf-c-progress__bar--before--BackgroundColor);\n}\n\nprogress[value]::-webkit-progress-value {\n  background-size: 100% 100%;\n  background-image: linear-gradient(\n    90deg,\n    var(--pf-c-progress__bar--before--BackgroundColor) 100%,\n    var(--pf-c-progress__bar--before--BackgroundColor) 100%\n  );\n}\n\npf-tooltip {\n  height: 0.01px;\n}\n`;
 const ICONS = new Map(Object.entries({
     success: { icon: 'circle-check' },
     danger: { icon: 'circle-xmark' },
-    warning: { icon: 'triangle-exclamation' }
+    warning: { icon: 'triangle-exclamation' },
 }));
 /**
  * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.
- *
  * @summary Display completion status of ongoing process or task.
- *
  * @cssprop {<length>} --pf-c-progress--GridGap
  *          Gap between the sections of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor
  *          Color of the progress bar.
  *          {@default `#06c`}
- *
  * @cssprop {<length>} --pf-c-progress__bar--Height
  *          Height of the progress bar.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor
  *          Background color of the progress bar.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress__status-icon--Color
  *          Color of the status icon.
  *          {@default `#151515`}
- *
  * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft
  *          Margin left of the status icon.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress__indicator--Height
  *          Height of the progress bar indicator.
  *          {@default `1rem`}
- *
  * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor
  *          Background color of the progress bar indicator.
  *          {@default `#ffffff`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor
  *          Background color of the progress bar when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor
  *          Background color of the progress bar when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor
  *          Background color of the progress bar when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color
  *          Color of the status icon when variant is success.
  *          {@default `#3e8635`}
- *
  * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color
  *          Color of the status icon when variant is warning.
  *          {@default `#f0ab00`}
- *
  * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color
  *          Color of the status icon when variant is danger.
  *          {@default `#c9190b`}
- *
  * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color
  *          Color of the progress bar measure when variant is success and measure location is inside.
  *          {@default `#ffffff`}
- *
  * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize
  *          Font size of the progress bar measure when measure location is outside.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height
  *          Height of the progress bar when the size is small.
  *          {@default `0.5rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize
  *          Font size of the progress bar description when the size is small.
  *          {@default `0.875rem`}
- *
  * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height
  *          Height of the progress bar when the size is large.
  *          {@default `1.5rem`}
- *
  */
 let PfProgress = class PfProgress extends LitElement {
     constructor() {

package/pf-progress/pf-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' }\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n *\n * @summary Display completion status of ongoing process or task.\n *\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n *\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n *\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n *\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n *\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n *\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n *\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n *\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n *\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}
+{"version":3,"file":"pf-progress.js","sourceRoot":"","sources":["pf-progress.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport styles from './pf-progress.css';\n\nconst ICONS = new Map(Object.entries({\n  success: { icon: 'circle-check' },\n  danger: { icon: 'circle-xmark' },\n  warning: { icon: 'triangle-exclamation' },\n}));\n\n/**\n * A progress bar gives the user a visual representation of their completion status of an ongoing process or task.\n * @summary Display completion status of ongoing process or task.\n * @cssprop {<length>} --pf-c-progress--GridGap\n *          Gap between the sections of the progress bar.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__bar--before--BackgroundColor\n *          Color of the progress bar.\n *          {@default `#06c`}\n * @cssprop {<length>} --pf-c-progress__bar--Height\n *          Height of the progress bar.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__bar--BackgroundColor\n *          Background color of the progress bar.\n *          {@default `#ffffff`}\n * @cssprop {<color>} --pf-c-progress__status-icon--Color\n *          Color of the status icon.\n *          {@default `#151515`}\n * @cssprop {<length>} --pf-c-progress__status-icon--MarginLeft\n *          Margin left of the status icon.\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-progress__indicator--Height\n *          Height of the progress bar indicator.\n *          {@default `1rem`}\n * @cssprop {<color>} --pf-c-progress__indicator--BackgroundColor\n *          Background color of the progress bar indicator.\n *          {@default `#ffffff`}\n * @cssprop {<color>} --pf-c-progress--m-success__bar--BackgroundColor\n *          Background color of the progress bar when variant is success.\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-progress--m-warning__bar--BackgroundColor\n *          Background color of the progress bar when variant is warning.\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-progress--m-danger__bar--BackgroundColor\n *          Background color of the progress bar when variant is danger.\n *          {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-progress--m-success__status-icon--Color\n *          Color of the status icon when variant is success.\n *          {@default `#3e8635`}\n * @cssprop {<color>} --pf-c-progress--m-warning__status-icon--Color\n *          Color of the status icon when variant is warning.\n *          {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-progress--m-danger__status-icon--Color\n *          Color of the status icon when variant is danger.\n *          {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-progress--m-success--m-inside__measure--Color\n *          Color of the progress bar measure when variant is success and measure location is inside.\n *          {@default `#ffffff`}\n * @cssprop {<length>} --pf-c-progress--m-outside__measure--FontSize\n *          Font size of the progress bar measure when measure location is outside.\n *          {@default `0.875rem`}\n * @cssprop {<length>} --pf-c-progress--m-sm__bar--Height\n *          Height of the progress bar when the size is small.\n *          {@default `0.5rem`}\n * @cssprop {<length>} --pf-c-progress--m-sm__description--FontSize\n *          Font size of the progress bar description when the size is small.\n *          {@default `0.875rem`}\n * @cssprop {<length>} --pf-c-progress--m-lg__bar--Height\n *          Height of the progress bar when the size is large.\n *          {@default `1.5rem`}\n */\n@customElement('pf-progress')\nexport class PfProgress extends LitElement {\n  static readonly styles = [styles];\n\n  #internals = this.attachInternals();\n\n  /** Represents the value of the progress bar */\n  @property({ reflect: true, type: Number }) value = 0;\n\n  /** Description (title) above the progress bar */\n  @property() description?: string;\n\n  /** Indicate whether to truncate the string description (title) */\n  @property({\n    type: Boolean,\n    reflect: true,\n    attribute: 'description-truncated',\n  }) descriptionTruncated = false;\n\n  /** Maximum value for the progress bar */\n  @property({ type: Number, reflect: true }) max = 100;\n\n  /** Minimum value for the progress bar */\n  @property({ type: Number, reflect: true }) min = 0;\n\n  /** Size of the progress bar (height) */\n  @property() size?: 'sm' | 'lg';\n\n  /** Where the percentage will be displayed with the progress element */\n  @property({ attribute: 'measure-location' }) measureLocation?: 'outside' | 'inside' | 'none';\n\n  /** Variant of the progress bar */\n  @property() variant?: 'success' | 'danger' | 'warning';\n\n  get #calculatedPercentage(): number {\n    const { value, min, max } = this;\n    const percentage = Math.round((value - min) / (max - min) * 100);\n    if (Number.isNaN(percentage) || percentage < 0) {\n      return 0;\n    }\n    return Math.min(percentage, 100);\n  }\n\n  get #icon() {\n    return ICONS.get(this.variant ?? '')?.icon;\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('value') || changed.has('min') || changed.has('max')) {\n      this.#internals.ariaValueNow = this.#calculatedPercentage.toString();\n    }\n    if (this.#icon) {\n      import('@patternfly/elements/pf-icon/pf-icon.js');\n    }\n    if (this.descriptionTruncated) {\n      import('@patternfly/elements/pf-tooltip/pf-tooltip.js');\n    }\n  }\n\n  render() {\n    const { size, measureLocation, variant, description, descriptionTruncated } = this;\n    const icon = this.#icon;\n    const singleLine = description?.length === 0;\n    const pct = this.#calculatedPercentage;\n    const width = `${pct}%`;\n\n    return html`\n      <div id=\"container\" class=\"${classMap({\n          [size ?? '']: !!size,\n          [measureLocation ?? '']: !!measureLocation,\n          [variant ?? '']: !!variant,\n          singleLine,\n          descriptionTruncated,\n        })}\">\n\n        <div id=\"description\" aria-hidden=\"true\">${description ?? ''}</div>\n\n        ${!descriptionTruncated ? '' : html`\n        <pf-tooltip content=\"${this.description ?? ''}\"\n                    trigger=\"description\"></pf-tooltip>\n        `}\n\n        ${measureLocation === 'none' ? '' : html`\n        <div id=\"status\" aria-hidden=\"true\">\n          ${measureLocation !== 'inside' ? '' : width}\n          <pf-icon set=\"fas\"\n                   icon=\"${ifDefined(icon)}\"\n                   size=\"md\"\n                   ?hidden=\"${!icon}\"\n          ></pf-icon>\n        </div>\n        `}\n\n          <progress id=\"progress\"\n                    max=\"100\"\n                    value=\"${pct}\"\n                    aria-valuemin=\"0\"\n                    aria-valuenow=\"${pct}\"\n                    aria-valuemax=\"100\"\n          ></progress>\n\n          ${measureLocation !== 'inside' ? '' : html`\n          <span id=\"progress-span\"\n                style=\"${styleMap({ width })}\"\n                data-value=\"${width}\"></span>\n          `}\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-progress': PfProgress;\n  }\n}\n"]}

package/pf-progress/test/pf-progress.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-progress/test/pf-progress.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-progress';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-progress.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress.e2e.js","sourceRoot":"","sources":["pf-progress.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,aAAa,CAAC;AAE9B,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-progress';\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"]}

package/pf-progress/test/pf-progress.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-progress/test/pf-progress.spec.js

@@ -0,0 +1,45 @@
+import { expect, html, fixture } from '@open-wc/testing';
+import { PfProgress } from '@patternfly/elements/pf-progress/pf-progress.js';
+describe('<pf-progress>', function () {
+    let element;
+    beforeEach(async function () {
+        element = await fixture(html `
+      <pf-progress value="33"
+                  title="Progress title"
+                  label="Progress label">
+      </pf-progress>
+    `);
+    });
+    it('should upgrade', async function () {
+        const klass = customElements.get('pf-progress');
+        expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfProgress);
+    });
+    it('should be accessible', async function () {
+        await expect(element).shadowDom.to.be.accessible();
+    });
+    it('should set the correct value on the progress bar', async function () {
+        const element = await fixture(html `
+      <pf-progress value="33">
+      </pf-progress>
+    `);
+        expect(element.value).to.equal(33);
+    });
+    it('should set the correct title on the progress bar', async function () {
+        const element = await fixture(html `
+      <pf-progress title="Progress title">
+      </pf-progress>
+    `);
+        expect(element.title).to.equal('Progress title');
+    });
+    it('should have the correct value with the max value set', async function () {
+        const max = Math.floor(Math.random() * 100);
+        const value = Math.floor(Math.random() * (max));
+        const element = await fixture(html `
+      <pf-progress value="${value}" max="${max}">
+      </pf-progress>
+    `);
+        expect(element.value).to.equal(value);
+        expect(element.max).to.equal(max);
+    });
+});
+//# sourceMappingURL=pf-progress.spec.js.map

package/pf-progress/test/pf-progress.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-progress.spec.js","sourceRoot":"","sources":["pf-progress.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAC;AAE7E,QAAQ,CAAC,eAAe,EAAE;IACxB,IAAI,OAAmB,CAAC;IAExB,UAAU,CAAC,KAAK;QACd,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;;;KAKvC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAChD,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IACjF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK;QAC9B,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK;QAC1D,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;KAG7C,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kDAAkD,EAAE,KAAK;QAC1D,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;;;KAG7C,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;QAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;QAEhD,MAAM,OAAO,GAAG,MAAM,OAAO,CAAa,IAAI,CAAA;4BACtB,KAAK,UAAU,GAAG;;KAEzC,CAAC,CAAC;QACH,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html, fixture } from '@open-wc/testing';\nimport { PfProgress } from '@patternfly/elements/pf-progress/pf-progress.js';\n\ndescribe('<pf-progress>', function() {\n  let element: PfProgress;\n\n  beforeEach(async function() {\n    element = await fixture<PfProgress>(html`\n      <pf-progress value=\"33\"\n                  title=\"Progress title\"\n                  label=\"Progress label\">\n      </pf-progress>\n    `);\n  });\n\n  it('should upgrade', async function() {\n    const klass = customElements.get('pf-progress');\n    expect(element).to.be.an.instanceOf(klass).and.to.be.an.instanceOf(PfProgress);\n  });\n\n  it('should be accessible', async function() {\n    await expect(element).shadowDom.to.be.accessible();\n  });\n\n  it('should set the correct value on the progress bar', async function() {\n    const element = await fixture<PfProgress>(html`\n      <pf-progress value=\"33\">\n      </pf-progress>\n    `);\n    expect(element.value).to.equal(33);\n  });\n\n  it('should set the correct title on the progress bar', async function() {\n    const element = await fixture<PfProgress>(html`\n      <pf-progress title=\"Progress title\">\n      </pf-progress>\n    `);\n    expect(element.title).to.equal('Progress title');\n  });\n\n  it('should have the correct value with the max value set', async function() {\n    const max = Math.floor(Math.random() * 100);\n    const value = Math.floor(Math.random() * (max));\n\n    const element = await fixture<PfProgress>(html`\n      <pf-progress value=\"${value}\" max=\"${max}\">\n      </pf-progress>\n    `);\n    expect(element.value).to.equal(value);\n    expect(element.max).to.equal(max);\n  });\n});\n"]}