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

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

@@ -1,15 +1,14 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 let _ = t => t,
   _t,
   _t2,
   _t3,
   _t4,
   _t5,
-  _t6,
-  _t7,
-  _t8,
-  _t9;
+  _t6;
 /**
  * @license
  *
@@ -19,62 +18,36 @@ let _ = t => t,
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { LitElement, html } from 'lit';
-import { property, customElement, query } from 'lit/decorators.js';
+import { property, customElement } from 'lit/decorators.js';
 import ChevronDown16 from "../../icons/chevron--down/16";
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';
 import styles from "././code-snippet.css.js";
+import '../copy-button/index';
+import '../copy/copy';
+import '../button/button';
 export { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };
 
 /**
- * @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.
+ * Observes resize of the given element with the given resize observer.
+ *
+ * @param observer The resize observer.
+ * @param elem The element to observe the resize.
  */
-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);
+const observeResize = (observer, elem) => {
+  if (!elem) {
+    return null;
+  }
+  observer.observe(elem);
+  return {
+    release() {
+      observer.unobserve(elem);
+      return null;
+    }
+  };
 };
 
 /**
@@ -82,43 +55,83 @@ const renderCode = ({
  *
  * @element cds-code-snippet
  */
-let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], function (_initialize, _FocusMixin) {
-  class BXCodeSnippet extends _FocusMixin {
+let CDSCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], function (_initialize, _FocusMixin) {
+  class CDSCodeSnippet extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXCodeSnippet,
+    F: CDSCodeSnippet,
     d: [{
       kind: "field",
-      key: "_expanded",
+      key: "_expandedCode",
       value() {
         return false;
       }
     }, {
       kind: "field",
-      key: "_showExpando",
+      key: "_hObserveResize",
+      value() {
+        return null;
+      }
+    }, {
+      kind: "field",
+      key: "_rowHeightInPixels",
+      value() {
+        return 16;
+      }
+    }, {
+      kind: "field",
+      key: "_hasRightOverflow",
+      value() {
+        return true;
+      }
+    }, {
+      kind: "field",
+      key: "_hasLeftOverflow",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      key: "_shouldShowMoreLessBtn",
       value() {
         return false;
       }
     }, {
       kind: "method",
-      key: "_handleClickCopyButton",
+      key: "_handleCopyClick",
       value:
       /**
        * `true` to expand multi-line variant of code snippet.
        */
 
       /**
-       * `true` to show the expando.
+       * The handle for observing resize of the parent element of this element.
+       */
+
+      /**
+       * Row height in pixels
+       */
+
+      /**
+       * `true` if code-snippet has right overflow
+       */
+
+      /**
+       * `true` if code-snippet has left overflow
+       */
+
+      /**
+       * `true` if show more or show less btn is visible
        */
 
       /**
        * Handles `click` event on the copy button.
        */
-      function _handleClickCopyButton() {
+      function _handleCopyClick() {
         const {
           ownerDocument: doc
         } = this;
@@ -127,7 +140,8 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
         const code = doc.createElement('code');
         code.className = `${prefix}--visually-hidden`;
         const pre = doc.createElement('pre');
-        pre.textContent = this.textContent;
+        const text = Array.from(this.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
+        pre.textContent = this.copyText || text[0].textContent;
         code.appendChild(pre);
         // Using `<code>` in shadow DOM seems to lose the LFs in some browsers
         doc.body.appendChild(code);
@@ -139,108 +153,203 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
         selection.removeAllRanges();
       }
 
+      // eslint-disable-next-line class-methods-use-this
+    }, {
+      kind: "method",
+      key: "_getCodeRefDimensions",
+      value: function _getCodeRefDimensions(ref) {
+        const {
+          clientWidth: codeClientWidth,
+          scrollLeft: codeScrollLeft,
+          scrollWidth: codeScrollWidth
+        } = ref;
+        return {
+          horizontalOverflow: codeScrollWidth > codeClientWidth,
+          codeClientWidth,
+          codeScrollWidth,
+          codeScrollLeft
+        };
+      }
       /**
-       * Handles `click` event on the expando.
+       * Handles `scroll` event.
        */
     }, {
       kind: "method",
-      key: "_handleClickExpando",
-      value: function _handleClickExpando() {
-        this._expanded = !this._expanded;
-        this.requestUpdate();
+      key: "_handleScroll",
+      value: function _handleScroll() {
+        if (this) {
+          var _this$shadowRoot;
+          const codeContainerRef = this === null || this === void 0 ? void 0 : (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector(`.${prefix}--snippet-container`);
+          const codeContentRef = codeContainerRef === null || codeContainerRef === void 0 ? void 0 : codeContainerRef.querySelector('pre');
+          if (this.type === CODE_SNIPPET_TYPE.INLINE || this.type === CODE_SNIPPET_TYPE.SINGLE && !codeContainerRef || this.type === CODE_SNIPPET_TYPE.MULTI && !codeContentRef) {
+            return;
+          }
+          const {
+            horizontalOverflow,
+            codeClientWidth,
+            codeScrollWidth,
+            codeScrollLeft
+          } = this.type === CODE_SNIPPET_TYPE.SINGLE ? this._getCodeRefDimensions(codeContainerRef) : this._getCodeRefDimensions(codeContentRef);
+          this._hasLeftOverflow = horizontalOverflow && !!codeScrollLeft;
+          this._hasRightOverflow = horizontalOverflow && codeScrollLeft + codeClientWidth !== codeScrollWidth;
+          this.requestUpdate();
+        }
       }
 
       /**
-       * Handles change in slot content to determine if the content
+       * Handles `click` event on the show more or show less button.
        */
     }, {
       kind: "method",
-      key: "_handleSlotChange",
-      value: function _handleSlotChange() {
-        const {
-          type,
-          _preNode: preNode
-        } = this;
-        if (type === CODE_SNIPPET_TYPE.MULTI) {
-          if (preNode.getBoundingClientRect().height > 255) {
-            this._showExpando = true;
-            this.requestUpdate();
-          }
-        }
+      key: "_handleClickExpanded",
+      value: function _handleClickExpanded() {
+        this._expandedCode = !this._expandedCode;
+        this.requestUpdate();
       }
 
       /**
-       * The `<pre>` element in the shadow DOM.
+       * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
        */
+      // TODO: Wait for `.d.ts` update to support `ResizeObserver`
+      // @ts-ignore
     }, {
       kind: "field",
-      decorators: [query('pre')],
-      key: "_preNode",
-      value: void 0
+      key: "_resizeObserver",
+      value() {
+        return new ResizeObserver(() => {
+          var _this$shadowRoot2;
+          const codeContainerRef = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.querySelector(`.${prefix}--snippet-container`);
+          const codeContentRef = codeContainerRef === null || codeContainerRef === void 0 ? void 0 : codeContainerRef.querySelector('code'); // PRE?
+          const {
+            type,
+            maxCollapsedNumberOfRows,
+            maxExpandedNumberOfRows,
+            minExpandedNumberOfRows,
+            _rowHeightInPixels: rowHeightInPixels,
+            _handleScroll: handleScroll
+          } = this;
+          if (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI) {
+            const {
+              height
+            } = codeContentRef.getBoundingClientRect();
+            if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
+              this._shouldShowMoreLessBtn = true;
+            } else {
+              this._shouldShowMoreLessBtn = false;
+            }
+            if (this._expandedCode && minExpandedNumberOfRows > 0 && height <= minExpandedNumberOfRows * rowHeightInPixels) {
+              this._expandedCode = false;
+            }
+          }
+          if (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI || codeContainerRef && type === CODE_SNIPPET_TYPE.SINGLE) {
+            handleScroll();
+          }
+          this.requestUpdate();
+        });
+      }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'code-assistive-text'
+        attribute: 'copy-text'
       })],
-      key: "codeAssistiveText",
+      key: "copyText",
       value() {
-        return 'code-snippet';
+        return '';
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'collapse-button-text'
+        type: Boolean,
+        reflect: true
       })],
-      key: "collapseButtonText",
+      key: "disabled",
       value() {
-        return 'Show less';
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "feedback",
+      value() {
+        return 'Copied!';
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'color-scheme',
-        reflect: true
+        type: Number,
+        attribute: 'feedback-timeout'
       })],
-      key: "colorScheme",
+      key: "feedbackTimeout",
       value() {
-        return CODE_SNIPPET_COLOR_SCHEME.REGULAR;
+        return 2000;
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'copy-button-assistive-text'
+        type: Boolean,
+        reflect: true,
+        attribute: 'hide-copy-button'
       })],
