@patternfly/elements 1.0.0

package/pf-clipboard-copy/BaseClipboardCopy.css

@@ -0,0 +1,6 @@
+[hidden],
+[inert],
+[inert]::slotted(*) {
+  display: none !important;
+}
+

package/pf-clipboard-copy/BaseClipboardCopy.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core';
+export declare class ClipboardCopyCopiedEvent extends ComposedEvent {
+    text: string;
+    constructor(text: string);
+}
+/**
+ * Clipboard Copy
+ * @slot - Place element content here
+ */
+export declare abstract class BaseClipboardCopy extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    abstract value: string;
+    /**
+     * Copy the current value to the clipboard.
+     */
+    copy(): Promise<void>;
+}

package/pf-clipboard-copy/BaseClipboardCopy.js

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+import { ComposedEvent } from '@patternfly/pfe-core';
+import { css } from "lit";
+const styles = css `[hidden],\n[inert],\n[inert]::slotted(*) {\n  display: none !important;\n}\n\n`;
+export class ClipboardCopyCopiedEvent extends ComposedEvent {
+    constructor(text) {
+        super('copy');
+        this.text = text;
+    }
+}
+/**
+ * Clipboard Copy
+ * @slot - Place element content here
+ */
+export class BaseClipboardCopy extends LitElement {
+    /**
+     * Copy the current value to the clipboard.
+     */
+    async copy() {
+        await navigator.clipboard.writeText(this.value);
+        this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));
+    }
+}
+BaseClipboardCopy.styles = [styles];
+//# sourceMappingURL=BaseClipboardCopy.js.map

package/pf-clipboard-copy/BaseClipboardCopy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseClipboardCopy.js","sourceRoot":"","sources":["BaseClipboardCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAGrD,MAAM,OAAO,wBAAyB,SAAQ,aAAa;IACzD,YACS,IAAY;QAEnB,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,SAAI,GAAJ,IAAI,CAAQ;IAGrB,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAgB,iBAAkB,SAAQ,UAAU;IAKxD;;OAEG;IACH,KAAK,CAAC,IAAI;QACR,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;;AAVe,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport styles from './BaseClipboardCopy.css';\n\nexport class ClipboardCopyCopiedEvent extends ComposedEvent {\n  constructor(\n    public text: string\n  ) {\n    super('copy');\n  }\n}\n\n/**\n * Clipboard Copy\n * @slot - Place element content here\n */\nexport abstract class BaseClipboardCopy extends LitElement {\n  static readonly styles = [styles];\n\n  abstract value: string;\n\n  /**\n   * Copy the current value to the clipboard.\n   */\n  async copy() {\n    await navigator.clipboard.writeText(this.value);\n    this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));\n  }\n}\n"]}

package/pf-clipboard-copy/demo/demo.css

@@ -0,0 +1,12 @@
+main {
+  padding: 1em;
+}
+
+section {
+  max-width: 832px;
+}
+
+pf-clipboard-copy + pf-clipboard-copy {
+  margin-top: 1rem;
+}
+

package/pf-clipboard-copy/demo/pf-clipboard-copy.js

@@ -0,0 +1 @@
+import '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';

package/pf-clipboard-copy/pf-clipboard-copy.css

