<script lang="ts">
  import { customElementForwardEvents } from '../../utils';
  /**
   * A password input is a specialized input field used to securely enter and manage passwords. It typically masks the characters entered to protect sensitive information from being seen. It includes a toggle button to show or hide the password, improving usability while maintaining security. Password inputs are commonly used in login forms, account creation, and authentication flows.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the password input element, used to associate the label with the form element.
     */
    id: string;
    /**
     * The name attribute for the password input element, typically used for form submission.
     */
    name?: string;
    /**
     * The current value of the password input field.
     */
    value?: string | number;
    /**
     * A placeholder text to show in the password input when it is empty.
     */
    placeholder?: string;
    /**
     * If `true`, applies an invalid state to the password input.
     */
    isinvalid?: boolean;
    /**
     * If `true`, disables the password input, making it non-interactive.
     */
    disabled?: boolean;
    /**
     * If `true`, the password input is read-only (cannot be edited).
     */
    readonly?: boolean;
    /**
     * If `true`, a clear button will appear when the password input has a value.
     */
    isclearable?: boolean;
    /**
     * The label text for the clear button.
     */
    clearlabel?: string;
    /**
     * Labels of the button displayed when showing or hiding the password.
     */
    buttonlabel?: {
      show: string;
      hide: string;
    };
  }

  let {
    id,
    name,
    value = $bindable(),
    placeholder,
    isinvalid,
    disabled,
    readonly,
    isclearable,
    clearlabel = 'Clear content',
    buttonlabel = { show: 'Show', hide: 'Hide' },
    class: className,
    ...attrs
  }: Props = $props();

  let isVisible = $state(false);

  function toggleVisibility() {
    isVisible = !isVisible;
  }

  const resetValue = () => (value = '');
</script>

