@patternfly/elements
Version:
PatternFly Elements
1 lines • 5.53 kB
Source Map (JSON)
{"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAGvD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,SAAS,MAAM,CAAC,GAAW;IACzB,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC9E,CAAC;AAGM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QAGL,kDAAkD;QACN,aAAQ,GAAG,KAAK,CAAC;;IAgBpD,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,uBAAA,IAAI,wDAAS;uBACxB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC/B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;;;;;;;YASjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;;IAvCC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACxE,CAAC;;IAGC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAoB,cAAc,CAAC,CAAC;IACvE,IAAI,MAAM,EAAE,IAAI,KAAK,wBAAwB;WACtC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE,CAAC;QACzD,OAAO,EAAE,CAAC;IACZ,CAAC;SAAM,CAAC;QACN,OAAO,MAAM,CAAC,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC,CAAC;IAC3C,CAAC;AACH,CAAC;;IA+BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;AAjDe,kBAAM,GAAoB,CAAC,MAAM,CAAC,AAA5B,CAA6B;;AAGP;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAJlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW","sourcesContent":["import { LitElement, html, 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 styles from './pf-code-block.css';\n\n/**\n * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n * @slot code\n * The slot to put the code in\n * @slot expandable-code\n * The slot to put the code in that should be revealed when the \"Show more\" button is\n * clicked to expand the code-block\n * @slot actions\n * Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} [expanded=false]\n * Indicates if the code-block has been expanded\n * @cssprop {<color>} [--pf-c-code-block--BackgroundColor=#f0f0f0]\n * @cssprop {<length>} [--pf-c-code-block__header--BorderBottomWidth=1px]\n * @cssprop {<color>} [--pf-c-code-block__header--BorderBottomColor=#d2d2d2]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingTop=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingRight=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingBottom=1rem]\n * @cssprop {<length>} [--pf-c-code-block__content--PaddingLeft=1rem]\n * @cssprop {<length>} [--pf-c-code-block__pre--FontSize=0.875rem]\n * @cssprop {<string>} [--pf-c-code-block__pre--FontFamily=\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace]\n */\n\nfunction 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@customElement('pf-code-block')\nexport class PfCodeBlock extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /** Flag for whether the code block is expanded */\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n get #expandedContent(): string {\n return this.querySelector?.('script[data-expand]')?.textContent ?? '';\n }\n\n get #content() {\n const script = this.querySelector?.<HTMLScriptElement>('script[type]');\n if (script?.type !== 'text/javascript-sample'\n && !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n return '';\n } else {\n return dedent(script?.textContent ?? '');\n }\n }\n\n override render(): TemplateResult<1> {\n const { expanded } = this;\n return html`\n <div id=\"header\">\n <div id=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n <div id=\"container\" class=\"${classMap({ expanded })}\">\n <pre><code id=\"content\">${this.#content}</code><code id=\"code-block-expand\"\n ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n <button ?hidden=\"${!this.#expandedContent}\"\n @click=${this.#toggle}\n aria-expanded=${this.expanded}\n aria-controls=\"code-block-expand\">\n <svg fill=\"currentColor\"\n height=\"1em\"\n width=\"1em\"\n viewBox=\"0 0 256 512\"\n aria-hidden=\"true\"\n role=\"img\"><path\n d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"/></svg>\n ${!this.expanded ? 'Show more' : 'Show less'}\n </button>\n </div>\n `;\n }\n\n #toggle() {\n this.expanded = !this.expanded;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-code-block': PfCodeBlock;\n }\n}\n"]}