@@ -0,0 +1,144 @@
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+#input-group {
+  display: flex;
+}
+
+pf-tooltip::part(invoker) {
+  display: flex;
+  height: 100%;
+}
+
+#input-group > * + * {
+  margin-left: -1px;
+}
+
+input {
+  color: var(--pf-c-form-control--Color,
+    var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));
+  width: var(--pf-c-form-control--Width);
+  padding:
+    var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))
+    var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))
+    var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))
+    var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));
+  font-size: var(--pf-c-form-control--FontSize);
+  line-height: var(--pf-c-form-control--LineHeight);
+  background-color: var(--pf-c-form-control--BackgroundColor);
+  background-repeat: no-repeat;
+  border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;
+  border-color:
+    var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))
+    var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))
+    var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))
+    var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));
+  border-radius: var(--pf-c-form-control--BorderRadius, 0);
+  margin: 0;
+  appearance: none;
+  height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);
+  text-overflow: ellipsis;
+  flex: 1 1 auto;
+}
+
+input[disabled] {
+  background-color: var(--pf-c-form-control--readonly--BackgroundColor,
+    var(--pf-global--disabled-color--300, #f0f0f0));
+}
+
+textarea {
+  display: flex;
+  flex: 1 1 auto;
+  padding:
+    var(--pf-c-clipboard-copy__expandable-content--PaddingTop,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-clipboard-copy__expandable-content--PaddingRight,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,
+      var(--pf-global--spacer--md, 1rem))
+    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,
+      var(--pf-global--spacer--md, 1rem));
+  word-wrap: break-word;
+  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));
+  background-clip: padding-box;
+  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,
+    var(--pf-global--BorderColor--100, #d2d2d2));
+  border-width:
+    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)
+    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,
+      var(--pf-global--BorderWidth--sm, 1px))
+    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,
+      var(--pf-global--BorderWidth--sm, 1px))
+    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,
+      var(--pf-global--BorderWidth--sm, 1px));
+  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+}
+
+.container.code textarea {
+  font-family: var(--pf-global--FontFamily--monospace,
+    var(--pf-global--FontFamily--redhat--monospace,
+      "RedHatMono",
+      "Liberation Mono",
+      consolas,
+      "SFMono-Regular",
+      menlo,
+      monaco,
+      "Courier New",
+      monospace));
+}
+
+.container.expanded #expand-button pf-icon {
+  rotate: 90deg;
+}
+
+.container.inline {
+  display: inline;
+  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,
+    var(--pf-global--BackgroundColor--200, #f0f0f0));
+  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);
+  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);
+  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,
+    var(--pf-global--spacer--xs, 0.25rem));
+  word-break: break-word;
+  white-space: normal;
+}
+
+.container:is(.compact, .inline) #input-group {
+  display: contents;
+}
+
+.container:is(.compact, .inline) pf-tooltip,
+.container:is(.compact, .inline) pf-tooltip::part(invoker) {
+  display: inline-flex;
+}
+
+.container:is(.compact, .inline) #input-group {
+  background-color: var(--pf-c-button--m-plain--BackgroundColor,
+    var(--pf-global--BackgroundColor--200, #f0f0f0));
+}
+
+.container.compact.block {
+  display: block;
+  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,
+    var(--pf-global--BackgroundColor--200, #f0f0f0));
+}
+
+.container:is(.compact, .inline) #copy-button,
+.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {
+  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,
+    var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,
+    var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,
+    var(--pf-global--spacer--xs, 0.25rem));
+  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,
+    var(--pf-global--spacer--sm, 0.5rem));
+  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));
+  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));
+}
+

package/pf-clipboard-copy/pf-clipboard-copy.d.ts

