@patternfly/elements 1.0.0

package/pf-tile/pf-tile.d.ts

@@ -0,0 +1,53 @@
+import { BaseTile } from './BaseTile.js';
+export type StackedSize = ('md' | 'lg');
+/**
+ * Tile
+ *
+ * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
+ * @slot title          - the title of the tile should be a heading
+ * @slot                - The content should be a paragraph
+ *
+ * @csspart icon        - container for the icon
+ * @csspart title       - container for the title
+ * @csspart body        - container for the body content
+ *
+ * @attr {'boolean'} selected       - selected variant
+ * @attr {'md'|'lg'|null} stacked   - stacked variant
+ *
+ * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}
+ *
+ * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}
+ *
+ * @cssprop   --pf-c-tile--Transition {@default `none`}
+ * @cssprop   --pf-c-tile--TranslateY {@default `0`}
+ *
+ * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}
+ * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}
+ *
+ * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}
+ * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}
+ *
+ * @cssprop   --pf-c-tile--after--Transition {@default `none`}
+ * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}
+ *
+ * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}
+ * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
+ *
+ * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
+ * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
+ *
+ * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
+ */
+export declare class PfTile extends BaseTile {
+    static readonly styles: import("lit").CSSResult[];
+    selected: boolean;
+    stacked?: StackedSize;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-tile': PfTile;
+    }
+}

package/pf-tile/pf-tile.js

