@goldenpine/react-form-builder2 0.20.3-build.32 → 0.20.3-build.34

package/lib/form-elements/floating-placeholder.js

@@ -51,6 +51,14 @@
       wrapper.classList.remove('focused');
       update();
     });
+    // Listen for animationstart to detect autofill
+    input.addEventListener('animationstart', function (e) {
+      if (e.animationName === 'sf-autofill') {
+        if (placeholderSpan) {
+          placeholderSpan.classList.add('shrunken');
+        }
+      }
+    });
 
     // clicking the wrapper focuses inner input
     wrapper.addEventListener('click', function (e) {

package/lib/form-elements/index.js

@@ -89,6 +89,8 @@ var FloatingPlaceholderInput = function FloatingPlaceholderInput(_ref) {
     }
   };
 
+  // In the correspoding plain js file, the brwoser's autofill is detected by listening to 'animationstart' event with a specific animation name.
+
   // remove placeholder attribute from actual input to avoid duplicate text
   var _ph = inputProps.placeholder,
     restProps = (0, _objectWithoutProperties2["default"])(inputProps, _excluded);

package/lib/form-elements/sensitive-input.js

@@ -0,0 +1,100 @@
+"use strict";
+
+(function (window, document) {
+  'use strict';
+
+  var CSS_ID = 'sensitive-input-styles';
+  function injectStyles() {
+    if (document.getElementById(CSS_ID)) return;
+    var css = "\n.sensitive-wrapper { position: relative; }\n.sensitive-wrapper .toggle-password{\n  position: absolute;\n  right: .75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  cursor: pointer;\n  color: #6c757d;\n  background: transparent;\n  border: none;\n  padding: 0;\n  font-size: 1rem;\n}\n.sensitive-wrapper input.form-control{\n  padding-right: 2.5rem;\n}\n";
+    var style = document.createElement('style');
+    style.id = CSS_ID;
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    (document.head || document.documentElement).appendChild(style);
+  }
+  function processWrapper(wrapper) {
+    if (!wrapper) return;
+    var input = wrapper.querySelector('input');
+    if (!input) return;
+
+    // ensure initial type is password unless explicitly text
+    try {
+      if (!input.getAttribute('data-initial-type')) {
+        input.setAttribute('data-initial-type', input.type || 'password');
+      }
+      if (!input.type) input.type = 'password';
+    } catch (e) {
+      // ignore
+    }
+
+    // find existing toggle or create one
+    var toggle = wrapper.querySelector('.toggle-password');
+    if (!toggle) {
+      toggle = document.createElement('button');
+      toggle.type = 'button';
+      toggle.className = 'toggle-password';
+      toggle.setAttribute('aria-pressed', 'false');
+      toggle.setAttribute('title', 'Show password');
+      // prefer icon if FontAwesome present
+      toggle.innerHTML = '<i class="fas fa-eye" aria-hidden="true"></i>';
+      wrapper.appendChild(toggle);
+    }
+    function setShown(shown) {
+      try {
+        input.type = shown ? 'text' : 'password';
+      } catch (err) {
+        // some browsers don't allow changing type — replace element as fallback
+        var newInput = input.cloneNode(true);
+        newInput.type = shown ? 'text' : 'password';
+        input.parentNode.replaceChild(newInput, input);
+      }
+      toggle.setAttribute('aria-pressed', shown ? 'true' : 'false');
+      toggle.setAttribute('title', shown ? 'Hide password' : 'Show password');
+      // update icon if present
+      var i = toggle.querySelector('i');
+      if (i) {
+        if (shown) {
+          i.classList.remove('fa-eye');
+          i.classList.add('fa-eye-slash');
+        } else {
+          i.classList.remove('fa-eye-slash');
+          i.classList.add('fa-eye');
+        }
+      }
+    }
+    toggle.addEventListener('click', function (e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var currentlyShown = toggle.getAttribute('aria-pressed') === 'true';
+      setShown(!currentlyShown);
+      // keep focus in the input for accessibility
+      try {
+        input.focus();
+      } catch (err) {}
+    });
+
+    // initialize state
+    setShown(false);
+  }
+  function init(options) {
+    options = options || {};
+    if (options.injectStyles !== false) injectStyles();
+    var wrappers = document.querySelectorAll('.sensitive-wrapper');
+    wrappers.forEach(processWrapper);
+  }
+
+  // auto init on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () {
+      return init();
+    });
+  } else {
+    setTimeout(function () {
+      return init();
+    }, 0);
+  }
+  window.SensitiveInput = {
+    init: init
+  };
+})(window, document);

package/lib/form.js

@@ -456,6 +456,7 @@ var ReactForm = /*#__PURE__*/function (_React$Component) {
         if (!item) return null;
         switch (item.element) {
           case 'TextInput':
+          case 'SensitiveInput':
           case 'EmailInput':
           case 'PhoneNumber':
           case 'NumberInput':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldenpine/react-form-builder2",
-  "version": "0.20.3-build.32",
+  "version": "0.20.3-build.34",
   "description": "A complete form builder for react.",
   "main": "lib/index.js",
   "types": "types/index.d.ts",