@patternfly/elements
Version:
PatternFly Elements
1 lines • 14.4 kB
Source Map (JSON)
{"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport styles from './pf-clipboard-copy.css';\nimport formControlStyles from '../form-control.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\nexport class PfClipboardCopyCopiedEvent extends Event {\n constructor(public text: string) {\n super('copy', { bubbles: true });\n }\n}\n\n/**\n * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n * @fires {PfClipboardCopyCopiedEvent} copy - when the text snippet is successfully copied.\n * @cssprop [--pf-c-clipboard-copy__toggle-icon--Transition=.2s ease-in 0s]\n * @cssprop [--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate=90deg]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BackgroundColor=var(--pf-global--BackgroundColor--light-100, #fff)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderTopWidth=0]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderRightWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderLeftWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-clipboard-copy__expandable-content--OutlineOffset=calc(-1 * var(--pf-global--spacer--xs, 0.25rem))]\n * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingTop=0]\n * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingBottom=0]\n * @cssprop [--pf-c-clipboard-copy--m-inline--PaddingLeft=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-clipboard-copy--m-inline--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-clipboard-copy__text--m-code--FontFamily=var(--pf-global--FontFamily--monospace, \"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace)]\n * @cssprop [--pf-c-clipboard-copy__text--m-code--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-clipboard-copy__actions-item--MarginTop=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]\n * @cssprop [--pf-c-clipboard-copy__actions-item--MarginBottom=calc(-1 * var(--pf-global--spacer--form-element, 0.375rem))]\n * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingTop=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingRight=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingBottom=var(--pf-global--spacer--xs, 0.25rem)]\n * @cssprop [--pf-c-clipboard-copy__actions-item--button--PaddingLeft=var(--pf-global--spacer--sm, 0.5rem)]\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends LitElement {\n static readonly styles: CSSStyleSheet[] = [formControlStyles, styles];\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Tooltip message to display when clicking the copy button */\n @property({ attribute: 'click-tip' }) clickTip = 'Successfully copied to clipboard!';\n\n /** Tooltip message to display when hover the copy button */\n @property({ attribute: 'hover-tip' }) hoverTip = 'Copy to clipboard';\n\n /** Accessible label to use on the text input. */\n @property({ attribute: 'accessible-text-label' }) accessibleTextLabel = 'Copyable input';\n\n /** Accessible label to use on the toggle button. */\n @property({ attribute: 'accessible-toggle-label' }) accessibleToggleLabel = 'Show content';\n\n /** Delay in ms before the tooltip appears. */\n @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n /** Delay in ms before the tooltip disappears. */\n @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n /** Flag to determine if inline clipboard copy should be block styling */\n @property({ type: Boolean, reflect: true }) block = false;\n\n /** Flag to determine if clipboard copy content includes code */\n @property({ type: Boolean, reflect: true }) code = false;\n\n /** Flag to determine if clipboard copy is in the expanded state */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /** Implies not `inline`. */\n @property({ type: Boolean, reflect: true }) expandable = false;\n\n /** Flag to show if the input is read only. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Implies not expandable. Overrules `expandable`. */\n @property({ type: Boolean, reflect: true }) inline = false;\n\n /** Flag to determine if inline clipboard copy should have compact styling */\n @property({ type: Boolean, reflect: true }) compact = false;\n\n /** String to copy */\n @property() value = '';\n\n #copied = false;\n\n #mo = new MutationObserver(() => this.#onMutation());\n\n connectedCallback(): void {\n super.connectedCallback();\n this.#mo.observe(this, { characterData: true });\n if (!isServer) {\n this.#onMutation();\n }\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(): TemplateResult<1> {\n const { expanded, expandable, inline, compact, code, block, readonly } = this;\n return html`\n <div id=\"container\" class=\"${classMap({ code, expanded, inline, compact, block })}\">\n <div id=\"input-group\">\n <div id=\"wrapper\">\n <pf-button id=\"expand-button\"\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 </div>\n <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n <input aria-label=\"${this.accessibleTextLabel}\"\n ?hidden=\"${inline || compact}\"\n ?disabled=\"${expanded || readonly}\"\n .value=\"${this.value}\"\n @input=\"${this.#onChange}\">\n <pf-tooltip>\n <pf-button id=\"copy-button\"\n icon=\"copy\"\n ?plain=\"${inline || compact}\"\n variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n label=\"${this.hoverTip}\"\n @click=\"${this.copy}\">\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 /**\n * Copy the current value to the clipboard.\n */\n async copy(): Promise<void> {\n await navigator.clipboard.writeText(this.value);\n this.dispatchEvent(new PfClipboardCopyCopiedEvent(this.value));\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"]}