carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 10.7 kB
Source Map (JSON)
{"version":3,"sources":["components/code-snippet/code-snippet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAQvE,OAAO,EAAE,yBAAyB,IAAI,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAIpG;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,KAAK,UAAU;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDD;;;GAGG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IACH,OAAO,CAAC,uBAAuB,CAAS;IAExC;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAoB9B;;OAEG;IACH,OAAO,CAAC,gCAAgC,CAKtC;IAEF;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAK3B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;OAEG;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAElC;;OAEG;IAEH,iBAAiB,SAAkB;IAEnC;;OAEG;IAEH,kBAAkB,SAAe;IAEjC;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IAEH,uBAAuB,SAAuB;IAE9C;;OAEG;IAEH,sBAAsB,SAAa;IAEnC;;OAEG;IAEH,yBAAyB,SAAQ;IAEjC;;OAEG;IAEH,gBAAgB,SAAe;IAE/B;;OAEG;IAEH,IAAI,oBAA4B;IAEhC,gBAAgB;IAIhB,MAAM;IA4EN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"code-snippet.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { TemplateResult } from 'lit-html';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n _createHandleFeedbackTooltip as createHandleCopyButtonFeedbackTooltip,\n _renderButton as renderCopyButton,\n} from '../copy-button/copy-button';\nimport styles from './code-snippet.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as CODE_SNIPPET_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * Code snippet types.\n */\nexport enum CODE_SNIPPET_TYPE {\n /**\n * Single variant.\n */\n SINGLE = 'single',\n\n /**\n * Inline variant.\n */\n INLINE = 'inline',\n\n /**\n * Multi-line variant.\n */\n MULTI = 'multi',\n}\n\n/**\n * @param values The values to render.\n * @param values.children The child nodes.\n * @param values.handleClick The handler for the `click` event on the button.\n * @returns The template result for the expando.\n */\nconst renderExpando = ({ children, handleClick }: { children: string | TemplateResult; handleClick: EventListener }) => html`\n <button\n type=\"button\"\n class=\"${prefix}--btn ${prefix}--btn--ghost ${prefix}--btn--sm ${prefix}--snippet-btn--expand\"\n @click=\"${handleClick}\"\n >\n <span id=\"button-text\" class=\"${prefix}--snippet-btn--text\">\n ${children}\n </span>\n ${ChevronDown16({\n 'aria-labeledby': 'button-text',\n class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,\n role: 'img',\n })}\n </button>\n`;\n\n/**\n * @param values The values to render.\n * @param values.assistiveText The assistive text to announce that the node is for code snippet.\n * @param [values.expanded] `true` to show the expanded state (for multi-line variant).\n * @param values.children The child nodes.\n * @returns The template result for the code snippet.\n */\nconst renderCode = ({\n assistiveText,\n expanded,\n children,\n}: {\n assistiveText: string;\n expanded?: boolean;\n children: string | TemplateResult;\n}) => {\n const classes = classMap({\n [`${prefix}--snippet-container`]: true,\n [`${prefix}-ce--snippet-container--expanded`]: Boolean(expanded),\n });\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n <div role=\"textbox\" tabindex=\"0\" class=\"${classes}\" aria-label=\"${assistiveText}\"><code><pre>${children}</pre></code></div>\n `;\n};\n\n/**\n * Basic code snippet.\n * @element bx-code-snippet\n */\n@customElement(`${prefix}-code-snippet`)\nclass BXCodeSnippet extends FocusMixin(LitElement) {\n /**\n * `true` to expand multi-line variant of code snippet.\n */\n private _expanded = false;\n\n /**\n * `true` to show the feedback tooltip.\n */\n private _showCopyButtonFeedback = false;\n\n /**\n * `true` to show the expando.\n */\n private _showExpando = false;\n\n /**\n * Handles `click` event on the copy button.\n */\n private _handleClickCopyButton() {\n const { ownerDocument: doc } = this;\n const selection = doc!.defaultView!.getSelection();\n selection!.removeAllRanges();\n const code = doc!.createElement('code');\n code.className = `${prefix}--visually-hidden`;\n const pre = doc!.createElement('pre');\n pre.textContent = this.textContent;\n code.appendChild(pre);\n // Using `<code>` in shadow DOM seems to lose the LFs in some browsers\n doc!.body.appendChild(code);\n const range = doc!.createRange();\n range.selectNodeContents(code);\n selection!.addRange(range);\n doc!.execCommand('copy');\n this._handleCopyButtonFeedbackTooltip(this.copyButtonFeedbackTimeout);\n doc!.body.removeChild(code);\n selection!.removeAllRanges();\n }\n\n /**\n * Handles showing/hiding the feedback tooltip.\n */\n private _handleCopyButtonFeedbackTooltip = createHandleCopyButtonFeedbackTooltip(\n ({ showFeedback = false }: { showFeedback?: boolean }) => {\n this._showCopyButtonFeedback = showFeedback;\n this.requestUpdate();\n }\n );\n\n /**\n * Handles `click` event on the expando.\n */\n private _handleClickExpando() {\n this._expanded = !this._expanded;\n this.requestUpdate();\n }\n\n /**\n * Handles change in slot content to determine if the content\n */\n private _handleSlotChange() {\n const { type, _preNode: preNode } = this;\n if (type === CODE_SNIPPET_TYPE.MULTI) {\n if (preNode.getBoundingClientRect().height > 255) {\n this._showExpando = true;\n this.requestUpdate();\n }\n }\n }\n\n /**\n * The `<pre>` element in the shadow DOM.\n */\n @query('pre')\n private _preNode!: HTMLPreElement;\n\n /**\n * An assistive text for screen reader to advice a DOM node is for code snippet.\n */\n @property({ attribute: 'code-assistive-text' })\n codeAssistiveText = 'code-snippet';\n\n /**\n * The context content for the collapse button.\n */\n @property({ attribute: 'collapse-button-text' })\n collapseButtonText = 'Show less';\n\n /**\n * The color scheme.\n */\n @property({ attribute: 'color-scheme', reflect: true })\n colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;\n\n /**\n * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.\n */\n @property({ attribute: 'copy-button-assistive-text' })\n copyButtonAssistiveText = 'Copy to clipboard';\n\n /**\n * The feedback text for the copy button.\n */\n @property({ attribute: 'copy-button-feedback-text' })\n copyButtonFeedbackText = 'Copied!';\n\n /**\n * The number in milliseconds to determine how long the tooltip for the copy button should remain.\n */\n @property({ type: Number, attribute: 'copy-button-feedback-timeout' })\n copyButtonFeedbackTimeout = 2000;\n\n /**\n * The context content for the expand button.\n */\n @property({ attribute: 'expand-button-text' })\n expandButtonText = 'Show more';\n\n /**\n * The type of code snippet.\n */\n @property({ reflect: true })\n type = CODE_SNIPPET_TYPE.SINGLE;\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n render() {\n const {\n codeAssistiveText,\n collapseButtonText,\n copyButtonAssistiveText,\n copyButtonFeedbackText,\n expandButtonText,\n type,\n _expanded: expanded,\n _showCopyButtonFeedback: showCopyButtonFeedback,\n _showExpando: showExpando,\n _handleClickCopyButton: handleClickCopyButton,\n _handleClickExpando: handleClickExpando,\n _handleSlotChange: handleSlotChange,\n } = this;\n\n if (type === CODE_SNIPPET_TYPE.SINGLE) {\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCode({\n assistiveText: codeAssistiveText,\n expanded,\n children: html`<slot @slotchange=\"${handleSlotChange}\"></slot>`,\n })}\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet-button`,\n })}\n `;\n }\n\n if (type === CODE_SNIPPET_TYPE.MULTI) {\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCode({\n assistiveText: codeAssistiveText,\n expanded,\n children: html`<slot @slotchange=\"${handleSlotChange}\"></slot>`,\n })}\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet-button`,\n })}\n ${!showExpando\n ? undefined\n : renderExpando({\n children: expanded\n ? html`<slot name=\"collapse-button-text\">${collapseButtonText}</slot>`\n : html`<slot name=\"expand-button-text\">${expandButtonText}</slot>`,\n handleClick: handleClickExpando,\n })}\n `;\n }\n\n // Ensures no extra whitespace text node\n // prettier-ignore\n return html`\n ${renderCopyButton({\n assistiveText: copyButtonAssistiveText,\n feedbackText: copyButtonFeedbackText,\n showFeedback: showCopyButtonFeedback,\n handleClickButton: handleClickCopyButton,\n className: `${prefix}--snippet ${prefix}--snippet--inline`,\n children: html`<code aria-label=\"${codeAssistiveText}\"><slot></slot></code>`,\n })}\n `;\n }\n\n static styles = styles;\n}\n\nexport default BXCodeSnippet;\n"]}