@hashicorp/design-system-components/dist/components/hds/copy/button/index.js

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { tracked } from '@glimmer/tracking';
import { service } from '@ember/service';
import { HdsCopyButtonSizeValues } from './types.js';
import HdsButton from '../../button/index.js';
import hdsClipboard from '../../../../modifiers/hds-clipboard.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const DEFAULT_SIZE = HdsCopyButtonSizeValues.Medium;
const SIZES = Object.values(HdsCopyButtonSizeValues);
const DEFAULT_ICON = 'clipboard-copy';
const SUCCESS_ICON = 'clipboard-checked';
const ERROR_ICON = 'clipboard-x';
const DEFAULT_STATUS = 'idle';
class HdsCopyButton extends Component {
  static {
    g(this.prototype, "hdsIntl", [service]);
  }
  #hdsIntl = (i(this, "hdsIntl"), void 0);
  static {
    g(this.prototype, "_status", [tracked], function () {
      return DEFAULT_STATUS;
    });
  }
  #_status = (i(this, "_status"), void 0);
  static {
    g(this.prototype, "_timer", [tracked]);
  }
  #_timer = (i(this, "_timer"), void 0);
  get icon() {
    let icon = DEFAULT_ICON;
    if (this._status === 'success') {
      icon = SUCCESS_ICON;
    } else if (this._status === 'error') {
      icon = ERROR_ICON;
    }
    return icon;
  }
  get size() {
    const {
      size = DEFAULT_SIZE
    } = this.args;
    assert(`@size for "Hds::Copy::Button" must be one of the following: ${SIZES.join(', ')}; received: ${size}`, SIZES.includes(size));
    return size;
  }
  get classNames() {
    const classes = ['hds-copy-button'];
    // add a class based on the @size argument
    classes.push(`hds-button--size-${this.size}`);
    classes.push(`hds-copy-button--status-${this._status}`);
    return classes.join(' ');
  }
  get ariaMessageText() {
    if (this._status === 'success') {
      return this.args.ariaMessageText ?? this.hdsIntl.t('hds.components.copy-button.aria-message-text', {
        default: 'Copied to clipboard'
      });
    } else {
      return '';
    }
  }
  onSuccess = args => {
    this._status = 'success';
    this.resetStatusDelayed();
    const {
      onSuccess
    } = this.args;
    if (typeof onSuccess === 'function') {
      onSuccess(args);
    }
  };
  onError = args => {
    this._status = 'error';
    this.resetStatusDelayed();
    const {
      onError
    } = this.args;
    if (typeof onError === 'function') {
      onError(args);
    }
  };
  resetStatusDelayed = () => {
    clearTimeout(this._timer);
    // make it fade back to the default state
    this._timer = setTimeout(() => {
      this._status = DEFAULT_STATUS;
    }, 1500);
  };
  static {
    setComponentTemplate(precompileTemplate("<HdsButton class={{this.classNames}} @size={{this.size}} @isFullWidth={{@isFullWidth}} @text={{@text}} @icon={{this.icon}} @isIconOnly={{@isIconOnly}} @color=\"secondary\" @iconPosition=\"trailing\" {{hdsClipboard text=@textToCopy target=@targetToCopy onSuccess=this.onSuccess onError=this.onError}} ...attributes />\n<span class=\"sr-only\" aria-live=\"polite\">{{this.ariaMessageText}}</span>", {
      strictMode: true,
      scope: () => ({
        HdsButton,
        hdsClipboard
      })
    }), this);
  }
}

export { DEFAULT_ICON, DEFAULT_SIZE, DEFAULT_STATUS, ERROR_ICON, SIZES, SUCCESS_ICON, HdsCopyButton as default };
//# sourceMappingURL=index.js.map