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

Helios Design System Components

import Component from '@glimmer/component';
import { assert } from '@ember/debug';
import { tracked } from '@glimmer/tracking';
import { concat } from '@ember/helper';
import { HdsCopySnippetColorValues } from './types.js';
import HdsTextCode from '../../text/code.js';
import HdsIcon from '../../icon/index.js';
import hdsClipboard from '../../../../modifiers/hds-clipboard.js';
import HdsTHelper from '../../../../helpers/hds-t.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_COLOR = HdsCopySnippetColorValues.Primary;
const COLORS = Object.values(HdsCopySnippetColorValues);
const DEFAULT_ICON = 'clipboard-copy';
const SUCCESS_ICON = 'clipboard-checked';
const ERROR_ICON = 'clipboard-x';
const DEFAULT_STATUS = 'idle';
class HdsCopySnippet extends Component {
  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 textToShow() {
    const {
      textToCopy = ''
    } = this.args;
    if (typeof textToCopy === 'string') {
      return textToCopy;
    } else {
      return textToCopy.toString();
    }
  }
  get icon() {
    let icon = DEFAULT_ICON;
    if (this._status === 'success') {
      icon = SUCCESS_ICON;
    } else if (this._status === 'error') {
      icon = ERROR_ICON;
    }
    return icon;
  }
  get color() {
    const {
      color = DEFAULT_COLOR
    } = this.args;
    assert(`@color for "Hds::Copy::Snippet" must be one of the following: ${COLORS.join(', ')}; received: ${color}`, COLORS.includes(color));
    return color;
  }
  get isFullWidth() {
    return this.args.isFullWidth ?? false;
  }
  get isTruncated() {
    return this.args.isTruncated ?? false;
  }
  get classNames() {
    const classes = ['hds-copy-snippet'];
    // add a class based on the @color argument
    classes.push(`hds-copy-snippet--color-${this.color}`);
    // add a class based on the tracked status (idle/success/error)
    classes.push(`hds-copy-snippet--status-${this._status}`);
    // add a class based on the @isTruncated argument
    if (this.isTruncated) {
      classes.push('hds-copy-snippet--is-truncated');
    }
    // add a class based on the @isFullWidth argument
    if (this.isFullWidth) {
      classes.push('hds-copy-snippet--width-full');
    }
    return classes.join(' ');
  }
  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("<button type=\"button\" class={{this.classNames}} {{hdsClipboard text=@textToCopy onSuccess=this.onSuccess onError=this.onError}} aria-label={{hdsT \"hds.components.copy-snippet.button.aria-label\" textToCopy=@textToCopy default=(concat \"copy \" @textToCopy)}} ...attributes>\n  <HdsTextCode class=\"hds-copy-snippet__text\" @tag=\"span\" @size=\"100\">\n    {{this.textToShow}}\n  </HdsTextCode>\n  <HdsIcon @name={{this.icon}} class=\"hds-copy-snippet__icon\" />\n</button>", {
      strictMode: true,
      scope: () => ({
        hdsT: HdsTHelper,
        concat,
        hdsClipboard,
        HdsTextCode,
        HdsIcon
      })
    }), this);
  }
}

export { COLORS, DEFAULT_COLOR, DEFAULT_ICON, DEFAULT_STATUS, ERROR_ICON, SUCCESS_ICON, HdsCopySnippet as default };
//# sourceMappingURL=index.js.map