-      key: "copyButtonAssistiveText",
+      key: "hideCopyButton",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "maxCollapsedNumberOfRows",
+      value() {
+        return 15;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "maxExpandedNumberOfRows",
       value() {
-        return 'Copy to clipboard';
+        return 0;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "minCollapsedNumberOfRows",
+      value() {
+        return 3;
+      }
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "minExpandedNumberOfRows",
+      value() {
+        return 16;
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'copy-button-feedback-text'
+        attribute: 'show-less-text'
       })],
-      key: "copyButtonFeedbackText",
+      key: "showLessText",
       value() {
-        return 'Copied!';
+        return 'Show less';
       }
     }, {
       kind: "field",
       decorators: [property({
-        type: Number,
-        attribute: 'copy-button-feedback-timeout'
+        attribute: 'show-more-text'
       })],
-      key: "copyButtonFeedbackTimeout",
+      key: "showMoreText",
       value() {
-        return 2000;
+        return 'Show more';
       }
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'expand-button-text'
+        type: Boolean,
+        reflect: true,
+        attribute: 'wrap-text'
       })],
-      key: "expandButtonText",
+      key: "wrapText",
       value() {
-        return 'Show more';
+        return false;
       }
     }, {
       kind: "field",
@@ -253,92 +362,189 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
       }
     }, {
       kind: "method",
-      key: "render",
+      key: "connectedCallback",
       value:
       /**
-       * An assistive text for screen reader to advice a DOM node is for code snippet.
+       * Optional text to copy. If not specified, the `children` node's `innerText`
+       * will be used as the copy value.
        */
       /**
-       * The context content for the collapse button.
+       * `true` if the button should be disabled.
        */
       /**
-       * The color scheme.
+       * Specify the string displayed when the snippet is copied
        */
       /**
-       * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.
+       * Specify the time it takes for the feedback message to timeout
        */
       /**
-       * The feedback text for the copy button.
+       * Specify whether or not a copy button should be used/rendered.
        */
       /**
-       * The number in milliseconds to determine how long the tooltip for the copy button should remain.
+       * Specify the maximum number of rows to be shown when in collapsed view
        */
       /**
-       * The context content for the expand button.
+       * Specify the maximum number of rows to be shown when in expanded view
+       */
+      /**
+       * Specify the minimum number of rows to be shown when in collapsed view
+       */
+      /**
+       * Specify the minimum number of rows to be shown when in expanded view
+       */
+      /**
+       * Specify a string that is displayed when the Code Snippet has been
+       * interacted with to show less lines
+       */
+      /**
+       * Specify a string that is displayed when the Code Snippet text is more
+       * than 15 lines
+       */
+      /**
+       * `true` if the button should be disabled.
        */
       /**
        * The type of code snippet.
        */
-      function render() {
+      function connectedCallback() {
+        if (!this.hasAttribute('role')) {
+          this.setAttribute('role', 'listitem');
+        }
+        _get(_getPrototypeOf(CDSCodeSnippet.prototype), "connectedCallback", this).call(this);
+        if (this._hObserveResize) {
+          this._hObserveResize = this._hObserveResize.release();
+        }
+        this._hObserveResize = observeResize(this._resizeObserver, this);
+      }
+    }, {
+      kind: "method",
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        if (this._hObserveResize) {
+          this._hObserveResize = this._hObserveResize.release();
+        }
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated() {
+        if (this._expandedCode) {
+          this.setAttribute('expanded-code', '');
+        } else {
+          this.removeAttribute('expanded-code');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
         const {
-          codeAssistiveText,
-          collapseButtonText,
-          copyButtonAssistiveText,
-          copyButtonFeedbackText,
-          expandButtonText,
+          disabled,
+          feedback,
+          feedbackTimeout,
+          hideCopyButton,
+          maxExpandedNumberOfRows,
+          minExpandedNumberOfRows,
+          maxCollapsedNumberOfRows,
+          minCollapsedNumberOfRows,
           type,
-          _expanded: expanded,
-          _showExpando: showExpando,
-          _handleClickCopyButton: handleClickCopyButton,
-          _handleClickExpando: handleClickExpando,
-          _handleSlotChange: handleSlotChange
+          wrapText,
+          showMoreText,
+          showLessText,
+          _expandedCode: expandedCode,
+          _handleCopyClick: handleCopyClick,
+          _handleScroll: handleScroll,
+          _hasRightOverflow: hasRightOverflow,
+          _hasLeftOverflow: hasLeftOverflow,
+          _rowHeightInPixels: rowHeightInPixels,
+          _shouldShowMoreLessBtn: shouldShowMoreLessBtn
         } = this;
-        if (type === CODE_SNIPPET_TYPE.SINGLE) {
+        let classes = `${prefix}--snippet`;
+        type ? classes += ` ${prefix}--snippet--${type}` : '';
+        type !== 'inline' && disabled ? classes += ` ${prefix}--snippet--disabled` : '';
+        hideCopyButton ? classes += ` ${prefix}--snippet--no-copy` : '';
+        wrapText ? classes += ` ${prefix}--snippet--wraptext` : '';
+        type == 'multi' && hasRightOverflow ? classes += ` ${prefix}--snippet--has-right-overflow` : '';
+        const expandButtonClass = `${prefix}--snippet-btn--expand`;
+        const disabledCopyButtonClasses = disabled ? `${prefix}--snippet--disabled` : '';
+        const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+        if (type === CODE_SNIPPET_TYPE.INLINE) {
           // Ensures no extra whitespace text node
           // prettier-ignore
-          return html(_t3 || (_t3 = _`
-        ${0}
-        <cds-copy-button
-          feedback="${0}"
-          @click="${0}">
-          ${0}
-        </cds-copy-button>
-      `), renderCode({
-            assistiveText: codeAssistiveText,
-            expanded,
-            children: html(_t4 || (_t4 = _`<slot @slotchange="${0}"></slot>`), handleSlotChange)
-          }), copyButtonFeedbackText, handleClickCopyButton, copyButtonAssistiveText);
+          return html(_t || (_t = _`
+        <cds-copy class-name="${0}" @click="${0}">
+          <code slot="icon"><slot></slot></code>
+          <span slot="tooltip-content"><slot name="button-description"></slot> </span>
+        </cds-copy>
+      `), classes, handleCopyClick);
         }
-        if (type === CODE_SNIPPET_TYPE.MULTI) {
-          // Ensures no extra whitespace text node
-          // prettier-ignore
-          return html(_t5 || (_t5 = _`
-        ${0}
-        <cds-copy-button
-          feedback="${0}"
-          @click="${0}">
-          ${0}
-        </cds-copy-button>
-        ${0}
-      `), renderCode({
-            assistiveText: codeAssistiveText,
-            expanded,
-            children: html(_t6 || (_t6 = _`<slot @slotchange="${0}"></slot>`), handleSlotChange)
-          }), copyButtonFeedbackText, handleClickCopyButton, copyButtonAssistiveText, !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
-          }));
+        const styles = {};
+        if (type === 'multi') {
+          if (expandedCode) {
+            if (maxExpandedNumberOfRows > 0) {
+              styles['max-height'] = maxExpandedNumberOfRows * rowHeightInPixels + 'px';
+            }
+            if (minExpandedNumberOfRows > 0) {
+              styles['min-height'] = minExpandedNumberOfRows * rowHeightInPixels + 'px';
+            }
+          } else {
+            if (maxCollapsedNumberOfRows > 0) {
+              styles['max-height'] = maxCollapsedNumberOfRows * rowHeightInPixels + 'px';
+            }
+            if (minCollapsedNumberOfRows > 0) {
+              styles['min-height'] = minCollapsedNumberOfRows * rowHeightInPixels + 'px';
+            }
+          }
         }
+        return html(_t2 || (_t2 = _`
+      <div
+        role="${0}"
+        tabindex="${0}"
+        class="${0}--snippet-container"
+        aria-label="${0}"
+        aria-readonly="${0}"
+        aria-multiline="${0}"
+        @scroll="${0}"
+        style=${0}>
+        <pre
+          @scroll="${0}"><code><slot></slot></code></pre>
+      </div>
 
-        // Ensures no extra whitespace text node
-        // prettier-ignore
-        return html(_t9 || (_t9 = _`
-    <cds-copy-button
-      feedback="${0}"
-      @click="${0}">
       ${0}
-    </cds-copy-button>
-    `), copyButtonFeedbackText, handleClickCopyButton, copyButtonAssistiveText);
+      ${0}
+      ${0}
+      ${0}
+    `), type === CODE_SNIPPET_TYPE.SINGLE || type === CODE_SNIPPET_TYPE.MULTI ? 'textbox' : null, (type === CODE_SNIPPET_TYPE.SINGLE || type === CODE_SNIPPET_TYPE.MULTI) && !disabled ? 0 : null, prefix, 'code-snippet', type === CODE_SNIPPET_TYPE.SINGLE || type === CODE_SNIPPET_TYPE.MULTI ? true : null, type === CODE_SNIPPET_TYPE.MULTI ? true : null, type === CODE_SNIPPET_TYPE.SINGLE && handleScroll || null, styleMap(styles), type === CODE_SNIPPET_TYPE.MULTI && handleScroll || null, hasLeftOverflow ? html(_t3 || (_t3 = _`
+            <div class="${0}--snippet__overflow-indicator--left"></div>
+          `), prefix) : ``, hasRightOverflow && type !== CODE_SNIPPET_TYPE.MULTI ? html(_t4 || (_t4 = _`
+            <div class="${0}--snippet__overflow-indicator--right"></div>
+          `), prefix) : ``, hideCopyButton ? `` : html(_t5 || (_t5 = _`
+            <cds-copy-button
+              ?disabled=${0}
+              class-name=${0}
+              feedback=${0}
+              feedback-timeout=${0}
+              @click="${0}">
+              <slot name="button-description"></slot>
+            </cds-copy-button>
+          `), disabled, disabledCopyButtonClasses, feedback, feedbackTimeout, handleCopyClick), shouldShowMoreLessBtn ? html(_t6 || (_t6 = _`
+            <cds-button
+              kind="ghost"
+              size="sm"
+              class-name=${0}
+              ?disabled=${0}
+              @click=${0}>
+              <span class="${0}--snippet-btn--text">
+                ${0}
+              </span>
+              ${0}
+            </cds-button>
+          `), expandButtonClass, disabled, () => this._handleClickExpanded(), prefix, expandCodeBtnText, ChevronDown16({
+          class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
+          name: 'cheveron--down',
+          role: 'img',
+          slot: 'icon'
+        })) : ``);
       }
     }, {
       kind: "field",
@@ -359,5 +565,5 @@ let BXCodeSnippet = _decorate([customElement(`${prefix}-code-snippet`)], functio
     }]
   };
 }, FocusMixin(LitElement));
-export default BXCodeSnippet;
+export default CDSCodeSnippet;
 //# sourceMappingURL=code-snippet.js.map