chore: lift components folder

src/TextInput/PasswordInput.svelte

@@ -0,0 +1,104 @@
+<script>
+  export let type = "password";
+  export let value = "";
+  export let hidePasswordLabel = "Hide password";
+  export let showPasswordLabel = "Show password";
+  export let light = false;
+  export let disabled = false;
+  export let placeholder = "";
+  export let helperText = "";
+  export let id = "ccs-" + Math.random().toString(36);
+  export let name = undefined;
+  export let invalid = false;
+  export let invalidText = "";
+  export let labelText = "";
+  export let hideLabel = false;
+  export let tooltipAlignment = "center";
+  export let tooltipPosition = "bottom";
+  export let ref = null;
+
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
+  import View16 from "carbon-icons-svelte/lib/View16";
+  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
+
+  $: errorId = `error-${id}`;
+</script>
+
+<div
+  class:bx--form-item={true}
+  class:bx--text-input-wrapper={true}
+  class:bx--password-input-wrapper={true}
+  {...$$restProps}
+  on:click
+  on:mouseover
+  on:mouseenter
+  on:mouseleave>
+  {#if labelText}
+    <label
+      for={id}
+      class:bx--label={true}
+      class:bx--visually-hidden={hideLabel}
+      class:bx--label--disabled={disabled}>
+      {labelText}
+    </label>
+  {/if}
+  {#if helperText}
+    <div
+      class:bx--form__helper-text={true}
+      class:bx--form__helper-text--disabled={disabled}>
+      {helperText}
+    </div>
+  {/if}
+  <div
+    class:bx--text-input__field-wrapper={true}
+    data-invalid={invalid || undefined}>
+    {#if invalid}
+      <WarningFilled16 class="bx--text-input__invalid-icon" />
+    {/if}
+    <input
+      bind:this={ref}
+      data-invalid={invalid || undefined}
+      aria-invalid={invalid || undefined}
+      aria-describedby={invalid ? errorId : undefined}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {value}
+      {disabled}
+      class:bx--text-input={true}
+      class:bx--password-input={true}
+      class:bx--text-input--light={light}
+      class:bx--text-input--invalid={invalid}
+      on:change
+      on:input
+      on:input={({ target }) => {
+        value = target.value;
+      }}
+      on:focus
+      on:blur />
+    <button
+      type="button"
+      class:bx--text-input--password__visibility__toggle={true}
+      class:bx--btn--icon-only={true}
+      class:bx--tooltip__trigger={true}
+      class:bx--tooltip--a11y={true}
+      class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
+      {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
+      on:click={() => {
+        type = type === 'password' ? 'text' : 'password';
+      }}>
+      <span class:bx--assistive-text={true}>
+        {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
+      </span>
+      {#if type === 'text'}
+        <ViewOff16 class="bx--icon-visibility-off" />
+      {:else}
+        <View16 class="bx--icon-visibility-on" />
+      {/if}
+    </button>
+  </div>
+  {#if invalid}
+    <div class:bx--form-requirement={true} id={errorId}>{invalidText}</div>
+  {/if}
+</div>