@carbon/web-components 1.40.0 → 1.41.0

package/es/components/code-snippet/code-snippet.js

@@ -20,7 +20,7 @@ let _ = t => t,
  */
 
 import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
+import { html, property, query, LitElement, state } from 'lit-element';
 import ChevronDown16 from "../../icons/chevron--down/16";
 import settings from 'carbon-components/es/globals/js/settings';
 import FocusMixin from '../../globals/mixins/focus';
@@ -33,54 +33,6 @@ const {
   prefix
 } = settings;
 
-/**
- * @param values The values to render.
- * @param values.children The child nodes.
- * @param values.handleClick The handler for the `click` event on the button.
- * @returns The template result for the expando.
- */
-const renderExpando = ({
-  children,
-  handleClick
-}) => html(_t || (_t = _`
-  <button
-    type="button"
-    class="${0}--snippet-btn--expand"
-    @click="${0}">
-    <span id="button-text" class="${0}--snippet-btn--text">
-      ${0}
-    </span>
-    ${0}
-  </button>
-`), prefix, handleClick, prefix, children, ChevronDown16({
-  'aria-labeledby': 'button-text',
-  class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
-  role: 'img'
-}));
-
-/**
- * @param values The values to render.
- * @param values.assistiveText The assistive text to announce that the node is for code snippet.
- * @param [values.expanded] `true` to show the expanded state (for multi-line variant).
- * @param values.children The child nodes.
- * @returns The template result for the code snippet.
- */
-const renderCode = ({
-  assistiveText,
-  expanded,
-  children
-}) => {
-  const classes = classMap({
-    [`${prefix}--snippet-container`]: true,
-    [`${prefix}-ce--snippet-container--expanded`]: Boolean(expanded)
-  });
-  // Ensures no extra whitespace text node
-  // prettier-ignore
-  return html(_t2 || (_t2 = _`
-    <div role="textbox" tabindex="0" class="${0}" aria-label="${0}"><code><pre>${0}</pre></code></div>
-  `), classes, assistiveText, children);
-};
-
 /**
  * Basic code snippet.
  *
@@ -97,6 +49,7 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
     F: BXCodeSnippet,
     d: [{
       kind: "field",
+      decorators: [state()],
       key: "_expanded",
       value() {
         return false;
@@ -115,7 +68,7 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
       }
     }, {
       kind: "method",
-      key: "_handleClickCopyButton",
+      key: "_calculateOverflows",
       value:
       /**
        * `true` to expand multi-line variant of code snippet.
@@ -129,10 +82,36 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
        * `true` to show the expando.
        */
 
+      /**
+       * Determine whether the code text overflows the container.
+       */
+      function _calculateOverflows() {
+        const {
+          _codeContainerNode: container,
+          _preNode: preNode
+        } = this;
+        if (container && preNode) {
+          const {
+            clientWidth: containerWidth,
+            scrollLeft
+          } = container;
+          const containerPadding = parseInt(getComputedStyle(container).getPropertyValue('padding-inline-start'));
+          const {
+            clientWidth: codeWidth
+          } = preNode;
+          const hasOverflow = codeWidth > containerWidth;
+          this.hasOverflowLeft = hasOverflow && Boolean(scrollLeft);
+          this.hasOverflowRight = hasOverflow && codeWidth - scrollLeft > containerWidth - containerPadding;
+        }
+      }
+
       /**
        * Handles `click` event on the copy button.
        */
-      function _handleClickCopyButton() {
+    }, {
+      kind: "method",
+      key: "_handleClickCopyButton",
+      value: function _handleClickCopyButton() {
         const {
           ownerDocument: doc
         } = this;
@@ -177,7 +156,6 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
        */
       function _handleClickExpando() {
         this._expanded = !this._expanded;
-        this.requestUpdate();
       }
 
       /**
@@ -197,11 +175,17 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
             this.requestUpdate();
           }
         }
+        this._calculateOverflows();
       }
 
       /**
-       * The `<pre>` element in the shadow DOM.
+       * The `<pre>` element's container in the shadow DOM.
        */
+    }, {
+      kind: "field",
+      decorators: [query(`.${prefix}--snippet-container`)],
+      key: "_codeContainerNode",
+      value: void 0
     }, {
       kind: "field",
       decorators: [query('pre')],
@@ -272,6 +256,20 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
       value() {
         return 'Show more';
       }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "hasOverflowLeft",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [state()],
+      key: "hasOverflowRight",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -285,6 +283,9 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
       kind: "method",
       key: "createRenderRoot",
       value:
+      /**
+       * The `<pre>` element in the shadow DOM.
+       */
       /**
        * An assistive text for screen reader to advice a DOM node is for code snippet.
        */
@@ -306,6 +307,12 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
       /**
        * The context content for the expand button.
        */
+      /**
+       * Whether or not the content is scrollable left.
+       */
+      /**
+       * Whether or not the content is scrollable right.
+       */
       /**
        * The type of code snippet.
        */
@@ -316,35 +323,93 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
           delegatesFocus: Number(((_exec = /Safari\/(\d+)/.exec(navigator.userAgent)) !== null && _exec !== void 0 ? _exec : ['', 0])[1]) <= 537
         });
       }
