fix(password-input): disable visibility button

- set default values for tooltipAlignment, tooltipPosition

COMPONENT_INDEX.md

@@ -2507,8 +2507,8 @@ None.
 | placeholder       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the placeholder text                          |
 | hidePasswordLabel | <code>let</code> | No       | <code>string</code>                                             | <code>"Hide password"</code>                     | Specify the hide password label text                  |
 | showPasswordLabel | <code>let</code> | No       | <code>string</code>                                             | <code>"Show password"</code>                     | Specify the show password label text                  |
-| tooltipAlignment  | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | --                                               | Set the alignment of the tooltip relative to the icon |
-| tooltipPosition   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | --                                               | Set the position of the tooltip relative to the icon  |
+| tooltipAlignment  | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
+| tooltipPosition   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the position of the tooltip relative to the icon  |
 | light             | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to enable the light variant             |
 | disabled          | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the input                    |
 | helperText        | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the helper text                               |

docs/src/COMPONENT_API.json

@@ -8240,6 +8240,7 @@
           "kind": "let",
           "description": "Set the alignment of the tooltip relative to the icon",
           "type": "\"start\" | \"center\" | \"end\"",
+          "value": "\"center\"",
           "isFunction": false,
           "constant": false,
           "reactive": false
@@ -8249,6 +8250,7 @@
           "kind": "let",
           "description": "Set the position of the tooltip relative to the icon",
           "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
+          "value": "\"bottom\"",
           "isFunction": false,
           "constant": false,
           "reactive": false

src/TextInput/PasswordInput.svelte

@@ -30,13 +30,13 @@
    * Set the alignment of the tooltip relative to the icon
    * @type {"start" | "center" | "end"}
    */
-  export let tooltipAlignment = undefined;
+  export let tooltipAlignment = "center";
 
   /**
    * Set the position of the tooltip relative to the icon
    * @type {"top" | "right" | "bottom" | "left"}
    */
-  export let tooltipPosition = undefined;
+  export let tooltipPosition = "bottom";
 
   /** Set to `true` to enable the light variant */
   export let light = false;
@@ -72,9 +72,9 @@
   export let ref = null;
 
   import { getContext } from "svelte";
-  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
-  import View16 from "carbon-icons-svelte/lib/View16";
-  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
+  import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
+  import View16 from "carbon-icons-svelte/lib/View16/View16.svelte";
+  import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16/ViewOff16.svelte";
 
   const ctx = getContext("Form");
 
@@ -136,19 +136,25 @@
     />
     <button
       type="button"
+      disabled="{disabled}"
       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:bx--btn--disabled="{disabled}"
       class="{tooltipPosition && `bx--tooltip--${tooltipPosition}`}
         {tooltipAlignment && `bx--tooltip--align-${tooltipAlignment}`}"
       on:click="{() => {
         type = type === 'password' ? 'text' : 'password';
       }}"
     >
+      {#if !disabled}
         <span class:bx--assistive-text="{true}">
-        {#if type === 'text'}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
+          {#if type === 'text'}
+            {hidePasswordLabel}
+          {:else}{showPasswordLabel}{/if}
         </span>
+      {/if}
       {#if type === 'text'}
         <ViewOff16 class="bx--icon-visibility-off" />
       {:else}

types/TextInput/PasswordInput.d.ts

@@ -38,11 +38,13 @@ export interface PasswordInputProps extends svelte.JSX.HTMLAttributes<HTMLElemen
 
   /**
    * Set the alignment of the tooltip relative to the icon
+   * @default "center"
    */
   tooltipAlignment?: "start" | "center" | "end";
 
   /**
    * Set the position of the tooltip relative to the icon
+   * @default "bottom"
    */
   tooltipPosition?: "top" | "right" | "bottom" | "left";