@nopwdio/ui/dist/components/ui-clipboard.d.ts

Nopwd Design System

import { LitElement } from "lit";
declare enum State {
    IDLE = 0,
    BUSY = 1,
    DONE = 2
}
/**
 * `ui-clipboard` is a custom element that provides a button to copy text to the clipboard.
 *
 * @element ui-clipboard
 *
 * @property {string} value - The text value to be copied to the clipboard.
 *
 * @csspart button - The button element used to trigger the copy action.
 * @csspart icon - The icon inside the button.
 *
 * @cssprop --np-border-color - Border color of the host element.
 * @cssprop --np-border-width - Border width of the host element.
 * @cssprop --np-border-radius - Border radius of the host element.
 * @cssprop --np-shadow-emphasis - Box shadow of the host element.
 * @cssprop --np-fill-color-accent - Fill color when the host element is hovered.
 * @cssprop --np-transition-duration - Transition duration for hover effects.
 * @cssprop --np-padding-emphasis - Padding inside the anchor element.
 * @cssprop --np-gap-emphasis - Gap inside the anchor element.
 * @cssprop --np-text-color - Text color of the heading and button.
 * @cssprop --np-text-size - Text size of the heading and button.
 * @cssprop --np-text-weight-emphasis - Font weight of the heading.
 * @cssprop --np-text-color-muted - Muted text color for the icon and paragraph.
 * @cssprop --np-text-size-muted - Text size of the paragraph.
 * @cssprop --np-text-weight - Font weight of the paragraph.
 * @cssprop --np-padding-muted - Padding inside the button.
 * @cssprop --np-bg-color-emphasis - Background color of the selected button.
 * @cssprop --np-shadow-muted - Box shadow of the selected button.
 */
export declare class UiClipboard extends LitElement {
    value: string;
    state: State;
    connectedCallback(): void;
    /**
     * Copies the `value` property to the clipboard.
     */
    copyToClipboard(): Promise<void>;
    private wait;
    render(): import("lit-html").TemplateResult<1>;
    static styles: import("lit").CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        "ui-clipboard": UiClipboard;
    }
}
export {};
/**
 *
 * enum State {
  IDLE,
  BUSY,
  DONE,
}

const ANIMATION_DELAY = 150;
const DONE_DELAY = 1500;

@customElement("ui-clipboard")
export class UiClipboard extends LitElement {
  @property() text: string = "";
  @property({ type: Number }) state: State = State.IDLE;

  connectedCallback(): void {
    super.connectedCallback();
    this.style.setProperty("--delay", `${ANIMATION_DELAY}ms`);
  }

  async copy() {
    if (this.state !== State.IDLE) {
      return;
    }

    if (this.text.length === 0) {
      return;
    }

    this.state = State.BUSY;

    const done = navigator.clipboard.writeText(this.text);
    await this.wait(ANIMATION_DELAY);
    await done;
    this.state = State.DONE;

    await this.wait(DONE_DELAY);
    this.state = State.IDLE;
  }

  private wait(ms: number) {
    return new Promise((resolve) => {
      setTimeout(resolve, ms);
    });
  }

  render() {
    return html`${this.state === State.IDLE
      ? html`<span class="idle" @click=${this.copy}>${clipboardDocument}</span>`
      : this.state === State.BUSY
      ? html`<span class="busy">${clipboardDocument}</span>`
      : this.state === State.DONE
      ? html`<span class="done">${clipboardDocumentCheck}</span>`
      : html``}`;
  }

  static styles = css`
    :host,
    span {
      display: flex;
      align-items: center;
    }

    .icon {
      width: 1em;
      height: 1em;
    }

    span.idle {
      cursor: pointer;
    }

    span.busy .icon {
      animation: hideIt var(--delay) linear forwards;
    }

    span.done .icon {
      animation: showIt var(--delay) linear forwards;
    }

    @keyframes hideIt {
      from {
        transform: scale(1);
      }
      to {
        transform: scale(0);
      }
    }
    @keyframes showIt {
      from {
        transform: scale(0);
      }
      50% {
        transform: scale(1.4);
      }

      to {
        transform: scale(1);
      }
    }
  `;
}

 */