@@ -0,0 +1,65 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
+import { BaseTile } from './BaseTile.js';
+import { css } from "lit";
+const styles = css `:host {\n  position: relative;\n  display: inline-grid;\n  padding: var(--pf-c-tile--PaddingTop, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingRight, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))\n          var(--pf-c-tile--PaddingLeft, var(--pf-global--spacer--lg, 1.5rem));\n  text-align: center;\n  cursor: pointer;\n  background-color: var(--pf-c-tile--BackgroundColor,\n                    var(--pf-global--BackgroundColor--100,\n                    var(--pf-global--BackgroundColor--light-100), #ffffff));\n  grid-template-rows: -webkit-min-content;\n  grid-template-rows: min-content;\n  transition: var(--pf-c-tile--Transition, none);\n  transform: translateY(var(--pf-c-tile--TranslateY, 0));\n}\n\n:host::before,\n:host::after {\n  position: absolute;\n  pointer-events: none;\n  content: "";\n}\n\n:host::before {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border: var(--pf-c-tile--before--BorderWidth, var(--pf-global--BorderWidth--sm, 1px))\n          solid\n          var(--pf-c-tile--before--BorderColor, var(--pf-global--BorderColor--100, #d2d2d2));\n}\n\n:host::after {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  height: var(--pf-c-tile--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  background-color: var(--pf-c-tile--after--BackgroundColor, transparent);\n  transition: var(--pf-c-tile--after--Transition, none);\n  transform: scaleY(var(--pf-c-tile--after--ScaleY, 1)) translateY(var(--pf-c-tile--after--TranslateY, 0));\n}\n\n:host(:hover) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--hover--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:focus) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--focus--after--BackgroundColor, var(--pf-global--active-color--400, #73bcf7));\n}\n\n:host(:active),\n:host([selected]) {\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color, var(--pf-global--primary-color--100, #06c));\n  --pf-c-tile--TranslateY: var(--pf-c-tile--m-selected--TranslateY,\n                            calc(-1 * var(--pf-c-tile--m-selected--after--ScaleY, 2) * var(--pf-c-tile--m-selected--after--Height,\n                            var(--pf-global--BorderWidth--lg, 3px))));\n  --pf-c-tile--Transition: var(--pf-c-tile--m-selected--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--Height: var(--pf-c-tile--m-selected--after--Height, var(--pf-global--BorderWidth--lg, 3px));\n  --pf-c-tile--after--BackgroundColor: var(--pf-c-tile--m-selected--after--BackgroundColor, var(--pf-global--active-color--100, #06c));\n  --pf-c-tile--after--Transition: var(--pf-c-tile--m-selected--after--Transition,\n                          var(--pf-global--Transition, all 250ms cubic-bezier(0.42, 0, 0.58, 1)));\n  --pf-c-tile--after--ScaleY: var(--pf-c-tile--m-selected--after--ScaleY, 2);\n}\n\n:host([disabled]) {\n  --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor, var( --pf-global--disabled-color--300, #f0f0f0));\n  --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color,  var(--pf-global--disabled-color--100, #6a6e73));\n  --pf-c-tile--before--BorderWidth: 0;\n  --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color, var(--pf-global--disabled-color--100, #6a6e73));\n  pointer-events: none;\n}\n\n[part="header"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n[part="title"] {\n  color: var(--pf-c-tile__title--Color, var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n}\n\n[part="body"] {\n  font-size: var(--pf-c-tile__body--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n  color: var(--pf-c-tile__body--Color, var(--pf-global--Color--100, #151515));\n}\n\n[part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md, 1.125rem));\n  --pf-icon--size: var(--_icon-size);\n  margin-right: var(--pf-c-tile__icon--MarginRight, var(--pf-global--spacer--sm, 0.5rem));\n  font-size: var(--_icon-size);\n  color: var(--pf-c-tile__icon--Color, var(--pf-global--Color--100, #151515));\n}\n\n:host([stacked]) [part="header"] {\n  --pf-c-tile__icon--MarginRight: 0;\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--lg, 1.5rem)));\n  flex-direction: column;\n  justify-content: initial;\n}\n\n:host([stacked="lg"]) [part="icon"] {\n  --_icon-size: var(--pf-c-tile__icon--FontSize, var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize, var(--pf-global--icon--FontSize--xl, 3.375rem)));\n}\n\n:host([stacked]) [part="icon"] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n#body::slotted(:is(h1,h2,h3,h4,h5,h6,p)),\n#title::slotted(:is(h1,h2,h3,h4,h5,h6,p)) {\n  margin-block: 0;\n}\n\n`;
+/**
+ * Tile
+ *
+ * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`
+ * @slot title          - the title of the tile should be a heading
+ * @slot                - The content should be a paragraph
+ *
+ * @csspart icon        - container for the icon
+ * @csspart title       - container for the title
+ * @csspart body        - container for the body content
+ *
+ * @attr {'boolean'} selected       - selected variant
+ * @attr {'md'|'lg'|null} stacked   - stacked variant
+ *
+ * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}
+ * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}
+ *
+ * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}
+ *
+ * @cssprop   --pf-c-tile--Transition {@default `none`}
+ * @cssprop   --pf-c-tile--TranslateY {@default `0`}
+ *
+ * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}
+ * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}
+ *
+ * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}
+ * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}
+ *
+ * @cssprop   --pf-c-tile--after--Transition {@default `none`}
+ * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}
+ *
+ * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}
+ * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}
+ *
+ * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}
+ * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}
+ *
+ * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}
+ */
+let PfTile = class PfTile extends BaseTile {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+    }
+};
+PfTile.styles = [styles];
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfTile.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true })
+], PfTile.prototype, "stacked", void 0);
+PfTile = __decorate([
+    customElement('pf-tile')
+], PfTile);
+export { PfTile };
+//# sourceMappingURL=pf-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tile.js","sourceRoot":"","sources":["pf-tile.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;;;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IAG/D,CAAC;;AALiB,aAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAEU;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAEhC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAuB;AALxC,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAMlB;SANY,MAAM","sourcesContent":["\nimport { customElement } from 'lit/decorators.js';\nimport { property } from 'lit/decorators.js';\n\nimport { BaseTile } from './BaseTile.js';\n\nimport styles from './pf-tile.css';\n\nexport type StackedSize = (\n  | 'md'\n  | 'lg'\n)\n\n/**\n * Tile\n *\n * @slot icon           - Icon expects a `<pf-icon>` or `<svg>`\n * @slot title          - the title of the tile should be a heading\n * @slot                - The content should be a paragraph\n *\n * @csspart icon        - container for the icon\n * @csspart title       - container for the title\n * @csspart body        - container for the body content\n *\n * @attr {'boolean'} selected       - selected variant\n * @attr {'md'|'lg'|null} stacked   - stacked variant\n *\n * @cssprop   {<length>} --pf-c-tile--PaddingTop      {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingRight    {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingBottom   {@default `1.5rem`}\n * @cssprop   {<length>} --pf-c-tile--PaddingLeft     {@default `1.5rem`}\n *\n * @cssprop   {<color>} --pf-c-tile--BackgroundColor  {@default `#FFFFFF`}\n *\n * @cssprop   --pf-c-tile--Transition {@default `none`}\n * @cssprop   --pf-c-tile--TranslateY {@default `0`}\n *\n * @cssprop   {<length>} --pf-c-tile--before--BorderWidth {@default `1px`}\n * @cssprop   {<color>} --pf-c-tile--before--BorderColor  {@default `#444548`}\n *\n * @cssprop   {<length>} --pf-c-tile--after--Height {@default `3px`}\n * @cssprop   {<color>} --pf-c-tile--after--BackgroundColor {@default `transparent`}\n *\n * @cssprop   --pf-c-tile--after--Transition {@default `none`}\n * @cssprop   --pf-c-tile--after--ScaleY {@default `1`}\n *\n * @cssprop   {<color>} --pf-c-tile__title--Color {@default `#06c`}\n * @cssprop   {<color>} --pf-c-tile__icon--Color {@default `#06c`}\n *\n * @cssprop   {<length>} --pf-c-tile__icon--MarginRight {@default `0`}\n * @cssprop   {<length>} --pf-c-tile__icon--FontSize {@default `1.5rem`}\n *\n * @cssprop   {<lenght>} --pf-c-tile__header--m-stacked__icon--MarginBottom {@default `0.25rem`}\n */\n@customElement('pf-tile')\nexport class PfTile extends BaseTile {\n  static readonly styles = [styles];\n\n  @property({ reflect: true, type: Boolean }) selected = false;\n\n  @property({ reflect: true }) stacked?: StackedSize;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tile': PfTile;\n}\n}\n"]}

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

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

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

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

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +1,51 @@
+import { expect, html, nextFrame } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfTile } from '@patternfly/elements/pf-tile/pf-tile.js';
+const TEMPLATE = html `
+  <pf-tile>
+    <pf-icon slot="icon" set="fas" icon="bell" size="md" loading="idle"></pf-icon>
+    Default Content
+    <div slot="body">Subtext goes here</div>
+  </pf-tile>
+`;
+describe('<pf-tile>', function () {
+    it('should upgrade', async function () {
+        const el = await createFixture(TEMPLATE);
+        const klass = customElements.get('pf-tile');
+        expect(el)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfTile);
+    });
+    it('should have a selected styles when selected', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.selected = true;
+        await nextFrame();
+        const { height } = getComputedStyle(el, ':after');
+        expect(height).to.equal('3px');
+        const { backgroundColor } = getComputedStyle(el, ':after');
+        expect(backgroundColor).to.equal('rgb(0, 102, 204)');
+        // TODO: don't test shadowroots
+        const { color } = getComputedStyle(el.shadowRoot.querySelector('[part="icon"]'));
+        expect(color).to.be.equal('rgb(0, 102, 204)');
+    });
+    it('should be flex direction column if stacked', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.stacked = 'md';
+        await nextFrame();
+        // TODO: don't test shadowroots
+        const { flexDirection } = getComputedStyle(el.shadowRoot.querySelector('[part="header"]'));
+        expect(flexDirection).to.equal('column');
+    });
+    it('should have disabled styles when disabled', async function () {
+        const el = await createFixture(TEMPLATE);
+        el.setAttribute('disabled', '');
+        await nextFrame();
+        const { backgroundColor } = getComputedStyle(el);
+        expect(backgroundColor).to.equal('rgb(240, 240, 240)');
+        // TODO: don't test shadowroots
+        const { color } = getComputedStyle(el.shadowRoot.querySelector('[part="title"]'));
+        expect(color).to.equal('rgb(106, 110, 115)');
+    });
+});
+//# sourceMappingURL=pf-tile.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tile.spec.js","sourceRoot":"","sources":["pf-tile.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,yCAAyC,CAAC;AAEjE,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;;;CAMpB,CAAC;AAGF,QAAQ,CAAC,WAAW,EAAE;IACpB,EAAE,CAAC,gBAAgB,EAAE,KAAK;QACxB,MAAM,EAAE,GAAG,MAAM,aAAa,CAAU,QAAQ,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC5C,MAAM,CAAC,EAAE,CAAC;aACP,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC;aAC1B,GAAG;aACH,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,KAAK;QACrD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAU,QAAQ,CAAC,CAAC;QAClD,EAAE,CAAC,QAAQ,GAAG,IAAI,CAAC;QACnB,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAClD,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAC/B,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC,EAAE,EAAE,QAAQ,CAAC,CAAC;QAC3D,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;QACrD,+BAA+B;QAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,eAAe,CAAE,CAAC,CAAC;QACnF,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK;QACpD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAU,QAAQ,CAAC,CAAC;QAClD,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC;QAClB,MAAM,SAAS,EAAE,CAAC;QAClB,+BAA+B;QAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,iBAAiB,CAAE,CAAC,CAAC;QAC7F,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK;QACnD,MAAM,EAAE,GAAG,MAAM,aAAa,CAAU,QAAQ,CAAC,CAAC;QAClD,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;QAChC,MAAM,SAAS,EAAE,CAAC;QAClB,MAAM,EAAE,eAAe,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACjD,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;QACvD,+BAA+B;QAC/B,MAAM,EAAE,KAAK,EAAE,GAAG,gBAAgB,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,gBAAgB,CAAE,CAAC,CAAC;QACpF,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { expect, html, nextFrame } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfTile } from '@patternfly/elements/pf-tile/pf-tile.js';\n\nconst TEMPLATE = html`\n  <pf-tile>\n    <pf-icon slot=\"icon\" set=\"fas\" icon=\"bell\" size=\"md\" loading=\"idle\"></pf-icon>\n    Default Content\n    <div slot=\"body\">Subtext goes here</div>\n  </pf-tile>\n`;\n\n\ndescribe('<pf-tile>', function() {\n  it('should upgrade', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    const klass = customElements.get('pf-tile');\n    expect(el)\n      .to.be.an.instanceOf(klass)\n      .and\n      .to.be.an.instanceOf(PfTile);\n  });\n\n  it('should have a selected styles when selected', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.selected = true;\n    await nextFrame();\n    const { height } = getComputedStyle(el, ':after');\n    expect(height).to.equal('3px');\n    const { backgroundColor } = getComputedStyle(el, ':after');\n    expect(backgroundColor).to.equal('rgb(0, 102, 204)');\n    // TODO: don't test shadowroots\n    const { color } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"icon\"]')!);\n    expect(color).to.be.equal('rgb(0, 102, 204)');\n  });\n\n  it('should be flex direction column if stacked', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.stacked = 'md';\n    await nextFrame();\n    // TODO: don't test shadowroots\n    const { flexDirection } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"header\"]')!);\n    expect(flexDirection).to.equal('column');\n  });\n\n  it('should have disabled styles when disabled', async function() {\n    const el = await createFixture <PfTile>(TEMPLATE);\n    el.setAttribute('disabled', '');\n    await nextFrame();\n    const { backgroundColor } = getComputedStyle(el);\n    expect(backgroundColor).to.equal('rgb(240, 240, 240)');\n    // TODO: don't test shadowroots\n    const { color } = getComputedStyle(el.shadowRoot!.querySelector('[part=\"title\"]')!);\n    expect(color).to.equal('rgb(106, 110, 115)');\n  });\n});\n"]}

