Add default value to controller.ts and fix doc reviews

Author: Damien Carrier

src/TogglePassword/assets/dist/controller.d.ts

@@ -6,10 +6,22 @@ export default class extends Controller<HTMLInputElement> {
     readonly hiddenIconValue: string;
     readonly buttonClassesValue: Array<string>;
     static values: {
-        visibleLabel: StringConstructor;
-        visibleIcon: StringConstructor;
-        hiddenLabel: StringConstructor;
-        hiddenIcon: StringConstructor;
+        visibleLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        visibleIcon: {
+            type: StringConstructor;
+            default: string;
+        };
+        hiddenLabel: {
+            type: StringConstructor;
+            default: string;
+        };
+        hiddenIcon: {
+            type: StringConstructor;
+            default: string;
+        };
         buttonClasses: ArrayConstructor;
     };
     isDisplayed: boolean;

src/TogglePassword/assets/dist/controller.js

@@ -47,10 +47,10 @@ class default_1 extends Controller {
     }
 }
 default_1.values = {
-    visibleLabel: String,
-    visibleIcon: String,
-    hiddenLabel: String,
-    hiddenIcon: String,
+    visibleLabel: { type: String, default: 'Show' },
+    visibleIcon: { type: String, default: 'Default' },
+    hiddenLabel: { type: String, default: 'Hide' },
+    hiddenIcon: { type: String, default: 'Default' },
     buttonClasses: Array,
 };
 

src/TogglePassword/assets/src/controller.ts

@@ -19,10 +19,10 @@ export default class extends Controller<HTMLInputElement> {
     declare readonly buttonClassesValue: Array<string>;
 
     static values = {
-        visibleLabel: String,
-        visibleIcon: String,
-        hiddenLabel: String,
-        hiddenIcon: String,
+        visibleLabel: { type: String, default: 'Show' },
+        visibleIcon: { type: String, default: 'Default' },
+        hiddenLabel: { type: String, default: 'Hide' },
+        hiddenIcon: { type: String, default: 'Default' },
         buttonClasses: Array,
     };
 

src/TogglePassword/doc/index.rst

@@ -262,29 +262,23 @@ Then in your form, add your controller as an HTML attribute::
 Usage without Symfony Forms
 ---------------------------
 
-You can also use the TogglePassword with native HTML inputs.
-It requires a little bit more work but it's still possible.
-Here is an example::
+You can also use the TogglePassword with native HTML inputs:
+
+.. code-block:: html+twig
 
     // ...
 
-    <label for="password">Password</label>
-    <input
-        id="password"
-        name="password"
-        type="password"
-        autocomplete="current-password"
-        required
-        placeholder="Password"
-        {{ stimulus_controller('@symfony/ux-toggle-password--toggle-password', {
-                visibleIcon: 'Default', // Here you can pass an SVG tag or a string. Default is the value for the default svg
-                visibleLabel: 'Show', // This field is optional
-                hiddenIcon: 'Default', // Here you can pass an SVG tag or a string. Default is the value for the default svg
-                hiddenLabel: 'Hide', // This field is optional
-                buttonClasses: ['toggle-password-button'], // Here you can add as many classes as you wish. You will need at least to add the "toggle-password-button" class
-            }
-        ) }}
-    >
+    <div class="toggle-password-container"> // Add "toggle-password-container" or a class that applies position: relative to this container.
+        <label for="password">Password</label>
+        <input
+            id="password"
+            name="password"
+            type="password"
+            {{ stimulus_controller('symfony/ux-toggle-password/toggle-password', {
+                    buttonClasses: ['toggle-password-button'], // Add as many classes as you wish. "toggle-password-button" is needed to activate the default CSS.
+            }) }}
+        >
+    </div>
 
     // ...