@@ -0,0 +1,47 @@
+import { BaseClipboardCopy } from './BaseClipboardCopy.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
+/**
+ * Clipboard Copy
+ * @slot - Place content to copy here, or use the `value` attribute
+ * @slot actions - Place additional action buttons here
+ */
+export declare class PfClipboardCopy extends BaseClipboardCopy {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    clickTip: string;
+    hoverTip: string;
+    textAriaLabel: string;
+    toggleAriaLabel: string;
+    entryDelay: number;
+    exitDelay: number;
+    block: boolean;
+    code: boolean;
+    expanded: boolean;
+    /**
+     * Implies not `inline`.
+     */
+    expandable: boolean;
+    readonly: boolean;
+    /**
+     * Implies not expandable. Overrules `expandable`.
+     */
+    inline: boolean;
+    compact: boolean;
+    value: string;
+    connectedCallback(): void;
+    /**
+     * @todo fix the collapsed whitespace between the end of the "inline-compact" variant and the text node.
+     * This demonstrates the collapsed whitespace issue.
+     * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    copy(): Promise<void>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-clipboard-copy': PfClipboardCopy;
+    }
+}

package/pf-clipboard-copy/pf-clipboard-copy.js

@@ -0,0 +1,170 @@
+var _PfClipboardCopy_instances, _PfClipboardCopy_copied, _PfClipboardCopy_mo, _PfClipboardCopy_onClick, _PfClipboardCopy_onChange, _PfClipboardCopy_onMutation, _PfClipboardCopy_dedent;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { BaseClipboardCopy } from './BaseClipboardCopy.js';
+import { css } from "lit";
+const styles = css `.container {\n  display: flex;\n  flex-direction: column;\n}\n\n#input-group {\n  display: flex;\n}\n\npf-tooltip::part(invoker) {\n  display: flex;\n  height: 100%;\n}\n\n#input-group > * + * {\n  margin-left: -1px;\n}\n\ninput {\n  color: var(--pf-c-form-control--Color,\n    var(--pf-global--Color--100, var(--pf-global--Color--dark-100, #151515)));\n  width: var(--pf-c-form-control--Width);\n  padding:\n    var(--pf-c-form-control--PaddingTop, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingRight, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)))\n    var(--pf-c-form-control--PaddingBottom, calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px)))\n    var(--pf-c-form-control--PaddingLeft, var(--pf-c-form-control--inset--base, var(--pf-global--spacer--sm, 0.5rem)));\n  font-size: var(--pf-c-form-control--FontSize);\n  line-height: var(--pf-c-form-control--LineHeight);\n  background-color: var(--pf-c-form-control--BackgroundColor);\n  background-repeat: no-repeat;\n  border: var(--pf-c-form-control--BorderWidth, var(--pf-global--BorderWidth--sm, 1px)) solid;\n  border-color:\n    var(--pf-c-form-control--BorderTopColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderRightColor, var(--pf-global--BorderColor--300, #f0f0f0))\n    var(--pf-c-form-control--BorderBottomColor, var(--pf-global--BorderColor--200, #8a8d90))\n    var(--pf-c-form-control--BorderLeftColor, var(--pf-global--BorderColor--300, #f0f0f0));\n  border-radius: var(--pf-c-form-control--BorderRadius, 0);\n  margin: 0;\n  appearance: none;\n  height: var(--pf-c-form-control--Height, calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom)), 36px);\n  text-overflow: ellipsis;\n  flex: 1 1 auto;\n}\n\ninput[disabled] {\n  background-color: var(--pf-c-form-control--readonly--BackgroundColor,\n    var(--pf-global--disabled-color--300, #f0f0f0));\n}\n\ntextarea {\n  display: flex;\n  flex: 1 1 auto;\n  padding:\n    var(--pf-c-clipboard-copy__expandable-content--PaddingTop,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingRight,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingBottom,\n      var(--pf-global--spacer--md, 1rem))\n    var(--pf-c-clipboard-copy__expandable-content--PaddingLeft,\n      var(--pf-global--spacer--md, 1rem));\n  word-wrap: break-word;\n  background-color: var(--pf-c-clipboard-copy__expandable-content--BackgroundColor, var(--pf-global--BackgroundColor--light-100, #fff));\n  background-clip: padding-box;\n  border: solid var(--pf-c-clipboard-copy__expandable-content--BorderColor,\n    var(--pf-global--BorderColor--100, #d2d2d2));\n  border-width:\n    var(--pf-c-clipboard-copy__expandable-content--BorderTopWidth, 0)\n    var(--pf-c-clipboard-copy__expandable-content--BorderRightWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderBottomWidth,\n      var(--pf-global--BorderWidth--sm, 1px))\n    var(--pf-c-clipboard-copy__expandable-content--BorderLeftWidth,\n      var(--pf-global--BorderWidth--sm, 1px));\n  box-shadow: var(--pf-c-clipboard-copy__expandable-content--BoxShadow);\n  margin: 0;\n  color: inherit;\n  font-family: inherit;\n}\n\n.container.code textarea {\n  font-family: var(--pf-global--FontFamily--monospace,\n    var(--pf-global--FontFamily--redhat--monospace,\n      "RedHatMono",\n      "Liberation Mono",\n      consolas,\n      "SFMono-Regular",\n      menlo,\n      monaco,\n      "Courier New",\n      monospace));\n}\n\n.container.expanded #expand-button pf-icon {\n  rotate: 90deg;\n}\n\n.container.inline {\n  display: inline;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n  padding-block-start: var(--pf-c-clipboard-copy--m-inline--PaddingTop, 0px);\n  padding-block-end: var(--pf-c-clipboard-copy--m-inline--PaddingBottom, 0px);\n  padding-inline-start: var(--pf-c-clipboard-copy--m-inline--PaddingLeft,\n    var(--pf-global--spacer--xs, 0.25rem));\n  word-break: break-word;\n  white-space: normal;\n}\n\n.container:is(.compact, .inline) #input-group {\n  display: contents;\n}\n\n.container:is(.compact, .inline) pf-tooltip,\n.container:is(.compact, .inline) pf-tooltip::part(invoker) {\n  display: inline-flex;\n}\n\n.container:is(.compact, .inline) #input-group {\n  background-color: var(--pf-c-button--m-plain--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container.compact.block {\n  display: block;\n  background-color: var(--pf-c-clipboard-copy--m-inline--BackgroundColor,\n    var(--pf-global--BackgroundColor--200, #f0f0f0));\n}\n\n.container:is(.compact, .inline) #copy-button,\n.container:is(.compact, .inline) slot[name="actions"]::slotted(*) {\n  --pf-c-button--PaddingTop: var(--pf-c-clipboard-copy__actions-item--button--PaddingTop,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingRight: var(--pf-c-clipboard-copy__actions-item--button--PaddingRight,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingBottom: var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom,\n    var(--pf-global--spacer--xs, 0.25rem));\n  --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft,\n    var(--pf-global--spacer--sm, 0.5rem));\n  margin-block-start: calc(-1 * var(--pf-c-button--PaddingTop));\n  margin-block-end: calc(-1 * var(--pf-c-button--PaddingBottom));\n}\n\n`;
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
+const sleep = (ms) => new Promise(r => setTimeout(r, ms));
+/**
+ * Clipboard Copy
+ * @slot - Place content to copy here, or use the `value` attribute
+ * @slot actions - Place additional action buttons here
+ */
+let PfClipboardCopy = class PfClipboardCopy extends BaseClipboardCopy {
+    constructor() {
+        super(...arguments);
+        _PfClipboardCopy_instances.add(this);
+        this.clickTip = 'Copied';
+        this.hoverTip = 'Copy';
+        this.textAriaLabel = 'Copyable input';
+        this.toggleAriaLabel = 'Show content';
+        this.entryDelay = 300;
+        this.exitDelay = 1500;
+        this.block = false;
+        this.code = false;
+        this.expanded = false;
+        /**
+         * Implies not `inline`.
+         */
+        this.expandable = false;
+        this.readonly = false;
+        /**
+         * Implies not expandable. Overrules `expandable`.
+         */
+        this.inline = false;
+        this.compact = false;
+        this.value = '';
+        _PfClipboardCopy_copied.set(this, false);
+        _PfClipboardCopy_mo.set(this, new MutationObserver(() => __classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_onMutation).call(this)));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _PfClipboardCopy_mo, "f").observe(this, { characterData: true });
+        __classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_onMutation).call(this);
+    }
+    /**
+     * @todo fix the collapsed whitespace between the end of the "inline-compact" variant and the text node.
+     * This demonstrates the collapsed whitespace issue.
+     * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.
+     */
+    render() {
+        const { expanded, expandable, inline, compact, code, block, readonly } = this;
+        return html `
+      <div class="container ${classMap({ code, expanded, inline, compact, block, })}">
+        <div id="input-group">
+          <pf-button id="expand-button"
+                      plain
+                      variant="control"
+                      label="EXPAND"
+                      ?inert="${!expandable}"
+                      @click="${__classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_onClick)}">
+            <pf-icon icon="chevron-right"></pf-icon>
+          </pf-button>
+          <span ?hidden="${!(inline || compact)}">${this.value}</span>
+          <input
+              ?hidden="${inline || compact}"
+              ?disabled="${expanded || readonly}"
+              .value="${this.value}"
+              @input="${__classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_onChange)}"
+              aria-label="${this.textAriaLabel}">
+          <pf-tooltip>
+            <pf-button id="copy-button"
+                        plain
+                        variant="${ifDefined(!(inline || compact) ? 'control' : undefined)}"
+                        label="${this.hoverTip}"
+                        size="lg"
+                        @click="${this.copy}">
+              <pf-icon icon="copy"></pf-icon>
+            </pf-button>
+            <span slot="content">${__classPrivateFieldGet(this, _PfClipboardCopy_copied, "f") ? this.clickTip : this.hoverTip}</span>
+          </pf-tooltip>
+          <slot name="actions"></slot>
+        </div>
+        <textarea .value="${this.value}"
+                  .disabled="${this.readonly}"
+                  ?hidden="${!(expandable && expanded)}"
+                  @input="${__classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_onChange)}">
+        </textarea>
+      </div>
+    `;
+    }
+    async copy() {
+        await super.copy();
+        await sleep(this.entryDelay);
+        __classPrivateFieldSet(this, _PfClipboardCopy_copied, true, "f");
+        this.requestUpdate();
+        await sleep(this.exitDelay);
+        __classPrivateFieldSet(this, _PfClipboardCopy_copied, false, "f");
+        this.requestUpdate();
+    }
+};
+_PfClipboardCopy_copied = new WeakMap(), _PfClipboardCopy_mo = new WeakMap(), _PfClipboardCopy_instances = new WeakSet(), _PfClipboardCopy_onClick = function _PfClipboardCopy_onClick() {
+    this.expanded = !this.expanded;
+}, _PfClipboardCopy_onChange = function _PfClipboardCopy_onChange(e) {
+    const { value } = e.target || HTMLTextAreaElement;
+    this.value = value;
+}, _PfClipboardCopy_onMutation = function _PfClipboardCopy_onMutation() {
+    if (this.childNodes.length > 0) {
+        this.value = this.getAttribute('value') ?? __classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_dedent).call(this, Array.from(this.childNodes, child => (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')
+            .join(''));
+    }
+}, _PfClipboardCopy_dedent = function _PfClipboardCopy_dedent(str) {
+    const stripped = str.replace(/^\n/, '');
+    const match = stripped.match(/^\s+/);
+    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
+};
+PfClipboardCopy.styles = [...BaseClipboardCopy.styles, styles];
+PfClipboardCopy.shadowRootOptions = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };
+__decorate([
+    property({ attribute: 'click-tip' })
+], PfClipboardCopy.prototype, "clickTip", void 0);
+__decorate([
+    property({ attribute: 'hover-tip' })
+], PfClipboardCopy.prototype, "hoverTip", void 0);
+__decorate([
+    property({ attribute: 'text-label' })
+], PfClipboardCopy.prototype, "textAriaLabel", void 0);
+__decorate([
+    property({ attribute: 'toggle-label' })
+], PfClipboardCopy.prototype, "toggleAriaLabel", void 0);
+__decorate([
+    property({ type: Number, attribute: 'entry-delay' })
+], PfClipboardCopy.prototype, "entryDelay", void 0);
+__decorate([
+    property({ type: Number, attribute: 'exit-delay' })
+], PfClipboardCopy.prototype, "exitDelay", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "block", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "code", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "inline", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfClipboardCopy.prototype, "compact", void 0);
+__decorate([
+    property()
+], PfClipboardCopy.prototype, "value", void 0);
+PfClipboardCopy = __decorate([
+    customElement('pf-clipboard-copy')
+], PfClipboardCopy);
+export { PfClipboardCopy };
+//# sourceMappingURL=pf-clipboard-copy.js.map

