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

package/es/components/copy/copy.js

@@ -0,0 +1,183 @@
+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;
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from "./../copy-button/copy-button.css.js";
+import CDSIconButton from '../icon-button/icon-button';
+
+/**
+ * Copy.
+ *
+ * @element cds-copy
+ */
+let CDSCopy = _decorate([customElement(`${prefix}-copy`)], function (_initialize, _CDSIconButton) {
+  class CDSCopy extends _CDSIconButton {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: CDSCopy,
+    d: [{
+      kind: "field",
+      key: "_showFeedback",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      key: "_animation",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      key: "_createHandleFeedbackTooltip",
+      value() {
+        return () => {
+          let timeoutId;
+          return timeout => {
+            var _this$shadowRoot, _this$shadowRoot$quer;
+            const buttonClasses = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : (_this$shadowRoot$quer = _this$shadowRoot.querySelector('button')) === null || _this$shadowRoot$quer === void 0 ? void 0 : _this$shadowRoot$quer.classList;
+            if (timeoutId) {
+              clearTimeout(timeoutId);
+              timeoutId = undefined;
+            }
+            this._showFeedback = true;
+            buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.add(`${prefix}--copy-btn--animating`);
+            this._animation = 'fade-in';
+            buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.add(`${prefix}--copy-btn--${this._animation}`);
+            this.requestUpdate();
+            timeoutId = setTimeout(() => {
+              this._showFeedback = false;
+              this._animation = 'fade-out';
+              buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.remove(`${prefix}--copy-btn--fade-in`);
+              buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.add(`${prefix}--copy-btn--${this._animation}`);
+              this.requestUpdate();
+            }, timeout);
+          };
+        };
+      }
+    }, {
+      kind: "field",
+      key: "_handleFeedbackTooltip",
+      value() {
+        return this._createHandleFeedbackTooltip();
+      }
+    }, {
+      kind: "method",
+      key: "_handleClickButton",
+      value:
+      /**
+       * `true` to show the feedback tooltip.
+       */
+
+      /**
+       * `true` to show the feedback tooltip.
+       */
+
+      /**
+       * Handles showing/hiding the feedback tooltip.
+       */
+
+      /**
+       * Handles `click` event on the copy button.
+       */
+      function _handleClickButton() {
+        this._handleFeedbackTooltip(this.feedbackTimeout);
+      }
+
+      /**
+       * Specify the string that is displayed when the button is clicked and the content is copi
+       */
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "feedback",
+      value() {
+        return 'Copied!';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number,
+        attribute: 'feedback-timeout'
+      })],
+      key: "feedbackTimeout",
+      value() {
+        return 2000;
+      }
+    }, {
+      kind: "method",
+      key: "_renderTooltipContent",
+      value:
+      /**
+       * The number in milliseconds to determine how long the tooltip should remain.
+       */
+      // eslint-disable-next-line class-methods-use-this
+      function _renderTooltipContent() {
+        return html(_t || (_t = _`
+      <cds-tooltip-content>
+        ${0}
+      </cds-tooltip-content>
+    `), this._showFeedback ? this.feedback : html(_t2 || (_t2 = _`<slot name="tooltip-content"></slot>`)));
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        this.closeOnActivation = false;
+        this.align = 'bottom';
+        this.addEventListener('click', this._handleClickButton);
+        _get(_getPrototypeOf(CDSCopy.prototype), "connectedCallback", this).call(this);
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated() {
+        var _this$shadowRoot2, _this$shadowRoot2$que;
+        (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : (_this$shadowRoot2$que = _this$shadowRoot2.querySelector('button')) === null || _this$shadowRoot2$que === void 0 ? void 0 : _this$shadowRoot2$que.classList.add(`${prefix}--copy-btn`);
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated() {
+        var _this$shadowRoot3, _this$shadowRoot3$que;
+        (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : (_this$shadowRoot3$que = _this$shadowRoot3.querySelector('button')) === null || _this$shadowRoot3$que === void 0 ? void 0 : _this$shadowRoot3$que.addEventListener('animationend', () => {
+          if (this._animation === 'fade-out') {
+            var _this$shadowRoot4, _this$shadowRoot4$que;
+            const buttonClasses = (_this$shadowRoot4 = this.shadowRoot) === null || _this$shadowRoot4 === void 0 ? void 0 : (_this$shadowRoot4$que = _this$shadowRoot4.querySelector('button')) === null || _this$shadowRoot4$que === void 0 ? void 0 : _this$shadowRoot4$que.classList;
+            buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.remove(`${prefix}--copy-btn--animating`);
+            buttonClasses === null || buttonClasses === void 0 ? void 0 : buttonClasses.remove(`${prefix}--copy-btn--${this._animation}`);
+            this._animation = '';
+          }
+        });
+        _get(_getPrototypeOf(CDSCopy.prototype), "updated", this).call(this);
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, CDSIconButton);
+export default CDSCopy;
+//# sourceMappingURL=copy.js.map

package/es/components/copy/copy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy.js","names":["html","property","customElement","prefix","styles","CDSIconButton","CDSCopy","_decorate","_initialize","_CDSIconButton","constructor","args","F","d","kind","key","value","timeoutId","timeout","_this$shadowRoot","_this$shadowRoot$quer","buttonClasses","shadowRoot","querySelector","classList","clearTimeout","undefined","_showFeedback","add","_animation","requestUpdate","setTimeout","remove","_createHandleFeedbackTooltip","_handleClickButton","_handleFeedbackTooltip","feedbackTimeout","decorators","type","Number","attribute","_renderTooltipContent","_t","_","feedback","_t2","connectedCallback","closeOnActivation","align","addEventListener","_get","_getPrototypeOf","prototype","call","firstUpdated","_this$shadowRoot2","_this$shadowRoot2$que","updated","_this$shadowRoot3","_this$shadowRoot3$que","_this$shadowRoot4","_this$shadowRoot4$que","static"],"sources":["components/copy/copy.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 { html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from '../copy-button/copy-button.scss';\nimport CDSIconButton from '../icon-button/icon-button';\n\n/**\n * Copy.\n *\n * @element cds-copy\n */\n@customElement(`${prefix}-copy`)\nclass CDSCopy extends CDSIconButton {\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _showFeedback = false;\n\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _animation = '';\n\n  private _createHandleFeedbackTooltip = () => {\n    let timeoutId: number | void;\n    return (timeout: number) => {\n      const buttonClasses = this.shadowRoot?.querySelector('button')?.classList;\n\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n        timeoutId = undefined;\n      }\n      this._showFeedback = true;\n      buttonClasses?.add(`${prefix}--copy-btn--animating`);\n      this._animation = 'fade-in';\n      buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n      this.requestUpdate();\n      timeoutId = setTimeout(() => {\n        this._showFeedback = false;\n        this._animation = 'fade-out';\n        buttonClasses?.remove(`${prefix}--copy-btn--fade-in`);\n        buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);\n        this.requestUpdate();\n      }, timeout) as unknown as number;\n    };\n  };\n\n  /**\n   * Handles showing/hiding the feedback tooltip.\n   */\n  private _handleFeedbackTooltip = this._createHandleFeedbackTooltip();\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleClickButton() {\n    this._handleFeedbackTooltip(this.feedbackTimeout);\n  }\n\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  // eslint-disable-next-line class-methods-use-this\n  protected _renderTooltipContent() {\n    return html`\n      <cds-tooltip-content>\n        ${this._showFeedback\n          ? this.feedback\n          : html`<slot name=\"tooltip-content\"></slot>`}\n      </cds-tooltip-content>\n    `;\n  }\n\n  connectedCallback() {\n    this.closeOnActivation = false;\n    this.align = 'bottom';\n\n    this.addEventListener('click', this._handleClickButton);\n\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    this.shadowRoot\n      ?.querySelector('button')\n      ?.classList.add(`${prefix}--copy-btn`);\n  }\n\n  updated() {\n    this.shadowRoot\n      ?.querySelector('button')\n      ?.addEventListener('animationend', () => {\n        if (this._animation === 'fade-out') {\n          const buttonClasses =\n            this.shadowRoot?.querySelector('button')?.classList;\n          buttonClasses?.remove(`${prefix}--copy-btn--animating`);\n          buttonClasses?.remove(`${prefix}--copy-btn--${this._animation}`);\n          this._animation = '';\n        }\n      });\n\n    super.updated();\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopy;\n"],"mappings":"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"}

package/es/components/copy-button/copy-button.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--copy-btn{position:relative;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;padding:0;border:none;background-color:var(--cds-layer);cursor:pointer}.cds--copy-btn html{font-size:100%}.cds--copy-btn body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--copy-btn code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--copy-btn strong{font-weight:600}.cds--copy-btn:hover{background-color:var(--cds-layer-hover)}.cds--copy-btn:active{background-color:var(--cds-layer-active)}.cds--copy-btn::before{position:absolute;z-index:6000;width:0;height:0;border-style:solid;content:\"\";display:none}.cds--copy-btn .cds--copy-btn__feedback{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:left;transform:translateX(-50%);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:none;overflow:visible;box-sizing:content-box;margin:auto;clip:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-accelerator:true){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-ime-align:auto){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--copy-btn .cds--copy-btn__feedback{border:1px solid transparent}}.cds--copy-btn:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;outline-color:var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--copy-btn:focus{outline-style:dotted}}.cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating::before{display:block}.cds--copy-btn.cds--copy-btn--animating::before{border:none}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}.cds--copy{font-size:0}:host(cds-copy-button){display:inline-flex;outline:0}",
+  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--copy-btn{position:relative;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;padding:0;border:none;background-color:var(--cds-layer);cursor:pointer}.cds--copy-btn html{font-size:100%}.cds--copy-btn body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--copy-btn code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--copy-btn strong{font-weight:600}.cds--copy-btn:hover{background-color:var(--cds-layer-hover)}.cds--copy-btn:active{background-color:var(--cds-layer-active)}.cds--copy-btn::before{position:absolute;z-index:6000;width:0;height:0;border-style:solid;content:\"\";display:none}.cds--copy-btn .cds--copy-btn__feedback{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:left;transform:translateX(-50%);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:none;overflow:visible;box-sizing:content-box;margin:auto;clip:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-accelerator:true){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-ime-align:auto){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--copy-btn .cds--copy-btn__feedback{border:1px solid transparent}}.cds--copy-btn:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;outline-color:var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--copy-btn:focus{outline-style:dotted}}.cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating::before{display:block}.cds--copy-btn.cds--copy-btn--animating::before{border:none}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}.cds--copy{font-size:0}:host(cds-copy-button){display:inline-flex;outline:0}.cds--snippet__icon{width:1rem;height:1rem;fill:var(--cds-icon-primary,#161616);transition:all 70ms cubic-bezier(.2,0,.38,.9)}.cds--copy-btn--animating.cds--copy-btn--fade-out{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn--animating.cds--copy-btn--fade-in{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}",
 ]);

package/es/components/copy-button/copy-button.d.ts

@@ -6,33 +6,9 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { LitElement, TemplateResult } from 'lit';
-/**
- * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.
- *
- * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.
- * @returns A function that shows the feedback tooltip for the given duration.
- * @private
- */
-export declare const _createHandleFeedbackTooltip: (update: (properties: {
-    showFeedback?: boolean;
-}) => void) => (timeout: number) => void;
-/**
- * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.
- *
- * @param properties The properties to render.
- * @returns The template result for copy button from the given properties.
- * @private
- */
-export declare const _renderButton: ({ assistiveText, feedbackText, showFeedback, className, children, handleClickButton, }: {
-    assistiveText: string;
-    feedbackText: string;
-    showFeedback?: boolean | undefined;
-    className?: string | undefined;
-    children?: TemplateResult<1 | 2> | undefined;
-    handleClickButton: EventListener;
-}) => TemplateResult<1>;
-declare const BXCopyButton_base: {
+import { LitElement } from 'lit';
+import '../copy/copy';
+declare const CDSCopyButton_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -343,39 +319,18 @@ declare const BXCopyButton_base: {
  *
  * @element cds-copy-button
  */
-declare class BXCopyButton extends BXCopyButton_base {
-    /**
-     * Handles showing/hiding the feedback tooltip.
-     */
-    private _handleFeedbackTooltip;
+declare class CDSCopyButton extends CDSCopyButton_base {
     /**
-     * `true` to show the feedback tooltip.
+     * Specify the string that is displayed when the button is clicked and the content is copi
      */
-    private _showFeedback;
-    /**
-     * Handles `click` event on the copy button.
-     */
-    private _handleClickButton;
-    /**
-     * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.
-     */
-    buttonAssistiveText: string;
-    /**
-     * The feedback text.
-     */
-    feedbackText: string;
+    feedback: string;
     /**
      * The number in milliseconds to determine how long the tooltip should remain.
      */
     feedbackTimeout: number;
-    render(): TemplateResult<1>;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        slotAssignment?: SlotAssignmentMode | undefined;
-    };
+    render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }
-export default BXCopyButton;
+export default CDSCopyButton;
 
 //# sourceMappingURL=copy-button.d.ts.map

package/es/components/copy-button/copy-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/copy-button/copy-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAIH,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAOvD;;;;;;GAMG;AACH,eAAO,MAAM,4BAA4B,wBAClB;IAAE,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,KAAK,IAAI,eAGvC,MAAM,SAUxB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa;mBAUT,MAAM;kBACP,MAAM;;;;uBAID,aAAa;uBAmBjC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEF;;;;GAIG;AACH,cACM,YAAa,SAAQ,iBAAsB;IAC/C;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAK5B;IAEF;;OAEG;IACH,OAAO,CAAC,aAAa,CAAS;IAE9B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IAEH,mBAAmB,SAAuB;IAE1C;;OAEG;IAEH,YAAY,SAAa;IAEzB;;OAEG;IAEH,eAAe,SAAQ;IAEvB,MAAM;IAeN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"copy-button.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Copy16 from '@carbon/icons/lib/copy/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss';\n\n/**\n * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.\n *\n * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.\n * @returns A function that shows the feedback tooltip for the given duration.\n * @private\n */\nexport const _createHandleFeedbackTooltip = (\n  update: (properties: { showFeedback?: boolean }) => void\n) => {\n  let timeoutId: number | void;\n  return (timeout: number) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n      timeoutId = undefined;\n    }\n    update({ showFeedback: true });\n    timeoutId = setTimeout(() => {\n      update({ showFeedback: false });\n    }, timeout) as unknown as number;\n  };\n};\n\n/**\n * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.\n *\n * @param properties The properties to render.\n * @returns The template result for copy button from the given properties.\n * @private\n */\nexport const _renderButton = ({\n  assistiveText,\n  feedbackText,\n  showFeedback = false,\n  className = `${prefix}--copy-btn`,\n  children = html`\n    <slot>${Copy16({ class: `${prefix}--snippet__icon` })}</slot>\n  `,\n  handleClickButton,\n}: {\n  assistiveText: string;\n  feedbackText: string;\n  showFeedback?: boolean;\n  className?: string;\n  children?: TemplateResult;\n  handleClickButton: EventListener;\n}) => {\n  const feedbackClasses = classMap({\n    [`${prefix}--btn--copy__feedback`]: true,\n    [`${prefix}--assistive-text`]: true,\n    [`${prefix}--copy-btn--animating`]: showFeedback,\n  });\n  return html`\n    <button\n      type=\"button\"\n      class=\"${className}\"\n      title=\"${ifDefined(assistiveText)}\"\n      @click=\"${handleClickButton}\">\n      ${children}\n      <div\n        class=\"${feedbackClasses}\"\n        data-feedback=\"${ifDefined(feedbackText)}\"></div>\n    </button>\n  `;\n};\n\n/**\n * Copy button.\n *\n * @element cds-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass BXCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Handles showing/hiding the feedback tooltip.\n   */\n  private _handleFeedbackTooltip = _createHandleFeedbackTooltip(\n    ({ showFeedback = false }: { showFeedback?: boolean }) => {\n      this._showFeedback = showFeedback;\n      this.requestUpdate();\n    }\n  );\n\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _showFeedback = false;\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleClickButton() {\n    this._handleFeedbackTooltip(this.feedbackTimeout);\n  }\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: 'button-assistive-text' })\n  buttonAssistiveText = 'Copy to clipboard';\n\n  /**\n   * The feedback text.\n   */\n  @property({ attribute: 'feedback-text' })\n  feedbackText = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const {\n      buttonAssistiveText,\n      feedbackText,\n      _handleClickButton: handleClickButton,\n      _showFeedback: showFeedback,\n    } = this;\n    return _renderButton({\n      assistiveText: buttonAssistiveText,\n      feedbackText,\n      showFeedback,\n      handleClickButton,\n    });\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default BXCopyButton;\n"]}
+{"version":3,"sources":["components/copy-button/copy-button.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,OAAO,cAAc,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtB;;;;GAIG;AACH,cACM,aAAc,SAAQ,kBAAsB;IAChD;;OAEG;IAEH,QAAQ,SAAa;IAErB;;OAEG;IAEH,eAAe,SAAQ;IAEvB,MAAM;IAUN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"copy-button.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Copy16 from '@carbon/icons/lib/copy/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss';\nimport '../copy/copy';\n\n/**\n * Copy button.\n *\n * @element cds-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass CDSCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const { feedback, feedbackTimeout } = this;\n    return html`\n      <cds-copy feedback=${feedback} feedback-timeout=${feedbackTimeout}>\n        ${Copy16({ slot: 'icon', class: `${prefix}--snippet__icon` })}\n        <span slot=\"tooltip-content\"><slot></slot></span>\n      </cds-copy>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopyButton;\n"]}

package/es/components/copy-button/copy-button.js

@@ -1,8 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _decorate from "@babel/runtime/helpers/esm/decorate";
 let _ = t => t,
-  _t,
-  _t2;
+  _t;
 /**
  * @license
  *
@@ -12,152 +10,32 @@ let _ = t => t,
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import Copy16 from "../../icons/copy/16";
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from "././copy-button.css.js";
-
-/**
- * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.
- *
- * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.
- * @returns A function that shows the feedback tooltip for the given duration.
- * @private
- */ /**
-     * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.
-     *
-     * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.
-     * @returns A function that shows the feedback tooltip for the given duration.
-     * @private
-     */
-export const _createHandleFeedbackTooltip = update => {
-  let timeoutId;
-  return timeout => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = undefined;
-    }
-    update({
-      showFeedback: true
-    });
-    timeoutId = setTimeout(() => {
-      update({
-        showFeedback: false
-      });
-    }, timeout);
-  };
-};
-
-/**
- * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.
- *
- * @param properties The properties to render.
- * @returns The template result for copy button from the given properties.
- * @private
- */
-export const _renderButton = ({
-  assistiveText,
-  feedbackText,
-  showFeedback: _showFeedback = false,
-  className: _className = `${prefix}--copy-btn`,
-  children: _children = html(_t || (_t = _`
-    <slot>${0}</slot>
-  `), Copy16({
-    class: `${prefix}--snippet__icon`
-  })),
-  handleClickButton
-}) => {
-  const feedbackClasses = classMap({
-    [`${prefix}--btn--copy__feedback`]: true,
-    [`${prefix}--assistive-text`]: true,
-    [`${prefix}--copy-btn--animating`]: _showFeedback
-  });
-  return html(_t2 || (_t2 = _`
-    <button
-      type="button"
-      class="${0}"
-      title="${0}"
-      @click="${0}">
-      ${0}
-      <div
-        class="${0}"
-        data-feedback="${0}"></div>
-    </button>
-  `), _className, ifDefined(assistiveText), handleClickButton, _children, feedbackClasses, ifDefined(feedbackText));
-};
+import '../copy/copy';
 
 /**
  * Copy button.
  *
  * @element cds-copy-button
  */
-let BXCopyButton = _decorate([customElement(`${prefix}-copy-button`)], function (_initialize, _FocusMixin) {
-  class BXCopyButton extends _FocusMixin {
+let CDSCopyButton = _decorate([customElement(`${prefix}-copy-button`)], function (_initialize, _FocusMixin) {
+  class CDSCopyButton extends _FocusMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXCopyButton,
+    F: CDSCopyButton,
     d: [{
       kind: "field",
-      key: "_handleFeedbackTooltip",
-      value() {
-        return _createHandleFeedbackTooltip(({
-          showFeedback: _showFeedback2 = false
-        }) => {
-          this._showFeedback = _showFeedback2;
-          this.requestUpdate();
-        });
-      }
-    }, {
-      kind: "field",
-      key: "_showFeedback",
-      value() {
-        return false;
-      }
-    }, {
-      kind: "method",
-      key: "_handleClickButton",
-      value:
-      /**
-       * Handles showing/hiding the feedback tooltip.
-       */
-
-      /**
-       * `true` to show the feedback tooltip.
-       */
-
-      /**
-       * Handles `click` event on the copy button.
-       */
-      function _handleClickButton() {
-        this._handleFeedbackTooltip(this.feedbackTimeout);
-      }
-
-      /**
-       * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.
-       */
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'button-assistive-text'
-      })],
-      key: "buttonAssistiveText",
-      value() {
-        return 'Copy to clipboard';
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'feedback-text'
-      })],
-      key: "feedbackText",
+      decorators: [property()],
+      key: "feedback",
       value() {
         return 'Copied!';
       }
@@ -176,33 +54,27 @@ let BXCopyButton = _decorate([customElement(`${prefix}-copy-button`)], function
       key: "render",
       value:
       /**
-       * The feedback text.
+       * Specify the string that is displayed when the button is clicked and the content is copi
        */
+
       /**
        * The number in milliseconds to determine how long the tooltip should remain.
        */
+
       function render() {
         const {
-          buttonAssistiveText,
-          feedbackText,
-          _handleClickButton: handleClickButton,
-          _showFeedback: showFeedback
+          feedback,
+          feedbackTimeout
         } = this;
-        return _renderButton({
-          assistiveText: buttonAssistiveText,
-          feedbackText,
-          showFeedback,
-          handleClickButton
-        });
-      }
-    }, {
-      kind: "field",
-      static: true,
-      key: "shadowRootOptions",
-      value() {
-        return _objectSpread(_objectSpread({}, LitElement.shadowRootOptions), {}, {
-          delegatesFocus: true
-        });
+        return html(_t || (_t = _`
+      <cds-copy feedback=${0} feedback-timeout=${0}>
+        ${0}
+        <span slot="tooltip-content"><slot></slot></span>
+      </cds-copy>
+    `), feedback, feedbackTimeout, Copy16({
+          slot: 'icon',
+          class: `${prefix}--snippet__icon`
+        }));
       }
     }, {
       kind: "field",
@@ -214,5 +86,5 @@ let BXCopyButton = _decorate([customElement(`${prefix}-copy-button`)], function
     }]
   };
 }, FocusMixin(LitElement));
-export default BXCopyButton;
+export default CDSCopyButton;
 //# sourceMappingURL=copy-button.js.map

package/es/components/copy-button/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","names":["classMap","ifDefined","LitElement","html","property","customElement","Copy16","prefix","FocusMixin","styles","_createHandleFeedbackTooltip","update","timeoutId","timeout","clearTimeout","undefined","showFeedback","setTimeout","_renderButton","assistiveText","feedbackText","className","children","_t","_","class","handleClickButton","feedbackClasses","_t2","BXCopyButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","key","value","_showFeedback","requestUpdate","_handleClickButton","_handleFeedbackTooltip","feedbackTimeout","decorators","attribute","type","Number","render","buttonAssistiveText","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/copy-button/copy-button.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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Copy16 from '@carbon/icons/lib/copy/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss';\n\n/**\n * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.\n *\n * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.\n * @returns A function that shows the feedback tooltip for the given duration.\n * @private\n */\nexport const _createHandleFeedbackTooltip = (\n  update: (properties: { showFeedback?: boolean }) => void\n) => {\n  let timeoutId: number | void;\n  return (timeout: number) => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n      timeoutId = undefined;\n    }\n    update({ showFeedback: true });\n    timeoutId = setTimeout(() => {\n      update({ showFeedback: false });\n    }, timeout) as unknown as number;\n  };\n};\n\n/**\n * Note: For `<cds-code-snippet>` only. The API is subject to change/removal.\n *\n * @param properties The properties to render.\n * @returns The template result for copy button from the given properties.\n * @private\n */\nexport const _renderButton = ({\n  assistiveText,\n  feedbackText,\n  showFeedback = false,\n  className = `${prefix}--copy-btn`,\n  children = html`\n    <slot>${Copy16({ class: `${prefix}--snippet__icon` })}</slot>\n  `,\n  handleClickButton,\n}: {\n  assistiveText: string;\n  feedbackText: string;\n  showFeedback?: boolean;\n  className?: string;\n  children?: TemplateResult;\n  handleClickButton: EventListener;\n}) => {\n  const feedbackClasses = classMap({\n    [`${prefix}--btn--copy__feedback`]: true,\n    [`${prefix}--assistive-text`]: true,\n    [`${prefix}--copy-btn--animating`]: showFeedback,\n  });\n  return html`\n    <button\n      type=\"button\"\n      class=\"${className}\"\n      title=\"${ifDefined(assistiveText)}\"\n      @click=\"${handleClickButton}\">\n      ${children}\n      <div\n        class=\"${feedbackClasses}\"\n        data-feedback=\"${ifDefined(feedbackText)}\"></div>\n    </button>\n  `;\n};\n\n/**\n * Copy button.\n *\n * @element cds-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass BXCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Handles showing/hiding the feedback tooltip.\n   */\n  private _handleFeedbackTooltip = _createHandleFeedbackTooltip(\n    ({ showFeedback = false }: { showFeedback?: boolean }) => {\n      this._showFeedback = showFeedback;\n      this.requestUpdate();\n    }\n  );\n\n  /**\n   * `true` to show the feedback tooltip.\n   */\n  private _showFeedback = false;\n\n  /**\n   * Handles `click` event on the copy button.\n   */\n  private _handleClickButton() {\n    this._handleFeedbackTooltip(this.feedbackTimeout);\n  }\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: 'button-assistive-text' })\n  buttonAssistiveText = 'Copy to clipboard';\n\n  /**\n   * The feedback text.\n   */\n  @property({ attribute: 'feedback-text' })\n  feedbackText = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const {\n      buttonAssistiveText,\n      feedbackText,\n      _handleClickButton: handleClickButton,\n      _showFeedback: showFeedback,\n    } = this;\n    return _renderButton({\n      assistiveText: buttonAssistiveText,\n      feedbackText,\n      showFeedback,\n      handleClickButton,\n    });\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default BXCopyButton;\n"],"mappings":"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"}
+{"version":3,"file":"copy-button.js","names":["LitElement","html","property","customElement","Copy16","prefix","FocusMixin","styles","CDSCopyButton","_decorate","_initialize","_FocusMixin","constructor","args","F","d","kind","decorators","key","value","type","Number","attribute","render","feedback","feedbackTimeout","_t","_","slot","class","static"],"sources":["components/copy-button/copy-button.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 { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport Copy16 from '@carbon/icons/lib/copy/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './copy-button.scss';\nimport '../copy/copy';\n\n/**\n * Copy button.\n *\n * @element cds-copy-button\n */\n@customElement(`${prefix}-copy-button`)\nclass CDSCopyButton extends FocusMixin(LitElement) {\n  /**\n   * Specify the string that is displayed when the button is clicked and the content is copi\n   */\n  @property()\n  feedback = 'Copied!';\n\n  /**\n   * The number in milliseconds to determine how long the tooltip should remain.\n   */\n  @property({ type: Number, attribute: 'feedback-timeout' })\n  feedbackTimeout = 2000;\n\n  render() {\n    const { feedback, feedbackTimeout } = this;\n    return html`\n      <cds-copy feedback=${feedback} feedback-timeout=${feedbackTimeout}>\n        ${Copy16({ slot: 'icon', class: `${prefix}--snippet__icon` })}\n        <span slot=\"tooltip-content\"><slot></slot></span>\n      </cds-copy>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSCopyButton;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,OAAOC,MAAM,MAAM,qBAA2B;AAC9C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,UAAU,MAAM,4BAA4B;AACnD,OAAOC,MAAM,MAAM,wBAAoB;AACvC,OAAO,cAAc;;AAErB;AACA;AACA;AACA;AACA;AAJA,IAMMC,aAAa,GAAAC,SAAA,EADlBN,aAAa,CAAE,GAAEE,MAAO,cAAa,CAAC,aAAAK,WAAA,EAAAC,WAAA;EAAvC,MACMH,aAAa,SAAAG,WAAA,CAAgC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAwBnD;EAAC;IAAAI,CAAA,EAxBKN,aAAa;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIhBf,QAAQ,EAAE;MAAAgB,GAAA;MAAAC,MAAA;QAAA,OACA,SAAS;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKnBf,QAAQ,CAAC;QAAEkB,IAAI,EAAEC,MAAM;QAAEC,SAAS,EAAE;MAAmB,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACxC,IAAI;MAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAVtB;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAI,OAAA,EAAS;QACP,MAAM;UAAEC,QAAQ;UAAEC;QAAgB,CAAC,GAAG,IAAI;QAC1C,OAAOxB,IAAI,CAAAyB,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB,2BAAyB,CAAW,qBAAkB,CAAkB;AACxE,UAAQ,CAA8D;AACtE;AACA;AACA,KAAI,GAJuBH,QAAQ,EAAqBC,eAAe,EAC7DrB,MAAM,CAAC;UAAEwB,IAAI,EAAE,MAAM;UAAEC,KAAK,EAAG,GAAExB,MAAO;QAAiB,CAAC,CAAC;MAInE;IAAC;MAAAW,IAAA;MAAAc,MAAA;MAAAZ,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GAvBID,UAAU,CAACN,UAAU,CAAC;AA0BlD,eAAeQ,aAAa"}

package/es/components/copy-button/copy-button.rtl.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--copy-btn{position:relative;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;padding:0;border:none;background-color:var(--cds-layer);cursor:pointer}.cds--copy-btn html{font-size:100%}.cds--copy-btn body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--copy-btn code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--copy-btn strong{font-weight:600}.cds--copy-btn:hover{background-color:var(--cds-layer-hover)}.cds--copy-btn:active{background-color:var(--cds-layer-active)}.cds--copy-btn::before{position:absolute;z-index:6000;width:0;height:0;border-style:solid;content:\"\";display:none}.cds--copy-btn .cds--copy-btn__feedback{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:right;transform:translateX(50%);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:none;overflow:visible;box-sizing:content-box;margin:auto;clip:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-accelerator:true){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-ime-align:auto){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--copy-btn .cds--copy-btn__feedback{border:1px solid transparent}}.cds--copy-btn:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;outline-color:var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--copy-btn:focus{outline-style:dotted}}.cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating::before{display:block}.cds--copy-btn.cds--copy-btn--animating::before{border:none}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}.cds--copy{font-size:0}:host(cds-copy-button){display:inline-flex;outline:0}",
+  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}.cds--copy-btn{position:relative;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;padding:0;border:none;background-color:var(--cds-layer);cursor:pointer}.cds--copy-btn html{font-size:100%}.cds--copy-btn body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--copy-btn code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--copy-btn strong{font-weight:600}.cds--copy-btn:hover{background-color:var(--cds-layer-hover)}.cds--copy-btn:active{background-color:var(--cds-layer-active)}.cds--copy-btn::before{position:absolute;z-index:6000;width:0;height:0;border-style:solid;content:\"\";display:none}.cds--copy-btn .cds--copy-btn__feedback{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:right;transform:translateX(50%);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:none;overflow:visible;box-sizing:content-box;margin:auto;clip:auto}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-accelerator:true){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@supports (-ms-ime-align:auto){.cds--copy-btn .cds--copy-btn__feedback{width:auto}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--copy-btn .cds--copy-btn__feedback{border:1px solid transparent}}.cds--copy-btn:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;outline-color:var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--copy-btn:focus{outline-style:dotted}}.cds--copy-btn.cds--copy-btn--animating .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating::before{display:block}.cds--copy-btn.cds--copy-btn--animating::before{border:none}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-out::before{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in .cds--copy-btn__feedback,.cds--copy-btn.cds--copy-btn--animating.cds--copy-btn--fade-in::before{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}.cds--copy{font-size:0}:host(cds-copy-button){display:inline-flex;outline:0}.cds--snippet__icon{width:1rem;height:1rem;fill:var(--cds-icon-primary,#161616);transition:all 70ms cubic-bezier(.2,0,.38,.9)}.cds--copy-btn--animating.cds--copy-btn--fade-out{animation:110ms cubic-bezier(.2,0,.38,.9) hide-feedback}.cds--copy-btn--animating.cds--copy-btn--fade-in{animation:110ms cubic-bezier(.2,0,.38,.9) show-feedback}",
 ]);