package/pf-timestamp/demo/pf-timestamp.js

@@ -0,0 +1,3 @@
+import '@patternfly/elements/pf-card/pf-card.js';
+import '@patternfly/elements/pf-timestamp/pf-timestamp.js';
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';

package/pf-timestamp/pf-timestamp.css

@@ -0,0 +1,8 @@
+:host {
+  display: inline;
+}
+
+time {
+  text-decoration: var(--_timestamp-text-decoration, none);
+  text-underline-offset: var(--_timestamp-text-underline-offset, initial);
+}

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class PfTimestamp extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    get date(): string;
+    set date(string: string);
+    dateFormat?: 'full' | 'long' | 'medium' | 'short';
+    timeFormat?: 'full' | 'long' | 'medium' | 'short';
+    customFormat?: object;
+    displaySuffix?: string;
+    locale?: string;
+    relative?: boolean;
+    utc?: boolean;
+    hour12?: boolean;
+    get isoString(): string;
+    get time(): string;
+    willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-timestamp': PfTimestamp;
+    }
+}

package/pf-timestamp/pf-timestamp.js

@@ -0,0 +1,124 @@
+var _PfTimestamp_instances, _PfTimestamp_date, _PfTimestamp_isoString, _PfTimestamp_getTimeRelative;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { css } from "lit";
+const style = css `:host {\n  display: inline;\n}\n\ntime {\n  text-decoration: var(--_timestamp-text-decoration, none);\n  text-underline-offset: var(--_timestamp-text-underline-offset, initial);\n}\n`;
+const BooleanStringConverter = {
+    fromAttribute(value) {
+        return !value || value === 'true';
+    },
+};
+let PfTimestamp = class PfTimestamp extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfTimestamp_instances.add(this);
+        _PfTimestamp_date.set(this, new Date());
+        _PfTimestamp_isoString.set(this, __classPrivateFieldGet(this, _PfTimestamp_date, "f").toISOString());
+    }
+    get date() {
+        return __classPrivateFieldGet(this, _PfTimestamp_date, "f").toLocaleString();
+    }
+    set date(string) {
+        __classPrivateFieldSet(this, _PfTimestamp_date, new Date(string), "f");
+        __classPrivateFieldSet(this, _PfTimestamp_isoString, __classPrivateFieldGet(this, _PfTimestamp_date, "f").toISOString(), "f");
+    }
+    get isoString() {
+        return __classPrivateFieldGet(this, _PfTimestamp_isoString, "f");
+    }
+    get time() {
+        const { hour12, customFormat, dateFormat: dateStyle, timeFormat: timeStyle, utc } = this;
+        const timeZone = utc ? 'UTC' : undefined;
+        const formatOptions = customFormat || { hour12, dateStyle, timeStyle, timeZone };
+        const formattedDate = __classPrivateFieldGet(this, _PfTimestamp_date, "f").toLocaleString(this.locale, formatOptions);
+        return this.relative ? __classPrivateFieldGet(this, _PfTimestamp_instances, "m", _PfTimestamp_getTimeRelative).call(this, __classPrivateFieldGet(this, _PfTimestamp_date, "f")) : `${formattedDate}${this.displaySuffix ? ` ${this.displaySuffix}` : ''}`;
+    }
+    willUpdate() {
+        if (!this.displaySuffix && this.utc) {
+            this.displaySuffix = 'UTC';
+        }
+    }
+    render() {
+        return html `
+      <time datetime="${this.isoString}">${this.time}</time>
+    `;
+    }
+};
+_PfTimestamp_date = new WeakMap(), _PfTimestamp_isoString = new WeakMap(), _PfTimestamp_instances = new WeakSet(), _PfTimestamp_getTimeRelative = function _PfTimestamp_getTimeRelative(date) {
+    const ms = date.getTime() - Date.now();
+    const tense = ms > 0 ? 'until' : 'ago';
+    let str = 'just now';
+    const s = Math.round(Math.abs(ms) / 1000);
+    const min = Math.round(s / 60);
+    const h = Math.round(min / 60);
+    const d = Math.round(h / 24);
+    const m = Math.round(d / 30);
+    const y = Math.round(m / 12);
+    if (m >= 18) {
+        str = `${y} years`;
+    }
+    else if (m >= 12) {
+        str = 'a year';
+    }
+    else if (d >= 45) {
+        str = `${m} months`;
+    }
+    else if (d >= 30) {
+        str = 'a month';
+    }
+    else if (h >= 36) {
+        str = `${d} days`;
+    }
+    else if (h >= 24) {
+        str = 'a day';
+    }
+    else if (min >= 90) {
+        str = `${h} hours`;
+    }
+    else if (min >= 45) {
+        str = 'an hour';
+    }
+    else if (s >= 90) {
+        str = `${min} minutes`;
+    }
+    else if (s >= 45) {
+        str = 'a minute';
+    }
+    else if (s >= 10) {
+        str = `${s} seconds`;
+    }
+    return str !== 'just now' ? `${str} ${tense}` : str;
+};
+PfTimestamp.styles = [style];
+__decorate([
+    property({ reflect: true })
+], PfTimestamp.prototype, "date", null);
+__decorate([
+    property({ reflect: true, attribute: 'date-format' })
+], PfTimestamp.prototype, "dateFormat", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'time-format' })
+], PfTimestamp.prototype, "timeFormat", void 0);
+__decorate([
+    property({ attribute: false })
+], PfTimestamp.prototype, "customFormat", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'display-suffix' })
+], PfTimestamp.prototype, "displaySuffix", void 0);
+__decorate([
+    property({ reflect: true })
+], PfTimestamp.prototype, "locale", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfTimestamp.prototype, "relative", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], PfTimestamp.prototype, "utc", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter })
+], PfTimestamp.prototype, "hour12", void 0);
+PfTimestamp = __decorate([
+    customElement('pf-timestamp')
+], PfTimestamp);
+export { PfTimestamp };
+//# sourceMappingURL=pf-timestamp.js.map

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