package/pf-clipboard-copy/pf-clipboard-copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { BaseClipboardCopy } from './BaseClipboardCopy.js';\n\nimport styles from './pf-clipboard-copy.css';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-tooltip/pf-tooltip.js';\n\nconst sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));\n\n/**\n * Clipboard Copy\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends BaseClipboardCopy {\n  static readonly styles = [...BaseClipboardCopy.styles, styles];\n\n  static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };\n\n  @property({ attribute: 'click-tip' }) clickTip = 'Copied';\n\n  @property({ attribute: 'hover-tip' }) hoverTip = 'Copy';\n\n  @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input';\n\n  @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content';\n\n  @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n  @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n  @property({ type: Boolean, reflect: true }) block = false;\n\n  @property({ type: Boolean, reflect: true }) code = false;\n\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Implies not `inline`.\n   */\n  @property({ type: Boolean, reflect: true }) expandable = false;\n\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /**\n   * Implies not expandable. Overrules `expandable`.\n   */\n  @property({ type: Boolean, reflect: true }) inline = false;\n\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  @property() override value = '';\n\n  #copied = false;\n\n  #mo = new MutationObserver(() => this.#onMutation());\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.#mo.observe(this, { characterData: true });\n    this.#onMutation();\n  }\n\n  /**\n   * @todo fix the collapsed whitespace between the end of the \"inline-compact\" variant and the text node.\n   * This demonstrates the collapsed whitespace issue.\n   * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.\n   */\n  render() {\n    const { expanded, expandable, inline, compact, code, block, readonly } = this;\n    return html`\n      <div class=\"container ${classMap({ code, expanded, inline, compact, block, })}\">\n        <div id=\"input-group\">\n          <pf-button id=\"expand-button\"\n                      plain\n                      variant=\"control\"\n                      label=\"EXPAND\"\n                      ?inert=\"${!expandable}\"\n                      @click=\"${this.#onClick}\">\n            <pf-icon icon=\"chevron-right\"></pf-icon>\n          </pf-button>\n          <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n          <input\n              ?hidden=\"${inline || compact}\"\n              ?disabled=\"${expanded || readonly}\"\n              .value=\"${this.value}\"\n              @input=\"${this.#onChange}\"\n              aria-label=\"${this.textAriaLabel}\">\n          <pf-tooltip>\n            <pf-button id=\"copy-button\"\n                        plain\n                        variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n                        label=\"${this.hoverTip}\"\n                        size=\"lg\"\n                        @click=\"${this.copy}\">\n              <pf-icon icon=\"copy\"></pf-icon>\n            </pf-button>\n            <span slot=\"content\">${this.#copied ? this.clickTip : this.hoverTip}</span>\n          </pf-tooltip>\n          <slot name=\"actions\"></slot>\n        </div>\n        <textarea .value=\"${this.value}\"\n                  .disabled=\"${this.readonly}\"\n                  ?hidden=\"${!(expandable && expanded)}\"\n                  @input=\"${this.#onChange}\">\n        </textarea>\n      </div>\n    `;\n  }\n\n  #onClick() {\n    this.expanded = !this.expanded;\n  }\n\n  #onChange(e: Event) {\n    const { value } = e.target as HTMLInputElement || HTMLTextAreaElement;\n    this.value = value;\n  }\n\n  #onMutation() {\n    if (this.childNodes.length > 0) {\n      this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>\n        (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')\n        .join(''));\n    }\n  }\n\n  #dedent(str: string): string {\n    const stripped = str.replace(/^\\n/, '');\n    const match = stripped.match(/^\\s+/);\n    return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n  }\n\n  override async copy() {\n    await super.copy();\n    await sleep(this.entryDelay);\n    this.#copied = true;\n    this.requestUpdate();\n    await sleep(this.exitDelay);\n    this.#copied = false;\n    this.requestUpdate();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-clipboard-copy': PfClipboardCopy;\n  }\n}\n"]}

