@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4

package/es/components/code-snippet/code-snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/code-snippet/code-snippet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAKvD,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGtE,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDxD;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IACH,OAAO,CAAC,SAAS,CAAS;IAE1B;;OAEG;IACH,OAAO,CAAC,YAAY,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAmB9B;;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,MAAM;IAoEN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"code-snippet.d.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/directives/class-map.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';\nimport styles from './code-snippet.scss';\n\nexport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };\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 cds-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 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    doc!.body.removeChild(code);\n    selection!.removeAllRanges();\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  render() {\n    const {\n      codeAssistiveText,\n      collapseButtonText,\n      copyButtonAssistiveText,\n      copyButtonFeedbackText,\n      expandButtonText,\n      type,\n      _expanded: expanded,\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        <cds-copy-button\n          feedback=\"${copyButtonFeedbackText}\"\n          @click=\"${handleClickCopyButton}\">\n          ${copyButtonAssistiveText}\n        </cds-copy-button>\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        <cds-copy-button\n          feedback=\"${copyButtonFeedbackText}\"\n          @click=\"${handleClickCopyButton}\">\n          ${copyButtonAssistiveText}\n        </cds-copy-button>\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    <cds-copy-button\n      feedback=\"${copyButtonFeedbackText}\"\n      @click=\"${handleClickCopyButton}\">\n      ${copyButtonAssistiveText}\n    </cds-copy-button>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default BXCodeSnippet;\n"]}
+{"version":3,"sources":["components/code-snippet/code-snippet.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAGtE,OAAO,sBAAsB,CAAC;AAC9B,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBxD;;;;GAIG;AACH,cACM,cAAe,SAAQ,mBAAsB;IACjD;;OAEG;IACH,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,OAAO,CAAC,eAAe,CAAuB;IAE9C;;OAEG;IACH,OAAO,CAAC,kBAAkB,CAAM;IAEhC;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAQ;IAEjC;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAAS;IAEjC;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAS;IAEvC;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,qBAAqB;IAc7B;;OAEG;IACH,OAAO,CAAC,aAAa;IAgCrB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAK5B;;OAEG;IAGH,OAAO,CAAC,eAAe,CAwCpB;IAEH;;;OAGG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,SAAa;IAErB;;OAEG;IAEH,eAAe,SAAQ;IAEvB;;OAEG;IAEH,cAAc,UAAS;IAEvB;;OAEG;IAEH,wBAAwB,SAAM;IAE9B;;OAEG;IAEH,uBAAuB,SAAK;IAE5B;;OAEG;IAEH,wBAAwB,SAAK;IAE7B;;OAEG;IAEH,uBAAuB,SAAM;IAE7B;;;OAGG;IAEH,YAAY,SAAe;IAE3B;;;OAGG;IAEH,YAAY,SAAe;IAE3B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,oBAA4B;IAEhC,iBAAiB;IAWjB,oBAAoB;IAMpB,OAAO;IAQP,MAAM;IAkJN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"code-snippet.d.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 { styleMap } from 'lit/directives/style-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';\nimport styles from './code-snippet.scss';\nimport Handle from '../../globals/internal/handle';\nimport '../copy-button/index';\nimport '../copy/copy';\nimport '../button/button';\n\nexport { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };\n\n/**\n * Observes resize of the given element with the given resize observer.\n *\n * @param observer The resize observer.\n * @param elem The element to observe the resize.\n */\nconst observeResize = (observer: ResizeObserver, elem: Element) => {\n  if (!elem) {\n    return null;\n  }\n  observer.observe(elem);\n  return {\n    release() {\n      observer.unobserve(elem);\n      return null;\n    },\n  } as Handle;\n};\n\n/**\n * Basic code snippet.\n *\n * @element cds-code-snippet\n */\n@customElement(`${prefix}-code-snippet`)\nclass CDSCodeSnippet extends FocusMixin(LitElement) {\n  /**\n   * `true` to expand multi-line variant of code snippet.\n   */\n  private _expandedCode = false;\n\n  /**\n   * The handle for observing resize of the parent element of this element.\n   */\n  private _hObserveResize: Handle | null = null;\n\n  /**\n   * Row height in pixels\n   */\n  private _rowHeightInPixels = 16;\n\n  /**\n   * `true` if code-snippet has right overflow\n   */\n  private _hasRightOverflow = true;\n\n  /**\n   * `true` if code-snippet has left overflow\n   */\n  private _hasLeftOverflow = false;\n\n  /**\n   * `true` if show more or show less btn is visible\n   */\n  private _shouldShowMoreLessBtn = false;\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleCopyClick() {\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    const text = Array.from(this.childNodes).filter(\n      (node) => node.nodeType === Node.TEXT_NODE\n    );\n    pre.textContent = this.copyText || text[0].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    doc!.body.removeChild(code);\n    selection!.removeAllRanges();\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private _getCodeRefDimensions(ref) {\n    const {\n      clientWidth: codeClientWidth,\n      scrollLeft: codeScrollLeft,\n      scrollWidth: codeScrollWidth,\n    } = ref;\n\n    return {\n      horizontalOverflow: codeScrollWidth > codeClientWidth,\n      codeClientWidth,\n      codeScrollWidth,\n      codeScrollLeft,\n    };\n  }\n  /**\n   * Handles `scroll` event.\n   */\n  private _handleScroll() {\n    if (this) {\n      const codeContainerRef = this?.shadowRoot?.querySelector(\n        `.${prefix}--snippet-container`\n      );\n      const codeContentRef = codeContainerRef?.querySelector('pre');\n      if (\n        this.type === CODE_SNIPPET_TYPE.INLINE ||\n        (this.type === CODE_SNIPPET_TYPE.SINGLE && !codeContainerRef) ||\n        (this.type === CODE_SNIPPET_TYPE.MULTI && !codeContentRef)\n      ) {\n        return;\n      }\n\n      const {\n        horizontalOverflow,\n        codeClientWidth,\n        codeScrollWidth,\n        codeScrollLeft,\n      } =\n        this.type === CODE_SNIPPET_TYPE.SINGLE\n          ? this._getCodeRefDimensions(codeContainerRef)\n          : this._getCodeRefDimensions(codeContentRef);\n\n      this._hasLeftOverflow = horizontalOverflow && !!codeScrollLeft;\n      this._hasRightOverflow =\n        horizontalOverflow &&\n        codeScrollLeft + codeClientWidth !== codeScrollWidth;\n      this.requestUpdate();\n    }\n  }\n\n  /**\n   * Handles `click` event on the show more or show less button.\n   */\n  private _handleClickExpanded() {\n    this._expandedCode = !this._expandedCode;\n    this.requestUpdate();\n  }\n\n  /**\n   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.\n   */\n  // TODO: Wait for `.d.ts` update to support `ResizeObserver`\n  // @ts-ignore\n  private _resizeObserver = new ResizeObserver(() => {\n    const codeContainerRef = this.shadowRoot?.querySelector(\n      `.${prefix}--snippet-container`\n    );\n    const codeContentRef = codeContainerRef?.querySelector('code'); // PRE?\n    const {\n      type,\n      maxCollapsedNumberOfRows,\n      maxExpandedNumberOfRows,\n      minExpandedNumberOfRows,\n      _rowHeightInPixels: rowHeightInPixels,\n      _handleScroll: handleScroll,\n    } = this;\n    if (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI) {\n      const { height } = codeContentRef.getBoundingClientRect();\n      if (\n        maxCollapsedNumberOfRows > 0 &&\n        (maxExpandedNumberOfRows <= 0 ||\n          maxExpandedNumberOfRows > maxCollapsedNumberOfRows) &&\n        height > maxCollapsedNumberOfRows * rowHeightInPixels\n      ) {\n        this._shouldShowMoreLessBtn = true;\n      } else {\n        this._shouldShowMoreLessBtn = false;\n      }\n      if (\n        this._expandedCode &&\n        minExpandedNumberOfRows > 0 &&\n        height <= minExpandedNumberOfRows * rowHeightInPixels\n      ) {\n        this._expandedCode = false;\n      }\n    }\n    if (\n      (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI) ||\n      (codeContainerRef && type === CODE_SNIPPET_TYPE.SINGLE)\n    ) {\n      handleScroll();\n    }\n    this.requestUpdate();\n  });\n\n  /**\n   * Optional text to copy. If not specified, the `children` node's `innerText`\n   * will be used as the copy value.\n   */\n  @property({ attribute: 'copy-text' })\n  copyText = '';\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify the string displayed when the snippet is copied\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * Specify the time it takes for the feedback message to timeout\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  /**\n   * Specify whether or not a copy button should be used/rendered.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-copy-button' })\n  hideCopyButton = false;\n\n  /**\n   * Specify the maximum number of rows to be shown when in collapsed view\n   */\n  @property()\n  maxCollapsedNumberOfRows = 15;\n\n  /**\n   * Specify the maximum number of rows to be shown when in expanded view\n   */\n  @property()\n  maxExpandedNumberOfRows = 0;\n\n  /**\n   * Specify the minimum number of rows to be shown when in collapsed view\n   */\n  @property()\n  minCollapsedNumberOfRows = 3;\n\n  /**\n   * Specify the minimum number of rows to be shown when in expanded view\n   */\n  @property()\n  minExpandedNumberOfRows = 16;\n\n  /**\n   * Specify a string that is displayed when the Code Snippet has been\n   * interacted with to show less lines\n   */\n  @property({ attribute: 'show-less-text' })\n  showLessText = 'Show less';\n\n  /**\n   * Specify a string that is displayed when the Code Snippet text is more\n   * than 15 lines\n   */\n  @property({ attribute: 'show-more-text' })\n  showMoreText = 'Show more';\n\n  /**\n   * `true` if the button should be disabled.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'wrap-text' })\n  wrapText = false;\n\n  /**\n   * The type of code snippet.\n   */\n  @property({ reflect: true })\n  type = CODE_SNIPPET_TYPE.SINGLE;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n    super.connectedCallback();\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n    this._hObserveResize = observeResize(this._resizeObserver, this);\n  }\n\n  disconnectedCallback() {\n    if (this._hObserveResize) {\n      this._hObserveResize = this._hObserveResize.release();\n    }\n  }\n\n  updated() {\n    if (this._expandedCode) {\n      this.setAttribute('expanded-code', '');\n    } else {\n      this.removeAttribute('expanded-code');\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      feedback,\n      feedbackTimeout,\n      hideCopyButton,\n      maxExpandedNumberOfRows,\n      minExpandedNumberOfRows,\n      maxCollapsedNumberOfRows,\n      minCollapsedNumberOfRows,\n      type,\n      wrapText,\n      showMoreText,\n      showLessText,\n      _expandedCode: expandedCode,\n      _handleCopyClick: handleCopyClick,\n      _handleScroll: handleScroll,\n      _hasRightOverflow: hasRightOverflow,\n      _hasLeftOverflow: hasLeftOverflow,\n      _rowHeightInPixels: rowHeightInPixels,\n      _shouldShowMoreLessBtn: shouldShowMoreLessBtn,\n    } = this;\n\n    let classes = `${prefix}--snippet`;\n    type ? (classes += ` ${prefix}--snippet--${type}`) : '';\n    type !== 'inline' && disabled\n      ? (classes += ` ${prefix}--snippet--disabled`)\n      : '';\n    hideCopyButton ? (classes += ` ${prefix}--snippet--no-copy`) : '';\n    wrapText ? (classes += ` ${prefix}--snippet--wraptext`) : '';\n    type == 'multi' && hasRightOverflow\n      ? (classes += ` ${prefix}--snippet--has-right-overflow`)\n      : '';\n\n    const expandButtonClass = `${prefix}--snippet-btn--expand`;\n\n    const disabledCopyButtonClasses = disabled\n      ? `${prefix}--snippet--disabled`\n      : '';\n\n    const expandCodeBtnText = expandedCode ? showLessText : showMoreText;\n\n    if (type === CODE_SNIPPET_TYPE.INLINE) {\n      // Ensures no extra whitespace text node\n      // prettier-ignore\n      return html`\n        <cds-copy class-name=\"${classes}\" @click=\"${handleCopyClick}\">\n          <code slot=\"icon\"><slot></slot></code>\n          <span slot=\"tooltip-content\"><slot name=\"button-description\"></slot> </span>\n        </cds-copy>\n      `;\n    }\n\n    const styles = {};\n    if (type === 'multi') {\n      if (expandedCode) {\n        if (maxExpandedNumberOfRows > 0) {\n          styles['max-height'] =\n            maxExpandedNumberOfRows * rowHeightInPixels + 'px';\n        }\n        if (minExpandedNumberOfRows > 0) {\n          styles['min-height'] =\n            minExpandedNumberOfRows * rowHeightInPixels + 'px';\n        }\n      } else {\n        if (maxCollapsedNumberOfRows > 0) {\n          styles['max-height'] =\n            maxCollapsedNumberOfRows * rowHeightInPixels + 'px';\n        }\n        if (minCollapsedNumberOfRows > 0) {\n          styles['min-height'] =\n            minCollapsedNumberOfRows * rowHeightInPixels + 'px';\n        }\n      }\n    }\n\n    return html`\n      <div\n        role=\"${type === CODE_SNIPPET_TYPE.SINGLE ||\n        type === CODE_SNIPPET_TYPE.MULTI\n          ? 'textbox'\n          : null}\"\n        tabindex=\"${(type === CODE_SNIPPET_TYPE.SINGLE ||\n          type === CODE_SNIPPET_TYPE.MULTI) &&\n        !disabled\n          ? 0\n          : null}\"\n        class=\"${prefix}--snippet-container\"\n        aria-label=\"${'code-snippet'}\"\n        aria-readonly=\"${type === CODE_SNIPPET_TYPE.SINGLE ||\n        type === CODE_SNIPPET_TYPE.MULTI\n          ? true\n          : null}\"\n        aria-multiline=\"${type === CODE_SNIPPET_TYPE.MULTI ? true : null}\"\n        @scroll=\"${(type === CODE_SNIPPET_TYPE.SINGLE && handleScroll) || null}\"\n        style=${styleMap(styles)}>\n        <pre\n          @scroll=\"${(type === CODE_SNIPPET_TYPE.MULTI && handleScroll) ||\n          null}\"><code><slot></slot></code></pre>\n      </div>\n\n      ${hasLeftOverflow\n        ? html`\n            <div class=\"${prefix}--snippet__overflow-indicator--left\"></div>\n          `\n        : ``}\n      ${hasRightOverflow && type !== CODE_SNIPPET_TYPE.MULTI\n        ? html`\n            <div class=\"${prefix}--snippet__overflow-indicator--right\"></div>\n          `\n        : ``}\n      ${hideCopyButton\n        ? ``\n        : html`\n            <cds-copy-button\n              ?disabled=${disabled}\n              class-name=${disabledCopyButtonClasses}\n              feedback=${feedback}\n              feedback-timeout=${feedbackTimeout}\n              @click=\"${handleCopyClick}\">\n              <slot name=\"button-description\"></slot>\n            </cds-copy-button>\n          `}\n      ${shouldShowMoreLessBtn\n        ? html`\n            <cds-button\n              kind=\"ghost\"\n              size=\"sm\"\n              class-name=${expandButtonClass}\n              ?disabled=${disabled}\n              @click=${() => this._handleClickExpanded()}>\n              <span class=\"${prefix}--snippet-btn--text\">\n                ${expandCodeBtnText}\n              </span>\n              ${ChevronDown16({\n                class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,\n                name: 'cheveron--down',\n                role: 'img',\n                slot: 'icon',\n              })}\n            </cds-button>\n          `\n        : ``}\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSCodeSnippet;\n"]}