led = false;
  }
  render() {
    return html`
      ${stylesTemplate()}
      ${LoginCommandButton({
        buttonText: "login-item-edit-button",
        variant: "ghost-button",
        icon: "chrome://global/skin/icons/edit.svg",
        disabled: this.disabled,
      })}
    `;
  }
}

export class DeleteButton extends MozLitElement {
  static get properties() {
    return {
      disabled: { type: Boolean, reflect: true },
    };
  }

  constructor() {
    super();
    this.disabled = false;
  }
  render() {
    return html` ${stylesTemplate()}
    ${LoginCommandButton({
      buttonText: "about-logins-login-item-remove-button",
      variant: "ghost-button",
      icon: "chrome://global/skin/icons/delete.svg",
      disabled: this.disabled,
    })}`;
  }
}

export class CopyUsernameButton extends MozLitElement {
  static get properties() {
    return {
      copiedText: { type: Boolean, reflect: true },
      disabled: { type: Boolean, reflect: true },
    };
  }

  constructor() {
    super();
    this.copiedText = false;
    this.disabled = false;
  }
  render() {
    this.className = this.copiedText ? "copied-button" : "copy-button";
    return html` ${stylesTemplate()}
    ${when(
      this.copiedText,
      () =>
        html`${LoginCommandButton({
          buttonText: "login-item-copied-username-button-text",
          icon: "chrome://global/skin/icons/check.svg",
          disabled: this.disabled,
        })}`,
      () =>
        html`${LoginCommandButton({
          variant: "text-button",
          buttonText: "login-item-copy-username-button-text",
          disabled: this.disabled,
        })}`
    )}`;
  }
}

export class CopyPasswordButton extends MozLitElement {
  static get properties() {
    return {
      copiedText: { type: Boolean, reflect: true },
      disabled: { type: Boolean, reflect: true },
    };
  }

  constructor() {
    super();
    this.copiedText = false;
    this.disabled = false;
  }
  render() {
    this.className = this.copiedText ? "copied-button" : "copy-button";
    return html` ${stylesTemplate()}
    ${when(
      this.copiedText,
      () =>
        html`${LoginCommandButton({
          buttonText: "login-item-copied-password-button-text",
          icon: "chrome://global/skin/icons/check.svg",
          disabled: this.disabled,
        })}`,
      () =>
        html`${LoginCommandButton({
          variant: "text-button",
          buttonText: "login-item-copy-password-button-text",
          disabled: this.disabled,
        })}`
    )}`;
  }
}

customElements.define("copy-password-button", CopyPasswordButton);
customElements.define("copy-username-button", CopyUsernameButton);
customElements.define("delete-button", DeleteButton);
customElements.define("edit-button", EditButton);
customElements.define("create-login-button", CreateLoginButton);
PK