package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.d.ts

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

package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.js

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

package/pf-clipboard-copy/test/pf-clipboard-copy.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-clipboard-copy.e2e.js","sourceRoot":"","sources":["pf-clipboard-copy.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,mBAAmB,CAAC;AAEpC,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-clipboard-copy';\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-clipboard-copy/test/pf-clipboard-copy.spec.d.ts

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

package/pf-clipboard-copy/test/pf-clipboard-copy.spec.js

@@ -0,0 +1,100 @@
+import { sendKeys } from '@web/test-runner-commands';
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfClipboardCopy } from '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';
+import { stub } from 'sinon';
+describe('<pf-clipboard-copy>', function () {
+    let element;
+    beforeEach(function stubCopy() {
+        stub(navigator.clipboard, 'writeText');
+    });
+    afterEach(function restoreCopy() {
+        navigator.clipboard.writeText.restore();
+    });
+    beforeEach(async function () {
+        element = await createFixture(html `
+      <pf-clipboard-copy></pf-clipboard-copy>
+    `);
+    });
+    it('should upgrade', async function () {
+        const klass = customElements.get('pf-clipboard-copy');
+        expect(element)
+            .to.be.an.instanceOf(klass)
+            .and
+            .to.be.an.instanceOf(PfClipboardCopy);
+    });
+    describe('setting value attribute', function () {
+        const VALUE = 'another copy item!';
+        beforeEach(async function () {
+            element.setAttribute('value', VALUE);
+            await element.updateComplete;
+        });
+        describe('then calling copy()', function () {
+            beforeEach(async function () {
+                await element.copy();
+            });
+            it('should copy the new value.', function () {
+                expect(navigator.clipboard.writeText).to.have.been.calledWith(VALUE);
+            });
+        });
+    });
+    describe('setting readonly attribute', function () {
+        const VALUE = 'HI';
+        beforeEach(async function () {
+            element.toggleAttribute('readonly', true);
+            await element.updateComplete;
+        });
+        describe('then focusing the element and typing', function () {
+            beforeEach(async function () {
+                element.focus();
+                await sendKeys({ type: VALUE });
+            });
+            describe('then calling copy', function () {
+                beforeEach(async function () {
+                    await element.copy();
+                });
+                it('should not include the new value', async function () {
+                    expect(navigator.clipboard.writeText).to.not.have.been.calledWith(VALUE);
+                });
+            });
+        });
+    });
+    describe('setting expandable value', function () {
+        let initialHeight;
+        let initialFocus;
+        const VALUE = 'Hello!';
+        beforeEach(async function () {
+            element.toggleAttribute('expandable', true);
+            await element.updateComplete;
+            initialHeight = element.getBoundingClientRect().height;
+        });
+        describe('then focusing the element and pressing SPACE', function () {
+            beforeEach(async function () {
+                element.focus();
+                initialFocus = element.shadowRoot.activeElement;
+                await sendKeys({ press: ' ' });
+            });
+            it('it should be expanded', async function () {
+                expect(element.getBoundingClientRect().height).to.be.greaterThan(initialHeight);
+            });
+            describe('then focusing the textarea', function () {
+                beforeEach(async function () {
+                    await sendKeys({ press: 'Tab' });
+                    await sendKeys({ press: 'Tab' });
+                });
+                it('focuses a different element', function () {
+                    expect(element.shadowRoot?.activeElement).to.not.equal(initialFocus);
+                });
+                describe('then typing', function () {
+                    beforeEach(async function () {
+                        await sendKeys({ type: VALUE });
+                    });
+                    it('updates the value property', function () {
+                        expect(element.value).to.equal(VALUE);
+                    });
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=pf-clipboard-copy.spec.js.map

package/pf-clipboard-copy/test/pf-clipboard-copy.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-clipboard-copy.spec.js","sourceRoot":"","sources":["pf-clipboard-copy.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import type { SinonStub } from 'sinon';\n\nimport { sendKeys } from '@web/test-runner-commands';\nimport { expect, html } from '@open-wc/testing';\nimport { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';\nimport { PfClipboardCopy } from '@patternfly/elements/pf-clipboard-copy/pf-clipboard-copy.js';\n\nimport { stub } from 'sinon';\n\ndescribe('<pf-clipboard-copy>', function() {\n  let element: PfClipboardCopy;\n  beforeEach(function stubCopy() {\n    stub(navigator.clipboard, 'writeText');\n  });\n\n  afterEach(function restoreCopy() {\n    (navigator.clipboard.writeText as SinonStub).restore();\n  });\n\n  beforeEach(async function() {\n    element = await createFixture<PfClipboardCopy>(html`\n      <pf-clipboard-copy></pf-clipboard-copy>\n    `);\n  });\n\n  it('should upgrade', async function() {\n    const klass = customElements.get('pf-clipboard-copy');\n    expect(element)\n      .to.be.an.instanceOf(klass)\n      .and\n      .to.be.an.instanceOf(PfClipboardCopy);\n  });\n\n  describe('setting value attribute', function() {\n    const VALUE = 'another copy item!';\n    beforeEach(async function() {\n      element.setAttribute('value', VALUE);\n      await element.updateComplete;\n    });\n    describe('then calling copy()', function() {\n      beforeEach(async function() {\n        await element.copy();\n      });\n      it('should copy the new value.', function() {\n        expect(navigator.clipboard.writeText).to.have.been.calledWith(VALUE);\n      });\n    });\n  });\n\n  describe('setting readonly attribute', function() {\n    const VALUE = 'HI';\n    beforeEach(async function() {\n      element.toggleAttribute('readonly', true);\n      await element.updateComplete;\n    });\n    describe('then focusing the element and typing', function() {\n      beforeEach(async function() {\n        element.focus();\n        await sendKeys({ type: VALUE });\n      });\n      describe('then calling copy', function() {\n        beforeEach(async function() {\n          await element.copy();\n        });\n        it('should not include the new value', async function() {\n          expect(navigator.clipboard.writeText).to.not.have.been.calledWith(VALUE);\n        });\n      });\n    });\n  });\n\n  describe('setting expandable value', function() {\n    let initialHeight: number;\n    let initialFocus: Element;\n    const VALUE = 'Hello!';\n    beforeEach(async function() {\n      element.toggleAttribute('expandable', true);\n      await element.updateComplete;\n      initialHeight = element.getBoundingClientRect().height;\n    });\n    describe('then focusing the element and pressing SPACE', function() {\n      beforeEach(async function() {\n        element.focus();\n        initialFocus = element.shadowRoot!.activeElement!;\n        await sendKeys({ press: ' ' });\n      });\n      it('it should be expanded', async function() {\n        expect(element.getBoundingClientRect().height).to.be.greaterThan(initialHeight);\n      });\n      describe('then focusing the textarea', function() {\n        beforeEach(async function() {\n          await sendKeys({ press: 'Tab' });\n          await sendKeys({ press: 'Tab' });\n        });\n        it('focuses a different element', function() {\n          expect(element.shadowRoot?.activeElement).to.not.equal(initialFocus);\n        });\n        describe('then typing', function() {\n          beforeEach(async function() {\n            await sendKeys({ type: VALUE });\n          });\n          it('updates the value property', function() {\n            expect(element.value).to.equal(VALUE);\n          });\n        });\n      });\n    });\n  });\n});\n"]}

package/pf-code-block/BaseCodeBlock.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+[hidden] {
+  display: none !important;
+}

package/pf-code-block/BaseCodeBlock.d.ts

@@ -0,0 +1,8 @@
+import type { TemplateResult } from 'lit';
+import { LitElement } from 'lit';
+export declare abstract class BaseCodeBlock extends LitElement {
+    static readonly styles: import("lit").CSSResult[];
+    abstract render(): TemplateResult;
+    protected get content(): string;
+    protected dedent(str: string): string;
+}

package/pf-code-block/BaseCodeBlock.js

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { css } from "lit";
+const styles = css `:host {\n  display: block;\n}\n\n[hidden] {\n  display: none !important;\n}\n`;
+export class BaseCodeBlock extends LitElement {
+    get content() {
+        const script = this.querySelector('script[type]');
+        if (script?.type !== 'text/javascript-sample' &&
+            !!script?.type.match(/(j(ava)?|ecma|live)script/)) {
+            return '';
+        }
+        else {
+            return script?.textContent ?? '';
+        }
+    }
+    dedent(str) {
+        const stripped = str.replace(/^\n/, '');
+        const match = stripped.match(/^\s+/);
+        return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
+    }
+}
+BaseCodeBlock.styles = [styles];
+//# sourceMappingURL=BaseCodeBlock.js.map