<div class={['mc-password-input', 'mc-text-input', isinvalid && 'is-invalid', className]}>
  <input
    class="mc-password-input__control mc-text-input__control"
    {id}
    {name}
    type={isVisible ? 'text' : 'password'}
    bind:value
    {placeholder}
    {disabled}
    {readonly}
    aria-invalid={isinvalid}
    {...attrs}
  />
  {#if isclearable && value}
    <div class="mc-controls-options">
      <button class="mc-controls-options__button" type="button" onclick={resetValue}>
        <svg class="mc-controls-options__icon" aria-hidden="true">
          <path
            fill-rule="evenodd"
            d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2ZM8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z"
          />
        </svg>
        <span class="mc-controls-options__label">{clearlabel}</span>
      </button>
    </div>
  {/if}

  <button
    class={['mc-button', 'mc-button--s', 'mc-button--ghost']}
    type="button"
    role="switch"
    tabindex="0"
    {disabled}
    aria-checked={isVisible}
    onclick={toggleVisibility}
  >
    <span>{isVisible ? buttonlabel.hide : buttonlabel.show}</span>
  </button>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-password-input .mc-button {
  min-width: 4rem;
  margin: 0.5rem;
}

/* stylelint-disable string-no-newline */
.mc-text-input {
  transition: box-shadow 200ms ease;
  background-color: var(--forms-color-background-default, #ffffff);
  border: var(--border-width-s, 0.0625rem) solid var(--forms-color-border-default, #666666);
  border-radius: var(--forms-border-radius, 0.25rem);
  transition: all ease 200ms;
  color: var(--forms-color-text-default, #000000);
  display: block;
  width: 100%;
  height: 3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
}
.mc-text-input__control {
  background-color: transparent;
  border-width: 0;
  font-family: inherit;
  outline: none;
}
.mc-text-input__control[type=number] {
  /* For Blink & WebKit rendering engines */
}
.mc-text-input__control[type=number]::-webkit-inner-spin-button, .mc-text-input__control[type=number]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}
.mc-text-input__control[type=number] {
  /* For Gecko rendering engine */
  appearance: textfield;
}
.mc-text-input__control[type=search]::-webkit-search-decoration, .mc-text-input__control[type=search]::-webkit-search-cancel-button {
  appearance: none;
}
.mc-text-input__control {
  padding: 0.75rem 0.6875rem;
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-regular, 400);
  color: var(--forms-color-text-default, #000000);
  flex-grow: 1;
}
.mc-text-input__control::placeholder {
  color: var(--forms-color-placeholder, #666666);
}
.mc-text-input__addon {
  font-size: var(--font-size-150, 1rem);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}
.mc-text-input__icon {
  fill: var(--forms-color-icon-default, #666666);
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
}
.mc-text-input:focus-within {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-text-input:hover:not(:focus-within) {
  border-color: var(--forms-color-border-hover, #4d4d4d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-hover, #4d4d4d);
}
.mc-text-input:has(input:disabled) {
  background-color: var(--forms-color-background-disabled, #d9d9d9);
  cursor: not-allowed;
  border-color: transparent;
  box-shadow: none;
  color: var(--forms-color-text-disabled, #737373);
  pointer-events: none;
}
.mc-text-input:has(input[readonly]) {
  border-color: var(--forms-color-border-read-only, #cccccc);
  pointer-events: none;
}
.mc-text-input:has(.mc-text-input__icon), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-start: 0.6875rem;
}
.mc-text-input:has(.mc-text-input__icon) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-start: 0;
}
.mc-text-input:has(.mc-controls-options), .mc-text-input:has(.mc-text-input__addon) {
  padding-inline-end: 0.6875rem;
}
.mc-text-input:has(.mc-controls-options) .mc-text-input__control, .mc-text-input:has(.mc-text-input__addon) .mc-text-input__control {
  padding-inline-end: 0;
}
.mc-text-input--s {
  height: 2rem;
}
.mc-text-input--s .mc-text-input__control {
  padding: 0.375rem 0.6875rem;
  font-size: var(--font-size-100, 0.875rem);
  line-height: var(--line-height-s, 1.3);
}
.mc-text-input--s:has(.mc-text-input__icon) {
  padding-inline-start: 0.4375rem;
}
.mc-text-input--s:has(.mc-controls-options) {
  padding-inline-end: 0.4375rem;
}
.mc-text-input.is-invalid {
  border-color: var(--forms-color-border-invalid, #ea302d);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid, #ea302d);
}
.mc-text-input.is-invalid:hover:not(:focus-within) {
  border-color: var(--forms-color-border-invalid-hover, #c61112);
  box-shadow: 0 0 0 var(--border-width-s, 0.0625rem) var(--forms-color-border-invalid-hover, #c61112);
}
.mc-text-input * {
  box-sizing: border-box;
}

/* stylelint-enable string-no-newline */
.mc-button {
  color: var(--button-color-filled-standard-font, #ffffff);
  background-color: var(--button-color-filled-standard-background, #464e63);
}
.mc-button:hover {
  background-color: var(--button-color-filled-standard-hover-background, #343b4c);
  color: var(--button-color-filled-standard-font, #ffffff);
}
.mc-button:active {
  background-color: var(--button-color-filled-standard-active-background, #242938);
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button {
  font-weight: var(--font-weight-semi-bold, 600);
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button {
  display: inline-flex;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  border: 2px solid transparent;
  transition: all ease 200ms;
  transition: box-shadow 200ms ease;
  align-items: center;
  box-sizing: border-box;
  font-family: inherit;
  fill: currentcolor;
  gap: 0.25rem;
  cursor: pointer;
}
.mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button:focus {
  box-shadow: none;
  outline: none;
}
.mc-button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-button--s {
  padding: 0 calc(0.75rem - 0.125rem);
  min-height: 2rem;
  min-width: 2rem;
  border-radius: var(--button-border-radius-s, 0.25rem);
}
.mc-button--s .mc-button__label {
  font-size: var(--font-size-100, 0.875rem);
}
.mc-button--s .mc-button__icon {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--s .mc-button__icon:only-child {
  width: 1.25rem;
  height: 1.25rem;
}
.mc-button--m {
  padding: 0 calc(1rem - 0.125rem);
  min-height: 3rem;
  min-width: 3rem;
  border-radius: var(--button-border-radius-m, 0.25rem);
}
.mc-button--m .mc-button__label {
  font-size: var(--font-size-150, 1rem);
}
.mc-button--m .mc-button__icon {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--m .mc-button__icon:only-child {
  width: 1.5rem;
  height: 1.5rem;
}
.mc-button--l {
  padding: 0 calc(1.25rem - 0.125rem);
  min-height: 4rem;
  min-width: 4rem;
  border-radius: var(--button-border-radius-l, 0.25rem);
}
.mc-button--l .mc-button__label {
  font-size: var(--font-size-200, 1.125rem);
}
.mc-button--l .mc-button__icon {
  width: 2rem;
  height: 2rem;
}
.mc-button--l .mc-button__icon:only-child {
  width: 2rem;
  height: 2rem;
}
.mc-button--icon-only {
  padding: 0.25rem;
}
.mc-button--outlined {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
  color: var(--button-color-outlined-standard-font, #242938);
}
.mc-button--outlined:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
  color: var(--button-color-ghost-standard-font, #242938);
}
.mc-button--ghost:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--accent {
  color: var(--button-color-filled-accent-font, #ffffff);
  background-color: var(--button-color-filled-accent-background, #117f03);
}
.mc-button--accent:hover {
  background-color: var(--button-color-filled-accent-hover-background, #006902);
  color: var(--button-color-filled-accent-font, #ffffff);
}
.mc-button--accent:active {
  background-color: var(--button-color-filled-accent-active-background, #035010);
}
.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--danger {
  color: var(--button-color-filled-danger-font, #ffffff);
  background-color: var(--button-color-filled-danger-background, #c61112);
}
.mc-button--danger:hover {
  background-color: var(--button-color-filled-danger-hover-background, #8c0003);
  color: var(--button-color-filled-danger-font, #ffffff);
}
.mc-button--danger:active {
  background-color: var(--button-color-filled-danger-active-background, #530000);
}
.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--inverse {
  --focus-color-mid: var(--focus-color-outline-outer, #000000);
  --focus-color-outer: var(--focus-color-outline-mid, #ffffff);
  color: var(--button-color-filled-inverse-font, #242938);
  background-color: var(--button-color-filled-inverse-background, #ffffff);
}
.mc-button--inverse:hover {
  background-color: var(--button-color-filled-inverse-hover-background, #e6e6e6);
  color: var(--button-color-filled-inverse-font, #242938);
}
.mc-button--inverse:active {
  background-color: var(--button-color-filled-inverse-active-background, #cccccc);
}
.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--icon-button {
  border-radius: var(--border-radius-full, 100%);
  padding: 0;
}
.mc-button--loading {
  pointer-events: none;
}
.mc-button--loading .mc-button__loader {
  position: absolute;
  color: currentcolor;
}
.mc-button--loading .mc-button__label,
.mc-button--loading .mc-button__icon {
  visibility: hidden;
}
.mc-button--outlined.mc-button--standard {
  color: var(--button-color-outlined-standard-font, #242938);
  border-color: var(--button-color-outlined-standard-border, #8891aa);
  background-color: var(--button-color-outlined-standard-background, #ffffff);
}
.mc-button--outlined.mc-button--standard:hover {
  background-color: var(--button-color-outlined-standard-hover-background, #eff1f6);
  color: var(--button-color-outlined-standard-font, #242938);
}
.mc-button--outlined.mc-button--standard:active {
  background-color: var(--button-color-outlined-standard-active-background, #c9d0de);
}
.mc-button--outlined.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--accent {
  color: var(--button-color-outlined-accent-font, #117f03);
  border-color: var(--button-color-outlined-accent-border, #78be20);
  background-color: var(--button-color-outlined-accent-background, #ffffff);
}
.mc-button--outlined.mc-button--accent:hover {
  background-color: var(--button-color-outlined-accent-hover-background, #ebf5de);
  color: var(--button-color-outlined-accent-font, #117f03);
}
.mc-button--outlined.mc-button--accent:active {
  background-color: var(--button-color-outlined-accent-active-background, #c5e39e);
}
.mc-button--outlined.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--danger {
  color: var(--button-color-outlined-danger-font, #c61112);
  border-color: var(--button-color-outlined-danger-border, #ef5f5c);
  background-color: var(--button-color-outlined-danger-background, #ffffff);
}
.mc-button--outlined.mc-button--danger:hover {
  background-color: var(--button-color-outlined-danger-hover-background, #fdeaea);
  color: var(--button-color-outlined-danger-font, #c61112);
}
.mc-button--outlined.mc-button--danger:active {
  background-color: var(--button-color-outlined-danger-active-background, #f8bcbb);
}
.mc-button--outlined.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--outlined.mc-button--inverse {
  color: var(--button-color-outlined-inverse-font, #ffffff);
  border-color: var(--button-color-outlined-inverse-border, #ffffff);
  background-color: var(--button-color-outlined-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--outlined.mc-button--inverse:hover {
  background-color: var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, 0.1));
  color: var(--button-color-outlined-inverse-font, #ffffff);
}
.mc-button--outlined.mc-button--inverse:active {
  background-color: var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--outlined.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--standard {
  color: var(--button-color-ghost-standard-font, #242938);
  background-color: var(--button-color-ghost-standard-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--standard:hover {
  background-color: var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, 0.1));
  color: var(--button-color-ghost-standard-font, #242938);
}
.mc-button--ghost.mc-button--standard:active {
  background-color: var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, 0.2));
}
.mc-button--ghost.mc-button--standard:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--accent {
  color: var(--button-color-ghost-accent-font, #117f03);
  background-color: var(--button-color-ghost-accent-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--accent:hover {
  background-color: var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, 0.1));
  color: var(--button-color-ghost-accent-font, #117f03);
}
.mc-button--ghost.mc-button--accent:active {
  background-color: var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, 0.2));
}
.mc-button--ghost.mc-button--accent:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--danger {
  color: var(--button-color-ghost-danger-font, #c61112);
  background-color: var(--button-color-ghost-danger-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--danger:hover {
  background-color: var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, 0.1));
  color: var(--button-color-ghost-danger-font, #c61112);
}
.mc-button--ghost.mc-button--danger:active {
  background-color: var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, 0.2));
}
.mc-button--ghost.mc-button--danger:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}
.mc-button--ghost.mc-button--inverse {
  color: var(--button-color-ghost-inverse-font, #ffffff);
  background-color: var(--button-color-ghost-inverse-background, rgba(255, 255, 255, 0.01));
}
.mc-button--ghost.mc-button--inverse:hover {
  background-color: var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, 0.1));
  color: var(--button-color-ghost-inverse-font, #ffffff);
}
.mc-button--ghost.mc-button--inverse:active {
  background-color: var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, 0.2));
}
.mc-button--ghost.mc-button--inverse:disabled {
  background-color: var(--button-state-disabled-background, #d9d9d9);
  border-color: transparent;
  color: var(--button-state-disabled-color, #737373);
  cursor: not-allowed;
}

.mc-controls-options {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  gap: 0.5rem;
}
.mc-controls-options__button {
  background-color: transparent;
  border-width: 0;
  color: initial;
  font-family: inherit;
  outline: none;
  appearance: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--border-radius-full, 100%);
}
.mc-controls-options__button:hover .mc-controls-options__icon {
  fill: var(--forms-color-icon-clear-hover, #4d4d4d);
}
.mc-controls-options__button:focus-visible {
  box-shadow: 0 0 0 0.125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)), 0 0 0 0.25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
}
.mc-controls-options__icon {
  fill: var(--forms-color-icon-clear, #666666);
  color: var(--forms-color-icon-clear, #666666);
}
.mc-controls-options__button, .mc-controls-options__icon {
  height: 1.5rem;
  width: 1.5rem;
}
.mc-controls-options__label {
  height: 0;
  width: 0;
  overflow: hidden;
  position: absolute;
  top: -1000px;
  left: -1000px;
  text-align: left;
  opacity: 0;
}
.mc-controls-options__unit {
  font-size: var(--font-size-150, 1rem);
  line-height: var(--line-height-s, 1.3);
  font-weight: var(--font-weight-semi-bold, 600);
  color: var(--forms-color-text-default, #000000);
}</style>
