[TogglePasswordComponent] Add documentation for usage without Symfony Forms

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

@@ -34,8 +34,8 @@ needed if you're using AssetMapper):
     $ yarn install --force
     $ yarn watch
 
-Usage
------
+Usage with Symfony Forms
+------------------------
 
 Any ``PasswordType`` can be transformed into a toggle password field by adding the ``toggle`` option::
 
@@ -259,6 +259,29 @@ 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:
+
+.. code-block:: html+twig
+
+    // ...
+
+    <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>
+
+    // ...
+
 Backward Compatibility promise
 ------------------------------