@patternfly/elements 3.0.1 → 4.0.0

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-tile';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-tile.e2e.js.map

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

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

package/pf-timestamp/pf-timestamp.d.ts

@@ -1,4 +1,4 @@
-import type { PropertyValues } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { type DateTimeFormat } from '@patternfly/pfe-core/controllers/timestamp-controller.js';
 /**
@@ -21,7 +21,7 @@ export declare class PfTimestamp extends LitElement {
     get time(): string;
     connectedCallback(): void;
     willUpdate(changedProperties: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/pf-timestamp/pf-timestamp.js

@@ -11,9 +11,6 @@ const BooleanStringConverter = {
         return !value || value === 'true';
     },
 };
-/**
- * A **timestamp** provides consistent formats for displaying date and time values.
- */
 let PfTimestamp = class PfTimestamp extends LitElement {
     constructor() {
         super(...arguments);
@@ -50,6 +47,7 @@ let PfTimestamp = class PfTimestamp extends LitElement {
 };
 _PfTimestamp_timestamp = new WeakMap();
 PfTimestamp.styles = [style];
+PfTimestamp.version = "4.0.0";
 __decorate([
     property({ reflect: true, attribute: 'date-format' })
 ], PfTimestamp.prototype, "dateFormat", void 0);

package/pf-timestamp/pf-timestamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EACL,mBAAmB,GAEpB,MAAM,0DAA0D,CAAC;;;AAIlE,MAAM,sBAAsB,GAA8B;IACxD,aAAa,CAAC,KAAK;QACjB,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;IACpC,CAAC;CACF,CAAC;AAEF;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAwCL,iCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;IAoB7C,CAAC;IApCC,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,IAAI,CAAC,MAAM;QACb,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,8BAAW,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,IAAI,CAAC;IAC9B,CAAC;IAID,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,UAAU,CAAC,iBAAuC;QAChD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,iBAAiB,EAAE,CAAC;YACvC,uBAAA,IAAI,8BAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAkB,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,uBAAA,IAAI,8BAAW,CAAC,SAAS,KAAK,uBAAA,IAAI,8BAAW,CAAC,IAAI;KACrE,CAAC;IACJ,CAAC;;;AA1De,kBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;AAEsB;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAE5B;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAEnD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAuB;AAEI;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAwB;AAEpD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAED;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEnB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAMvD;IAJF,QAAQ,CAAC;QACR,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,sBAAsB;KAClC,CAAC;2CAAkB;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAG3B;AA1BU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA4DvB","sourcesContent":["import type { ComplexAttributeConverter, PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport {\n  TimestampController,\n  type DateTimeFormat,\n} from '@patternfly/pfe-core/controllers/timestamp-controller.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A **timestamp** provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({\n    reflect: true,\n    attribute: 'hour-12',\n    converter: BooleanStringConverter,\n  }) hour12?: boolean;\n\n  @property({ reflect: true })\n  get date() {\n    return this.#timestamp.localeString;\n  }\n\n  set date(string) {\n    this.#timestamp.date = new Date(string);\n  }\n\n  get isoString() {\n    return this.#timestamp.isoString;\n  }\n\n  get time() {\n    return this.#timestamp.time;\n  }\n\n  #timestamp = new TimestampController(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.hasAttribute('date')) {\n      this.#timestamp.date = new Date(this.getAttribute('date')!);\n    }\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>) {\n    for (const [prop] of changedProperties) {\n      this.#timestamp.set(prop, this[prop as keyof this]);\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.#timestamp.isoString}\">${this.#timestamp.time}</time>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}
+{"version":3,"file":"pf-timestamp.js","sourceRoot":"","sources":["pf-timestamp.ts"],"names":[],"mappings":";;AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EACL,mBAAmB,GAEpB,MAAM,0DAA0D,CAAC;;;AAIlE,MAAM,sBAAsB,GAA8B;IACxD,aAAa,CAAC,KAAK;QACjB,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;IACpC,CAAC;CACF,CAAC;AAMK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAwCL,iCAAa,IAAI,mBAAmB,CAAC,IAAI,CAAC,EAAC;;IAhB3C,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,IAAI,CAAC,MAAM;QACb,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,8BAAW,CAAC,SAAS,CAAC;IACnC,CAAC;IAED,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,8BAAW,CAAC,IAAI,CAAC;IAC9B,CAAC;IAID,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;YAC9B,uBAAA,IAAI,8BAAW,CAAC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAE,CAAC,CAAC;QAC9D,CAAC;IACH,CAAC;IAED,UAAU,CAAC,iBAAuC;QAChD,KAAK,MAAM,CAAC,IAAI,CAAC,IAAI,iBAAiB,EAAE,CAAC;YACvC,uBAAA,IAAI,8BAAW,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,IAAkB,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,uBAAA,IAAI,8BAAW,CAAC,SAAS,KAAK,uBAAA,IAAI,8BAAW,CAAC,IAAI;KACrE,CAAC;IACJ,CAAC;;;AA1De,kBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAEK;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAE5B;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAA6B;AAEnD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;iDAAuB;AAEI;IAAzD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAAwB;AAEpD;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAiB;AAED;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAoB;AAEnB;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAe;AAMvD;IAJF,QAAQ,CAAC;QACR,OAAO,EAAE,IAAI;QACb,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,sBAAsB;KAClC,CAAC;2CAAkB;AAGpB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAG3B;AA1BU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW","sourcesContent":["import type { ComplexAttributeConverter, PropertyValues, TemplateResult } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport {\n  TimestampController,\n  type DateTimeFormat,\n} from '@patternfly/pfe-core/controllers/timestamp-controller.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n/**\n * A **timestamp** provides consistent formats for displaying date and time values.\n */\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [style];\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: DateTimeFormat;\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: DateTimeFormat;\n\n  @property({ attribute: false }) customFormat?: object;\n\n  @property({ reflect: true, attribute: 'display-suffix' }) displaySuffix?: string;\n\n  @property({ reflect: true }) locale?: string;\n\n  @property({ reflect: true, type: Boolean }) relative?: boolean;\n\n  @property({ reflect: true, type: Boolean }) utc?: boolean;\n\n  @property({\n    reflect: true,\n    attribute: 'hour-12',\n    converter: BooleanStringConverter,\n  }) hour12?: boolean;\n\n  @property({ reflect: true })\n  get date(): string {\n    return this.#timestamp.localeString;\n  }\n\n  set date(string) {\n    this.#timestamp.date = new Date(string);\n  }\n\n  get isoString(): string {\n    return this.#timestamp.isoString;\n  }\n\n  get time(): string {\n    return this.#timestamp.time;\n  }\n\n  #timestamp = new TimestampController(this);\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    if (this.hasAttribute('date')) {\n      this.#timestamp.date = new Date(this.getAttribute('date')!);\n    }\n  }\n\n  willUpdate(changedProperties: PropertyValues<this>): void {\n    for (const [prop] of changedProperties) {\n      this.#timestamp.set(prop, this[prop as keyof this]);\n    }\n  }\n\n  render(): TemplateResult<1> {\n    return html`\n      <time datetime=\"${this.#timestamp.isoString}\">${this.#timestamp.time}</time>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-timestamp';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -8,5 +9,16 @@ test.describe(tagName, () => {
         await page.$eval('#realtime', el => el.closest('section')?.remove());
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-timestamp.e2e.js.map

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

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

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

@@ -1,4 +1,4 @@
-import type { PropertyValues } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { LitElement } from 'lit';
 import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 /**
@@ -12,78 +12,78 @@ import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-co
  *       This slot renders the content that will be displayed inside of the tooltip.
  *       Typically this would include a string of text without any additional elements.
  *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
+ * @cssprop     {<color>} [--pf-c-tooltip__content--BackgroundColor=#1b1d21]
  *              Sets the background color for the tooltip content.
- *              {@default `#1b1d21`}
- * @cssprop     {<color>} --pf-c-tooltip__content--Color
+ *
+ * @cssprop     {<color>} [--pf-c-tooltip__content--Color=#e0e0e0]
  *              Sets the font color for the tooltip content.
- *              {@default `#e0e0e0`}
- * @cssprop     {<number>} --pf-c-tooltip--line-height
+ *
+ * @cssprop     {<number>} [--pf-c-tooltip--line-height=1.5]
  *              Sets the font color for the tooltip content.
- *              {@default `1.5`}
- * @cssprop     {<length>} --pf-c-tooltip--MaxWidth
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip--MaxWidth=18.75rem]
  *              Maximum width for the tooltip.
- *              {@default `18.75rem`}
- * @cssprop     --pf-c-tooltip--BoxShadow
+ *
+ * @cssprop     [--pf-c-tooltip--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]
  *              Box shadow for the tooltip.
- *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingTop=0.5rem]
  *              Top padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem]
  *              Right padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingBottom=0.5rem]
  *              Bottom padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingLeft=0.5rem]
  *              Left Padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     --pf-c-tooltip__content--FontSize
+ *
+ * @cssprop     [--pf-c-tooltip__content--FontSize=0.875rem]
  *              Font size for the tooltip content.
- *              {@default `0.875rem`}
- * @cssprop     {<length>} --pf-c-tooltip__arrow--Width
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__arrow--Width=0.5rem]
  *              Tooltip arrow width.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__arrow--Height
+ *
+ * @cssprop     {<length>} [--pf-c-tooltip__arrow--Height=0.5rem]
  *              Tooltip arrow height.
- *              {@default `0.5rem`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateX=-50]
  *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateY=50]
  *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
- *              {@default `50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-top--Rotate=45deg]
  *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateX=-50]
  *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateY=-50]
  *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-right--Rotate=45deg]
  *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateX=-50]
  *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateY=-50]
  *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-bottom--Rotate=45deg]
  *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateX=50]
  *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
- *              {@default `50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateY=-50]
  *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate
+ *
+ * @cssprop     [--pf-c-tooltip__arrow--m-left--Rotate=45deg]
  *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
- *              {@default `45deg`}
+ *
  */
 export declare class PfTooltip extends LitElement {
     #private;
@@ -106,9 +106,10 @@ export declare class PfTooltip extends LitElement {
     /**
      * Removes event listeners from the old trigger element and attaches
      * them to the new trigger element.
+     * @param changed changed properties
      */
     willUpdate(changed: PropertyValues<this>): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     show(): Promise<void>;
     hide(): Promise<void>;
 }

package/pf-tooltip/pf-tooltip.js

@@ -1,6 +1,6 @@
 var _PfTooltip_instances, _PfTooltip_invoker_get, _PfTooltip_content_get, _PfTooltip_referenceTrigger, _PfTooltip_float, _PfTooltip_invokerChanged, _PfTooltip_getReferenceTrigger, _PfTooltip_updateTrigger;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
-import { LitElement, html } from 'lit';
+import { LitElement, html, isServer } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -12,90 +12,6 @@ import { css } from "lit";
 const styles = css `:host {\n  --_timestamp-text-decoration: underline dashed 1px;\n  --_timestamp-text-underline-offset: 4px;\n  display: inline;\n}\n\n* { box-sizing: border-box; }\n\n#container {\n  display: inline-flex;\n  position: relative;\n  max-width: 100%;\n  --_floating-arrow-size: var(--pf-c-tooltip__arrow--Width, 0.5rem);\n}\n\n#tooltip,\n#tooltip::after {\n  position: absolute;\n}\n\n#tooltip {\n  --_timestamp-text-decoration: none;\n  --_timestamp-text-underline-offset: initial;\n  display: block;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 10000;\n  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;\n  text-align: center;\n  word-break: break-word;\n  translate: var(--_floating-content-translate);\n  max-width: calc(100vw - 10px);\n  width: max-content;\n  top: 0;\n  left: 0;\n  will-change: opacity;\n  line-height: var(--pf-c-tooltip--line-height, 1.5);\n  max-width: var(--pf-c-tooltip--MaxWidth, 18.75rem);\n  box-shadow: var(--pf-c-tooltip--BoxShadow,\n    var(--pf-global--BoxShadow--md,\n      0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12),\n      0 0 0.25rem 0 rgba(3, 3, 3, 0.06)));\n  padding:\n    var(--pf-c-tooltip__content--PaddingTop,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingRight,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingBottom,\n      var(--pf-global--spacer--sm, 0.5rem))\n    var(--pf-c-tooltip__content--PaddingLeft,\n      var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--pf-c-tooltip__content--FontSize,\n    var(--pf-global--FontSize--sm, 0.875rem));\n  color: var(--pf-c-tooltip__content--Color,\n    var(--pf-global--Color--light-100, #ffffff));\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n#tooltip::after {\n  display: block;\n  content: '';\n  rotate: 45deg;\n  width: var(--_floating-arrow-size);\n  height: var(--_floating-arrow-size);\n  will-change: left top right bottom;\n  background-color: var(--pf-c-tooltip__content--BackgroundColor,\n    var(--pf-global--BackgroundColor--dark-100, #151515));\n}\n\n.open #tooltip {\n  opacity: 1;\n}\n\n/* LEFT */\n.left #tooltip::after          { right: calc(-0.5 * var(--_floating-arrow-size)); }\n.left.center #tooltip::after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.left.start #tooltip::after    { top: var(--_floating-arrow-size); }\n.left.end #tooltip::after      { bottom: var(--_floating-arrow-size); }\n\n/* TOP */\n.top #tooltip::after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.top.center #tooltip::after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.top.start #tooltip::after     { left: var(--_floating-arrow-size); }\n.top.end #tooltip::after       { right: var(--_floating-arrow-size); }\n\n/* RIGHT */\n.right #tooltip::after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.right.center #tooltip::after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.right.start #tooltip::after   { top: var(--_floating-arrow-size); }\n.right.end #tooltip::after     { bottom: var(--_floating-arrow-size); }\n\n/* BOTTOM */\n.bottom #tooltip::after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.center #tooltip::after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }\n.bottom.start #tooltip::after  { left: var(--_floating-arrow-size); }\n.bottom.end #tooltip::after    { right: var(--_floating-arrow-size); }\n\n`;
 const EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];
 const ExitEvents = ['focusout', 'blur', 'mouseleave'];
-/**
- * A **tooltip** is in-app messaging used to identify elements on a page with short,
- * clarifying text.
- * @summary Toggle the visibility of helpful or contextual information.
- * @slot
- *       This slot wraps around the element that should be used to invoke the tooltip content to display.
- *       Typically this would be an icon, button, or other small sized element.
- * @slot content
- *       This slot renders the content that will be displayed inside of the tooltip.
- *       Typically this would include a string of text without any additional elements.
- *       This element is wrapped with a div inside of the component to give it the stylings and background colors.
- * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor
- *              Sets the background color for the tooltip content.
- *              {@default `#1b1d21`}
- * @cssprop     {<color>} --pf-c-tooltip__content--Color
- *              Sets the font color for the tooltip content.
- *              {@default `#e0e0e0`}
- * @cssprop     {<number>} --pf-c-tooltip--line-height
- *              Sets the font color for the tooltip content.
- *              {@default `1.5`}
- * @cssprop     {<length>} --pf-c-tooltip--MaxWidth
- *              Maximum width for the tooltip.
- *              {@default `18.75rem`}
- * @cssprop     --pf-c-tooltip--BoxShadow
- *              Box shadow for the tooltip.
- *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop
- *              Top padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight
- *              Right padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom
- *              Bottom padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft
- *              Left Padding for the tooltip.
- *              {@default `0.5rem`}
- * @cssprop     --pf-c-tooltip__content--FontSize
- *              Font size for the tooltip content.
- *              {@default `0.875rem`}
- * @cssprop     {<length>} --pf-c-tooltip__arrow--Width
- *              Tooltip arrow width.
- *              {@default `0.5rem`}
- * @cssprop     {<length>} --pf-c-tooltip__arrow--Height
- *              Tooltip arrow height.
- *              {@default `0.5rem`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX
- *              Positions the tooltip arrow along the x axis for `top` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY
- *              Positions the tooltip arrow along the y axis for `top` positioned arrows.
- *              {@default `50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate
- *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX
- *              Positions the tooltip arrow along the x axis for `right` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY
- *              Positions the tooltip arrow along the y axis for `right` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate
- *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX
- *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY
- *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate
- *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.
- *              {@default `45deg`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX
- *              Positions the tooltip arrow along the x axis for `left` positioned arrows.
- *              {@default `50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY
- *              Positions the tooltip arrow along the y axis for `left` positioned arrows.
- *              {@default `-50%`}
- * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate
- *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.
- *              {@default `45deg`}
- */
 let PfTooltip = class PfTooltip extends LitElement {
     constructor() {
         super(...arguments);
@@ -129,6 +45,7 @@ let PfTooltip = class PfTooltip extends LitElement {
     /**
      * Removes event listeners from the old trigger element and attaches
      * them to the new trigger element.
+     * @param changed changed properties
      */
     willUpdate(changed) {
         if (changed.has('trigger')) {
@@ -190,32 +107,35 @@ _PfTooltip_getReferenceTrigger = function _PfTooltip_getReferenceTrigger() {
         .getElementById(this.trigger?.normalize() ?? '');
 };
 _PfTooltip_updateTrigger = function _PfTooltip_updateTrigger() {
-    const oldReferenceTrigger = __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");
-    __classPrivateFieldSet(this, _PfTooltip_referenceTrigger, this.trigger instanceof HTMLElement ? this.trigger
-        : typeof this.trigger === 'string' ? __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_getReferenceTrigger).call(this)
-            : null, "f");
-    for (const evt of EnterEvents) {
-        if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
-            this.removeEventListener(evt, this.show);
-            __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.show);
+    if (!isServer) {
+        const oldReferenceTrigger = __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f");
+        __classPrivateFieldSet(this, _PfTooltip_referenceTrigger, this.trigger instanceof HTMLElement ? this.trigger
+            : typeof this.trigger === 'string' ? __classPrivateFieldGet(this, _PfTooltip_instances, "m", _PfTooltip_getReferenceTrigger).call(this)
+                : null, "f");
+        for (const evt of EnterEvents) {
+            if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
+                this.removeEventListener(evt, this.show);
+                __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.show);
+            }
+            else {
+                oldReferenceTrigger?.removeEventListener(evt, this.show);
+                this.addEventListener(evt, this.show);
+            }
         }
-        else {
-            oldReferenceTrigger?.removeEventListener(evt, this.show);
-            this.addEventListener(evt, this.show);
-        }
-    }
-    for (const evt of ExitEvents) {
-        if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
-            this.removeEventListener(evt, this.hide);
-            __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.hide);
-        }
-        else {
-            oldReferenceTrigger?.removeEventListener(evt, this.hide);
-            this.addEventListener(evt, this.hide);
+        for (const evt of ExitEvents) {
+            if (__classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f")) {
+                this.removeEventListener(evt, this.hide);
+                __classPrivateFieldGet(this, _PfTooltip_referenceTrigger, "f").addEventListener(evt, this.hide);
+            }
+            else {
+                oldReferenceTrigger?.removeEventListener(evt, this.hide);
+                this.addEventListener(evt, this.hide);
+            }
         }
     }
 };
 PfTooltip.styles = [styles];
+PfTooltip.version = "4.0.0";
 __decorate([
     property()
 ], PfTooltip.prototype, "position", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\nimport { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n  FloatingDOMController,\n  type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\n\nimport { StringListConverter } from '@patternfly/pfe-core';\n\n\nimport styles from './pf-tooltip.css';\n\nconst EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst ExitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot\n *       This slot wraps around the element that should be used to invoke the tooltip content to display.\n *       Typically this would be an icon, button, or other small sized element.\n * @slot content\n *       This slot renders the content that will be displayed inside of the tooltip.\n *       Typically this would include a string of text without any additional elements.\n *       This element is wrapped with a div inside of the component to give it the stylings and background colors.\n * @cssprop     {<color>} --pf-c-tooltip__content--BackgroundColor\n *              Sets the background color for the tooltip content.\n *              {@default `#1b1d21`}\n * @cssprop     {<color>} --pf-c-tooltip__content--Color\n *              Sets the font color for the tooltip content.\n *              {@default `#e0e0e0`}\n * @cssprop     {<number>} --pf-c-tooltip--line-height\n *              Sets the font color for the tooltip content.\n *              {@default `1.5`}\n * @cssprop     {<length>} --pf-c-tooltip--MaxWidth\n *              Maximum width for the tooltip.\n *              {@default `18.75rem`}\n * @cssprop     --pf-c-tooltip--BoxShadow\n *              Box shadow for the tooltip.\n *              {@default `0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingTop\n *              Top padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingRight\n *              Right padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingBottom\n *              Bottom padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__content--PaddingLeft\n *              Left Padding for the tooltip.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__content--FontSize\n *              Font size for the tooltip content.\n *              {@default `0.875rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Width\n *              Tooltip arrow width.\n *              {@default `0.5rem`}\n * @cssprop     {<length>} --pf-c-tooltip__arrow--Height\n *              Tooltip arrow height.\n *              {@default `0.5rem`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateX\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--TranslateY\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-top--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateX\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--TranslateY\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-right--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateX\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--TranslateY\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-bottom--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *              {@default `45deg`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateX\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *              {@default `50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--TranslateY\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *              {@default `-50%`}\n * @cssprop     --pf-c-tooltip__arrow--m-left--Rotate\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *              {@default `45deg`}\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n  static readonly styles = [styles];\n\n  /** The position of the tooltip, relative to the invoking content */\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\n\n  /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */\n  @property({ type: Boolean, attribute: 'no-flip' }) noFlip = false;\n\n  @property() trigger?: string | Element;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  get #invoker(): HTMLSlotElement | null {\n    return this.shadowRoot?.querySelector('#invoker') ?? null;\n  }\n\n  get #content(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('#tooltip') ?? null;\n  }\n\n  #referenceTrigger?: HTMLElement | null;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | null | undefined => this.#content,\n    invoker: (): HTMLElement | null | undefined => {\n      if (this.#referenceTrigger) {\n        return this.#referenceTrigger;\n      } else if (this.#invoker instanceof HTMLSlotElement\n              && this.#invoker.assignedElements().length > 0) {\n        return this.#invoker.assignedElements().at(0) as HTMLElement;\n      } else {\n        return this.#invoker;\n      }\n    },\n  });\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.#invokerChanged();\n    this.#updateTrigger();\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   */\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('trigger')) {\n      this.#updateTrigger();\n    }\n  }\n\n  override render() {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    const blockInvoker =\n      this.#invoker?.assignedElements().length === 0\n      && this.#invoker?.assignedNodes().length > 0;\n    const display = blockInvoker ? 'block' : 'contents';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <div role=\"tooltip\"\n             style=\"${styleMap({ display })}\"\n             aria-labelledby=\"tooltip\">\n          <slot id=\"invoker\" @slotchange=\"${this.#invokerChanged}\"></slot>\n        </div>\n        <div aria-hidden=\"${String(!open) as 'true' | 'false'}\">\n          <slot id=\"tooltip\" name=\"content\">${this.content}</slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** the invoker slot should render at block level if it only has text nodes */\n  #invokerChanged() {\n    this.requestUpdate();\n  }\n\n  #getReferenceTrigger() {\n    return (this.getRootNode() as Document | ShadowRoot)\n        .getElementById(this.trigger?.normalize() ?? '');\n  }\n\n  #updateTrigger() {\n    const oldReferenceTrigger = this.#referenceTrigger;\n    this.#referenceTrigger =\n        this.trigger instanceof HTMLElement ? this.trigger\n      : typeof this.trigger === 'string' ? this.#getReferenceTrigger()\n      : null;\n    for (const evt of EnterEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.show);\n        this.#referenceTrigger.addEventListener(evt, this.show);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.show);\n        this.addEventListener(evt, this.show);\n      }\n    }\n    for (const evt of ExitEvents) {\n      if (this.#referenceTrigger) {\n        this.removeEventListener(evt, this.hide);\n        this.#referenceTrigger.addEventListener(evt, this.hide);\n      } else {\n        oldReferenceTrigger?.removeEventListener(evt, this.hide);\n        this.addEventListener(evt, this.hide);\n      }\n    }\n  }\n\n  @bound async show() {\n    await this.updateComplete;\n    const placement = this.position;\n    const offset =\n        !placement?.match(/top|bottom/) ? 15\n      : { mainAxis: 15, alignmentAxis: -4 };\n    await this.#float.show({\n      offset,\n      placement,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n  }\n\n  @bound async hide() {\n    await this.#float.hide();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}
+{"version":3,"file":"pf-tooltip.js","sourceRoot":"","sources":["pf-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues, TemplateResult } from 'lit';\nimport { LitElement, html, isServer } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport {\n  FloatingDOMController,\n  type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { bound } from '@patternfly/pfe-core/decorators/bound.js';\n\nimport { StringListConverter } from '@patternfly/pfe-core';\n\nimport styles from './pf-tooltip.css';\n\nconst EnterEvents = ['focusin', 'tap', 'click', 'mouseenter'];\nconst ExitEvents = ['focusout', 'blur', 'mouseleave'];\n\n/**\n * A **tooltip** is in-app messaging used to identify elements on a page with short,\n * clarifying text.\n * @summary Toggle the visibility of helpful or contextual information.\n * @slot\n *       This slot wraps around the element that should be used to invoke the tooltip content to display.\n *       Typically this would be an icon, button, or other small sized element.\n * @slot content\n *       This slot renders the content that will be displayed inside of the tooltip.\n *       Typically this would include a string of text without any additional elements.\n *       This element is wrapped with a div inside of the component to give it the stylings and background colors.\n * @cssprop     {<color>} [--pf-c-tooltip__content--BackgroundColor=#1b1d21]\n *              Sets the background color for the tooltip content.\n *\n * @cssprop     {<color>} [--pf-c-tooltip__content--Color=#e0e0e0]\n *              Sets the font color for the tooltip content.\n *\n * @cssprop     {<number>} [--pf-c-tooltip--line-height=1.5]\n *              Sets the font color for the tooltip content.\n *\n * @cssprop     {<length>} [--pf-c-tooltip--MaxWidth=18.75rem]\n *              Maximum width for the tooltip.\n *\n * @cssprop     [--pf-c-tooltip--BoxShadow=0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)]\n *              Box shadow for the tooltip.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingTop=0.5rem]\n *              Top padding for the tooltip.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingRight=0.5rem]\n *              Right padding for the tooltip.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingBottom=0.5rem]\n *              Bottom padding for the tooltip.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__content--PaddingLeft=0.5rem]\n *              Left Padding for the tooltip.\n *\n * @cssprop     [--pf-c-tooltip__content--FontSize=0.875rem]\n *              Font size for the tooltip content.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__arrow--Width=0.5rem]\n *              Tooltip arrow width.\n *\n * @cssprop     {<length>} [--pf-c-tooltip__arrow--Height=0.5rem]\n *              Tooltip arrow height.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateX=-50]\n *              Positions the tooltip arrow along the x axis for `top` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-top--TranslateY=50]\n *              Positions the tooltip arrow along the y axis for `top` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-top--Rotate=45deg]\n *              Rotates the tooltip arrow based on degrees of movement for `top` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateX=-50]\n *              Positions the tooltip arrow along the x axis for `right` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-right--TranslateY=-50]\n *              Positions the tooltip arrow along the y axis for `right` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-right--Rotate=45deg]\n *              Rotates the tooltip arrow based on degrees of movement for `right` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateX=-50]\n *              Positions the tooltip arrow along the x axis for `bottom` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-bottom--TranslateY=-50]\n *              Positions the tooltip arrow along the y axis for `bottom` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-bottom--Rotate=45deg]\n *              Rotates the tooltip arrow based on degrees of movement for `bottom` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateX=50]\n *              Positions the tooltip arrow along the x axis for `left` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-left--TranslateY=-50]\n *              Positions the tooltip arrow along the y axis for `left` positioned arrows.\n *\n * @cssprop     [--pf-c-tooltip__arrow--m-left--Rotate=45deg]\n *              Rotates the tooltip arrow based on degrees of movement for `left` positioned arrows.\n *\n */\n@customElement('pf-tooltip')\nexport class PfTooltip extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  /** The position of the tooltip, relative to the invoking content */\n  @property() position: Placement = 'top';\n\n  /** Tooltip content. Overridden by the content slot */\n  @property() content?: string;\n\n  /** If false, prevents the tooltip from trying to remain in view by flipping itself when necessary */\n  @property({ type: Boolean, attribute: 'no-flip' }) noFlip = false;\n\n  @property() trigger?: string | Element;\n\n  /**\n   * The flip order when flip is enabled and the initial position is not possible.\n   * There are 12 options: `top`, `bottom`, `left`, `right`, `top-start`, `top-end`,\n   * `bottom-start`, `bottom-end`, `left-start`, `left-end`,`right-start`, `right-end`.\n   * The default is [oppositePlacement], where only the opposite placement is tried.\n   */\n  @property({\n    attribute: 'flip-behavior',\n    converter: StringListConverter,\n  }) flipBehavior?: Placement[];\n\n  get #invoker(): HTMLSlotElement | null {\n    return this.shadowRoot?.querySelector('#invoker') ?? null;\n  }\n\n  get #content(): HTMLElement | null {\n    return this.shadowRoot?.querySelector('#tooltip') ?? null;\n  }\n\n  #referenceTrigger?: HTMLElement | null;\n\n  #float = new FloatingDOMController(this, {\n    content: (): HTMLElement | null | undefined => this.#content,\n    invoker: (): HTMLElement | null | undefined => {\n      if (this.#referenceTrigger) {\n        return this.#referenceTrigger;\n      } else if (this.#invoker instanceof HTMLSlotElement\n              && this.#invoker.assignedElements().length > 0) {\n        return this.#invoker.assignedElements().at(0) as HTMLElement;\n      } else {\n        return this.#invoker;\n      }\n    },\n  });\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#invokerChanged();\n    this.#updateTrigger();\n  }\n\n  /**\n   * Removes event listeners from the old trigger element and attaches\n   * them to the new trigger element.\n   * @param changed changed properties\n   */\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('trigger')) {\n      this.#updateTrigger();\n    }\n  }\n\n  override render(): TemplateResult<1> {\n    const { alignment, anchor, open, styles } = this.#float;\n\n    const blockInvoker =\n      this.#invoker?.assignedElements().length === 0\n      && this.#invoker?.assignedNodes().length > 0;\n    const display = blockInvoker ? 'block' : 'contents';\n\n    return html`\n      <div id=\"container\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ open,\n                               [anchor]: !!anchor,\n                               [alignment]: !!alignment })}\">\n        <div role=\"tooltip\"\n             style=\"${styleMap({ display })}\"\n             aria-labelledby=\"tooltip\">\n          <slot id=\"invoker\" @slotchange=\"${this.#invokerChanged}\"></slot>\n        </div>\n        <div aria-hidden=\"${String(!open) as 'true' | 'false'}\">\n          <slot id=\"tooltip\" name=\"content\">${this.content}</slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /** the invoker slot should render at block level if it only has text nodes */\n  #invokerChanged() {\n    this.requestUpdate();\n  }\n\n  #getReferenceTrigger() {\n    return (this.getRootNode() as Document | ShadowRoot)\n        .getElementById(this.trigger?.normalize() ?? '');\n  }\n\n  #updateTrigger() {\n    if (!isServer) {\n      const oldReferenceTrigger = this.#referenceTrigger;\n      this.#referenceTrigger =\n          this.trigger instanceof HTMLElement ? this.trigger\n        : typeof this.trigger === 'string' ? this.#getReferenceTrigger()\n        : null;\n      for (const evt of EnterEvents) {\n        if (this.#referenceTrigger) {\n          this.removeEventListener(evt, this.show);\n          this.#referenceTrigger.addEventListener(evt, this.show);\n        } else {\n          oldReferenceTrigger?.removeEventListener(evt, this.show);\n          this.addEventListener(evt, this.show);\n        }\n      }\n      for (const evt of ExitEvents) {\n        if (this.#referenceTrigger) {\n          this.removeEventListener(evt, this.hide);\n          this.#referenceTrigger.addEventListener(evt, this.hide);\n        } else {\n          oldReferenceTrigger?.removeEventListener(evt, this.hide);\n          this.addEventListener(evt, this.hide);\n        }\n      }\n    }\n  }\n\n  @bound async show(): Promise<void> {\n    await this.updateComplete;\n    const placement = this.position;\n    const offset =\n        !placement?.match(/top|bottom/) ? 15\n      : { mainAxis: 15, alignmentAxis: -4 };\n    await this.#float.show({\n      offset,\n      placement,\n      flip: !this.noFlip,\n      fallbackPlacements: this.flipBehavior,\n    });\n  }\n\n  @bound async hide(): Promise<void> {\n    await this.#float.hide();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tooltip': PfTooltip;\n  }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { test } from '@playwright/test';
 import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
 const tagName = 'pf-tooltip';
 test.describe(tagName, () => {
     test('snapshot', async ({ page }) => {
@@ -7,5 +8,16 @@ test.describe(tagName, () => {
         await componentPage.navigate();
         await componentPage.snapshot();
     });
+    test('ssr', async ({ browser }) => {
+        const fixture = new SSRPage({
+            tagName,
+            browser,
+            demoDir: new URL('../demo/', import.meta.url),
+            importSpecifiers: [
+                `@patternfly/elements/${tagName}/${tagName}.js`,
+            ],
+        });
+        await fixture.snapshots();
+    });
 });
 //# sourceMappingURL=pf-tooltip.e2e.js.map

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

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