+
+      /**
+       * Renders the code snippet.
+       */
+    }, {
+      kind: "method",
+      key: "_renderCode",
+      value: function _renderCode() {
+        const {
+          codeAssistiveText,
+          _expanded: expanded,
+          _handleSlotChange: handleSlotChange,
+          hasOverflowLeft,
+          hasOverflowRight
+        } = this;
+        const classes = classMap({
+          [`${prefix}--snippet-container`]: true,
+          [`${prefix}-ce--snippet-container--expanded`]: Boolean(expanded)
+        });
+        // Ensures no extra whitespace text node
+        // prettier-ignore
+        return html(_t || (_t = _`
+      ${0}
+      <div
+        role="textbox"
+        tabindex="0"
+        class="${0}"
+        aria-label="${0}"
+        @scroll="${0}"
+      >
+        <code><pre><slot @slotchange="${0}"></slot></pre></code>
+      </div>
+      ${0}
+    `), hasOverflowLeft ? html(_t2 || (_t2 = _`<span class="${0}--snippet__overflow-indicator--left"></span>`), prefix) : '', classes, codeAssistiveText, this._calculateOverflows, handleSlotChange, hasOverflowRight ? html(_t3 || (_t3 = _`<span class="${0}--snippet__overflow-indicator--right"></span>`), prefix) : '');
+      }
+
+      /**
+       * Renders the expando.
+       */
+    }, {
+      kind: "method",
+      key: "_renderExpando",
+      value: function _renderExpando() {
+        const {
+          collapseButtonText,
+          _expanded: expanded,
+          expandButtonText
+        } = this;
+        return html(_t4 || (_t4 = _`
+      <button
+        type="button"
+        class="${0}--snippet-btn--expand"
+        @click="${0}">
+        <span id="button-text" class="${0}--snippet-btn--text">
+          ${0}
+        </span>
+        ${0}
+      </button>
+    `), prefix, this._handleClickExpando, prefix, expanded ? html(_t5 || (_t5 = _`<slot name="collapse-button-text"
+                >${0}</slot
+              >`), collapseButtonText) : html(_t6 || (_t6 = _`<slot name="expand-button-text">${0}</slot>`), expandButtonText), ChevronDown16({
+          'aria-labeledby': 'button-text',
+          class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
+          role: 'img'
+        }));
+      }
     }, {
       kind: "method",
       key: "render",
       value: function render() {
         const {
           codeAssistiveText,
-          collapseButtonText,
           copyButtonAssistiveText,
           copyButtonFeedbackText,
-          expandButtonText,
           type,
-          _expanded: expanded,
           _showCopyButtonFeedback: showCopyButtonFeedback,
           _showExpando: showExpando,
           _handleClickCopyButton: handleClickCopyButton,
-          _handleClickExpando: handleClickExpando,
           _handleSlotChange: handleSlotChange
         } = this;
         if (type === CODE_SNIPPET_TYPE.SINGLE) {
           // Ensures no extra whitespace text node
           // prettier-ignore
-          return html(_t3 || (_t3 = _`
+          return html(_t7 || (_t7 = _`
         ${0}
         ${0}
-      `), renderCode({
-            assistiveText: codeAssistiveText,
-            expanded,
-            children: html(_t4 || (_t4 = _`<slot @slotchange="${0}"></slot>`), handleSlotChange)
-          }), renderCopyButton({
+      `), this._renderCode(), renderCopyButton({
             assistiveText: copyButtonAssistiveText,
             feedbackText: copyButtonFeedbackText,
             showFeedback: showCopyButtonFeedback,
@@ -355,24 +420,17 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
         if (type === CODE_SNIPPET_TYPE.MULTI) {
           // Ensures no extra whitespace text node
           // prettier-ignore
-          return html(_t5 || (_t5 = _`
+          return html(_t8 || (_t8 = _`
         ${0}
         ${0}
         ${0}
-      `), renderCode({
-            assistiveText: codeAssistiveText,
-            expanded,
-            children: html(_t6 || (_t6 = _`<slot @slotchange="${0}"></slot>`), handleSlotChange)
-          }), renderCopyButton({
+      `), this._renderCode(), renderCopyButton({
             assistiveText: copyButtonAssistiveText,
             feedbackText: copyButtonFeedbackText,
             showFeedback: showCopyButtonFeedback,
             handleClickButton: handleClickCopyButton,
             className: `${prefix}--snippet-button`
-          }), !showExpando ? undefined : renderExpando({
-            children: expanded ? html(_t7 || (_t7 = _`<slot name="collapse-button-text">${0}</slot>`), collapseButtonText) : html(_t8 || (_t8 = _`<slot name="expand-button-text">${0}</slot>`), expandButtonText),
-            handleClick: handleClickExpando
-          }));
+          }), !showExpando ? undefined : this._renderExpando());
         }
 
         // Ensures no extra whitespace text node
@@ -385,7 +443,7 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
           showFeedback: showCopyButtonFeedback,
           handleClickButton: handleClickCopyButton,
           className: `${prefix}--snippet ${prefix}--snippet--inline`,
-          children: html(_t10 || (_t10 = _`<code aria-label="${0}"><slot></slot></code>`), codeAssistiveText)
+          children: html(_t10 || (_t10 = _`<code aria-label="${0}"><slot @slotchange="${0}"></slot></code>`), codeAssistiveText, handleSlotChange)
         }));
       }
     }, {

package/es/components/code-snippet/code-snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.js","names":["classMap","html","property","query","LitElement","ChevronDown16","settings","FocusMixin","_createHandleFeedbackTooltip","createHandleCopyButtonFeedbackTooltip","_renderButton","renderCopyButton","CODE_SNIPPET_COLOR_SCHEME","CODE_SNIPPET_TYPE","styles","carbonElement","customElement","prefix","renderExpando","children","handleClick","_t","_","class","role","renderCode","assistiveText","expanded","classes","Boolean","_t2","BXCodeSnippet","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_handleClickCopyButton","ownerDocument","doc","selection","defaultView","getSelection","removeAllRanges","code","createElement","className","pre","textContent","appendChild","body","range","createRange","selectNodeContents","addRange","execCommand","_handleCopyButtonFeedbackTooltip","copyButtonFeedbackTimeout","removeChild","showFeedback","_showCopyButtonFeedback","requestUpdate","_handleClickExpando","_expanded","_handleSlotChange","type","_preNode","preNode","MULTI","getBoundingClientRect","height","_showExpando","decorators","attribute","reflect","REGULAR","Number","SINGLE","createRenderRoot","_exec","attachShadow","mode","delegatesFocus","exec","navigator","userAgent","render","codeAssistiveText","collapseButtonText","copyButtonAssistiveText","copyButtonFeedbackText","expandButtonText","showCopyButtonFeedback","showExpando","handleClickCopyButton","handleClickExpando","handleSlotChange","_t3","_t4","feedbackText","handleClickButton","_t5","_t6","undefined","_t7","_t8","_t9","_t10","static"],"sources":["components/code-snippet/code-snippet.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\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, LitElement } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n  _createHandleFeedbackTooltip as createHandleCopyButtonFeedbackTooltip,\n  _renderButton as renderCopyButton,\n} from '../copy-button/copy-button';\nimport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';\nimport styles from './code-snippet.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };\n\nconst { prefix } = settings;\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 = ({\n  children,\n  handleClick,\n}: {\n  children: string | TemplateResult;\n  handleClick: EventListener;\n}) => html`\n  <button\n    type=\"button\"\n    class=\"${prefix}--snippet-btn--expand\"\n    @click=\"${handleClick}\">\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 *\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 =\n    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 = CODE_SNIPPET_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({\n      mode: 'open',\n      delegatesFocus:\n        Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=\n        537,\n    });\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"],"mappings":"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"}
+{"version":3,"file":"code-snippet.js","names":["classMap","html","property","query","LitElement","state","ChevronDown16","settings","FocusMixin","_createHandleFeedbackTooltip","createHandleCopyButtonFeedbackTooltip","_renderButton","renderCopyButton","CODE_SNIPPET_COLOR_SCHEME","CODE_SNIPPET_TYPE","styles","carbonElement","customElement","prefix","BXCodeSnippet","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","decorators","key","value","_calculateOverflows","_codeContainerNode","container","_preNode","preNode","clientWidth","containerWidth","scrollLeft","containerPadding","parseInt","getComputedStyle","getPropertyValue","codeWidth","hasOverflow","hasOverflowLeft","Boolean","hasOverflowRight","_handleClickCopyButton","ownerDocument","doc","selection","defaultView","getSelection","removeAllRanges","code","createElement","className","pre","textContent","appendChild","body","range","createRange","selectNodeContents","addRange","execCommand","_handleCopyButtonFeedbackTooltip","copyButtonFeedbackTimeout","removeChild","showFeedback","_showCopyButtonFeedback","requestUpdate","_handleClickExpando","_expanded","_handleSlotChange","type","MULTI","getBoundingClientRect","height","_showExpando","attribute","reflect","REGULAR","Number","SINGLE","createRenderRoot","_exec","attachShadow","mode","delegatesFocus","exec","navigator","userAgent","_renderCode","codeAssistiveText","expanded","handleSlotChange","classes","_t","_","_t2","_t3","_renderExpando","collapseButtonText","expandButtonText","_t4","_t5","_t6","class","role","render","copyButtonAssistiveText","copyButtonFeedbackText","showCopyButtonFeedback","showExpando","handleClickCopyButton","_t7","assistiveText","feedbackText","handleClickButton","_t8","undefined","_t9","children","_t10","static"],"sources":["components/code-snippet/code-snippet.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\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 { html, property, query, LitElement, state } from 'lit-element';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport {\n  _createHandleFeedbackTooltip as createHandleCopyButtonFeedbackTooltip,\n  _renderButton as renderCopyButton,\n} from '../copy-button/copy-button';\nimport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';\nimport styles from './code-snippet.scss';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };\n\nconst { prefix } = settings;\n\n/**\n * Basic code snippet.\n *\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  @state()\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   * Determine whether the code text overflows the container.\n   */\n  protected _calculateOverflows() {\n    const { _codeContainerNode: container, _preNode: preNode } = this;\n    if (container && preNode) {\n      const { clientWidth: containerWidth, scrollLeft } = container;\n      const containerPadding = parseInt(\n        getComputedStyle(container).getPropertyValue('padding-inline-start')\n      );\n      const { clientWidth: codeWidth } = preNode;\n      const hasOverflow = codeWidth > containerWidth;\n      this.hasOverflowLeft = hasOverflow && Boolean(scrollLeft);\n      this.hasOverflowRight =\n        hasOverflow &&\n        codeWidth - scrollLeft > containerWidth - containerPadding;\n    }\n  }\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 =\n    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  }\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    this._calculateOverflows();\n  }\n\n  /**\n   * The `<pre>` element's container in the shadow DOM.\n   */\n  @query(`.${prefix}--snippet-container`)\n  private _codeContainerNode!: HTMLElement;\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 = CODE_SNIPPET_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   * Whether or not the content is scrollable left.\n   */\n  @state()\n  hasOverflowLeft = false;\n\n  /**\n   * Whether or not the content is scrollable right.\n   */\n  @state()\n  hasOverflowRight = false;\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({\n      mode: 'open',\n      delegatesFocus:\n        Number((/Safari\\/(\\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=\n        537,\n    });\n  }\n\n  /**\n   * Renders the code snippet.\n   */\n  protected _renderCode() {\n    const {\n      codeAssistiveText,\n      _expanded: expanded,\n      _handleSlotChange: handleSlotChange,\n      hasOverflowLeft,\n      hasOverflowRight,\n    } = this;\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      ${hasOverflowLeft\n        ? html`<span class=\"${prefix}--snippet__overflow-indicator--left\"></span>`\n        : ''}\n      <div\n        role=\"textbox\"\n        tabindex=\"0\"\n        class=\"${classes}\"\n        aria-label=\"${codeAssistiveText}\"\n        @scroll=\"${this._calculateOverflows}\"\n      >\n        <code><pre><slot @slotchange=\"${handleSlotChange}\"></slot></pre></code>\n      </div>\n      ${hasOverflowRight\n        ? html`<span class=\"${prefix}--snippet__overflow-indicator--right\"></span>`\n        : ''}\n    `;\n  }\n\n  /**\n   * Renders the expando.\n   */\n  protected _renderExpando() {\n    const { collapseButtonText, _expanded: expanded, expandButtonText } = this;\n    return html`\n      <button\n        type=\"button\"\n        class=\"${prefix}--snippet-btn--expand\"\n        @click=\"${this._handleClickExpando}\">\n        <span id=\"button-text\" class=\"${prefix}--snippet-btn--text\">\n          ${expanded\n            ? html`<slot name=\"collapse-button-text\"\n                >${collapseButtonText}</slot\n              >`\n            : html`<slot name=\"expand-button-text\">${expandButtonText}</slot>`}\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  render() {\n    const {\n      codeAssistiveText,\n      copyButtonAssistiveText,\n      copyButtonFeedbackText,\n      type,\n      _showCopyButtonFeedback: showCopyButtonFeedback,\n      _showExpando: showExpando,\n      _handleClickCopyButton: handleClickCopyButton,\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        ${this._renderCode()}\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        ${this._renderCode()}\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          : this._renderExpando()}\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 @slotchange=\"${handleSlotChange}\"></slot></code>`,\n      })}\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXCodeSnippet;\n"],"mappings":"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"}