@@ -0,0 +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,QAAQ,EAAE,MAAM,mBAAmB,CAAC;;;AAI5D,MAAM,sBAAsB,GAA8B;IACxD,aAAa,CAAC,KAAK;QACjB,OAAO,CAAC,KAAK,IAAI,KAAK,KAAK,MAAM,CAAC;IACpC,CAAC;CACF,CAAC;AAGK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QA6BL,4BAAQ,IAAI,IAAI,EAAE,EAAC;QAEnB,iCAAa,uBAAA,IAAI,yBAAM,CAAC,WAAW,EAAE,EAAC;IAkExC,CAAC;IA7FC,IAAI,IAAI;QACN,OAAO,uBAAA,IAAI,yBAAM,CAAC,cAAc,EAAE,CAAC;IACrC,CAAC;IAED,IAAI,IAAI,CAAC,MAAM;QACb,uBAAA,IAAI,qBAAS,IAAI,IAAI,CAAC,MAAM,CAAC,MAAA,CAAC;QAC9B,uBAAA,IAAI,0BAAc,uBAAA,IAAI,yBAAM,CAAC,WAAW,EAAE,MAAA,CAAC;IAC7C,CAAC;IAsBD,IAAI,SAAS;QACX,OAAO,uBAAA,IAAI,8BAAW,CAAC;IACzB,CAAC;IAED,IAAI,IAAI;QACN,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;QACzF,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;QACzC,MAAM,aAAa,GAAG,YAAY,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC;QACjF,MAAM,aAAa,GAAG,uBAAA,IAAI,yBAAM,CAAC,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QAC5E,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAA,IAAI,4DAAiB,MAArB,IAAI,EAAkB,uBAAA,IAAI,yBAAM,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IACrI,CAAC;IAED,UAAU;QACR,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,GAAG,EAAE;YACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC5B;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,IAAI;KAC/C,CAAC;IACJ,CAAC;;wLAMgB,IAAU;IACzB,MAAM,EAAE,GAAW,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IAC/C,MAAM,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;IACvC,IAAI,GAAG,GAAG,UAAU,CAAC;IACrB,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC;IAC1C,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC;IAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7B,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7B,IAAI,CAAC,IAAI,EAAE,EAAE;QACX,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC;KACpB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,QAAQ,CAAC;KAChB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC;KACrB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,SAAS,CAAC;KACjB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC;KACnB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,OAAO,CAAC;KACf;SAAM,IAAI,GAAG,IAAI,EAAE,EAAE;QACpB,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC;KACpB;SAAM,IAAI,GAAG,IAAI,EAAE,EAAE;QACpB,GAAG,GAAG,SAAS,CAAC;KACjB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,GAAG,GAAG,UAAU,CAAC;KACxB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,UAAU,CAAC;KAClB;SAAM,IAAI,CAAC,IAAI,EAAE,EAAE;QAClB,GAAG,GAAG,GAAG,CAAC,UAAU,CAAC;KACtB;IAED,OAAO,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AACtD,CAAC;AA/Fe,kBAAM,GAAG,CAAC,KAAK,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAG3B;AAOsD;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAmD;AAElD;IAAtD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;+CAAmD;AAEzE;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;AAE4B;IAArF,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,sBAAsB,EAAE,CAAC;2CAAkB;AA3B5F,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAiGvB;SAjGY,WAAW","sourcesContent":["import type { ComplexAttributeConverter } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport style from './pf-timestamp.css';\n\nconst BooleanStringConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return !value || value === 'true';\n  },\n};\n\n@customElement('pf-timestamp')\nexport class PfTimestamp extends LitElement {\n  static readonly styles = [style];\n\n  @property({ reflect: true })\n  get date() {\n    return this.#date.toLocaleString();\n  }\n\n  set date(string) {\n    this.#date = new Date(string);\n    this.#isoString = this.#date.toISOString();\n  }\n\n  @property({ reflect: true, attribute: 'date-format' }) dateFormat?: 'full' | 'long' | 'medium' | 'short';\n\n  @property({ reflect: true, attribute: 'time-format' }) timeFormat?: 'full' | 'long' | 'medium' | 'short';\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({ reflect: true, attribute: 'hour-12', converter: BooleanStringConverter }) hour12?: boolean;\n\n  #date = new Date();\n\n  #isoString = this.#date.toISOString();\n\n  get isoString() {\n    return this.#isoString;\n  }\n\n  get time() {\n    const { hour12, customFormat, dateFormat: dateStyle, timeFormat: timeStyle, utc } = this;\n    const timeZone = utc ? 'UTC' : undefined;\n    const formatOptions = customFormat || { hour12, dateStyle, timeStyle, timeZone };\n    const formattedDate = this.#date.toLocaleString(this.locale, formatOptions);\n    return this.relative ? this.#getTimeRelative(this.#date) : `${formattedDate}${this.displaySuffix ? ` ${this.displaySuffix}` : ''}`;\n  }\n\n  willUpdate() {\n    if (!this.displaySuffix && this.utc) {\n      this.displaySuffix = 'UTC';\n    }\n  }\n\n  render() {\n    return html`\n      <time datetime=\"${this.isoString}\">${this.time}</time>\n    `;\n  }\n\n  /**\n   * Based off of Github Relative Time\n   * https://github.com/github/time-elements/blob/master/src/relative-time.js\n   */\n  #getTimeRelative(date: Date) {\n    const ms: number = date.getTime() - Date.now();\n    const tense = ms > 0 ? 'until' : 'ago';\n    let str = 'just now';\n    const s = Math.round(Math.abs(ms) / 1000);\n    const min = Math.round(s / 60);\n    const h = Math.round(min / 60);\n    const d = Math.round(h / 24);\n    const m = Math.round(d / 30);\n    const y = Math.round(m / 12);\n    if (m >= 18) {\n      str = `${y} years`;\n    } else if (m >= 12) {\n      str = 'a year';\n    } else if (d >= 45) {\n      str = `${m} months`;\n    } else if (d >= 30) {\n      str = 'a month';\n    } else if (h >= 36) {\n      str = `${d} days`;\n    } else if (h >= 24) {\n      str = 'a day';\n    } else if (min >= 90) {\n      str = `${h} hours`;\n    } else if (min >= 45) {\n      str = 'an hour';\n    } else if (s >= 90) {\n      str = `${min} minutes`;\n    } else if (s >= 45) {\n      str = 'a minute';\n    } else if (s >= 10) {\n      str = `${s} seconds`;\n    }\n\n    return str !== 'just now' ? `${str} ${tense}` : str;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-timestamp': PfTimestamp;\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-timestamp';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await page.$eval('#realtime', el => el.closest('section')?.remove());
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-timestamp.e2e.js.map

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

@@ -0,0 +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"]}

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

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

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

@@ -0,0 +1,139 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfTimestamp } from '@patternfly/elements/pf-timestamp/pf-timestamp.js';
+describe('<pf-timestamp>', function () {
+    it('should upgrade', async function () {
+        const element = await createFixture(html `<pf-timestamp></pf-timestamp>`);
+        expect(element, 'the <pf-timestamp> should be an instance of PfTimestamp')
+            .to.be.an.instanceof(customElements.get('pf-timestamp'))
+            .and
+            .to.be.an.instanceof(PfTimestamp);
+    });
+    it('should show the current date by default with default formatting', async function () {
+        const element = await createFixture(html `
+      <pf-timestamp></pf-timestamp>
+    `);
+        const expected = new Date().toLocaleString();
+        expect(element.time).to.equal(expected);
+    });
+    it('should set the correct ISO date on the datetime attribute in the time element', async function () {
+        const date = new Date('Sat Jan 01 2022 00:00:00');
+        const dateString = date.toString();
+        const expected = date.toISOString();
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.isoString).to.equal(expected);
+    });
+    it('should show a passed in date with default formatting', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(new Date(dateString).toLocaleString());
+    });
+    it('should show custom formatting when date-format and time-format are passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" date-format="full" time-format="short"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show only a date when date-format is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" date-format="full"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show only time when time-format is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" time-format="short"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show custom formatting when customFormat is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const options = {
+            year: '2-digit',
+            month: 'short',
+            weekday: 'short',
+            day: 'numeric',
+            hour: 'numeric'
+        };
+        const expected = new Date(dateString).toLocaleString('en-US', options);
+        const element = await createFixture(html `
+      <pf-timestamp date="Sat Jan 01 2022 00:00:00" .customFormat=${options}></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a custom suffix when display-suffix is passed in', async function () {
+        const dateString = 'Sat Jan 01 2022 00:00:00';
+        const suffix = 'US Eastern';
+        const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" display-suffix="${suffix}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time', async function () {
+        const dateString = 'Sat Jan 01 2022 13:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US');
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 24 hour time when hour-12 is set to false', async function () {
+        const dateString = 'Sat Jan 01 2022 13:00:00';
+        const expected = new Date(dateString).toLocaleString('en-US', { hour12: false });
+        const element = await createFixture(html `
+      <pf-timestamp date="${dateString}" hour-12="false"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show with locale passed in', async function () {
+        const date = new Date(2022, 1, 1).toString();
+        const expected = new Date(date).toLocaleString('en-GB');
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-GB"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time by default for US locale', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-US');
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-US"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 24 hour time for US locale when hour-12 is false', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-US', { hour12: false });
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-US" hour-12="false"></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show a 12 hour time for a 24 hour locale when hour-12 is passed', async function () {
+        const date = new Date(2022, 1, 1, 13, 0).toString();
+        const expected = new Date(date).toLocaleString('en-GB', { hour12: true });
+        const element = await createFixture(html `
+      <pf-timestamp date="${date}" locale="en-GB" hour-12></pf-timestamp>
+    `);
+        expect(element.time).to.equal(expected);
+    });
+    it('should show relative time', async function () {
+        const date = new Date(2015, 7, 9, 14, 57, 0);
+        const element = await createFixture(html `
+      <pf-timestamp date="${date.toString()}" relative></pf-timestamp>
+    `);
+        expect(element.time).to.match(/\d+ years ago/);
+    });
+});
+//# sourceMappingURL=pf-timestamp.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-timestamp.spec.js","sourceRoot":"","sources":["pf-timestamp.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfTimestamp } from '@patternfly/elements/pf-timestamp/pf-timestamp.js';\n\ndescribe('<pf-timestamp>', function() {\n  it('should upgrade', async function() {\n    const element = await createFixture<PfTimestamp>(html`<pf-timestamp></pf-timestamp>`);\n    expect(element, 'the <pf-timestamp> should be an instance of PfTimestamp')\n      .to.be.an.instanceof(customElements.get('pf-timestamp'))\n      .and\n      .to.be.an.instanceof(PfTimestamp);\n  });\n\n  it('should show the current date by default with default formatting', async function() {\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp></pf-timestamp>\n    `);\n\n    const expected = new Date().toLocaleString();\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should set the correct ISO date on the datetime attribute in the time element', async function() {\n    const date = new Date('Sat Jan 01 2022 00:00:00');\n    const dateString = date.toString();\n    const expected = date.toISOString();\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.isoString).to.equal(expected);\n  });\n\n  it('should show a passed in date with default formatting', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(new Date(dateString).toLocaleString());\n  });\n\n  it('should show custom formatting when date-format and time-format are passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full', timeStyle: 'short' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" date-format=\"full\" time-format=\"short\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show only a date when date-format is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { dateStyle: 'full' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" date-format=\"full\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show only time when time-format is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { timeStyle: 'short' });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" time-format=\"short\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show custom formatting when customFormat is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const options: Intl.DateTimeFormatOptions = {\n      year: '2-digit',\n      month: 'short',\n      weekday: 'short',\n      day: 'numeric',\n      hour: 'numeric'\n    };\n    const expected = new Date(dateString).toLocaleString('en-US', options);\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"Sat Jan 01 2022 00:00:00\" .customFormat=${options}></pf-timestamp>\n    `);\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a custom suffix when display-suffix is passed in', async function() {\n    const dateString = 'Sat Jan 01 2022 00:00:00';\n    const suffix = 'US Eastern';\n    const expected = `${new Date(dateString).toLocaleString('en-US')} ${suffix}`;\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" display-suffix=\"${suffix}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time', async function() {\n    const dateString = 'Sat Jan 01 2022 13:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 24 hour time when hour-12 is set to false', async function() {\n    const dateString = 'Sat Jan 01 2022 13:00:00';\n    const expected = new Date(dateString).toLocaleString('en-US', { hour12: false });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${dateString}\" hour-12=\"false\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show with locale passed in', async function() {\n    const date = new Date(2022, 1, 1).toString();\n    const expected = new Date(date).toLocaleString('en-GB');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-GB\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time by default for US locale', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-US');\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-US\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 24 hour time for US locale when hour-12 is false', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-US', { hour12: false });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-US\" hour-12=\"false\"></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show a 12 hour time for a 24 hour locale when hour-12 is passed', async function() {\n    const date = new Date(2022, 1, 1, 13, 0).toString();\n    const expected = new Date(date).toLocaleString('en-GB', { hour12: true });\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date}\" locale=\"en-GB\" hour-12></pf-timestamp>\n    `);\n\n    expect(element.time).to.equal(expected);\n  });\n\n  it('should show relative time', async function() {\n    const date = new Date(2015, 7, 9, 14, 57, 0);\n    const element = await createFixture<PfTimestamp>(html`\n      <pf-timestamp date=\"${date.toString()}\" relative></pf-timestamp>\n    `);\n\n    expect(element.time).to.match(/\\d+ years ago/);\n  });\n});\n"]}