@goldenpine/react-form-builder2 0.20.3-build.31 → 0.20.3-build.33

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-elements-edit.js

@@ -173,7 +173,7 @@ var FormElementsEdit = exports["default"] = /*#__PURE__*/function (_React$Compon
         canHaveOptionValue = _this$props$element.canHaveOptionValue;
       var canHaveImageSize = this.state.element.element === 'Image' || this.state.element.element === 'Camera';
       var canHaveUploadLayout = this.state.element.element === 'Camera' || this.state.element.element === 'FileUpload';
-      var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber';
+      var canHavePlaceholder = this.props.element.element === 'TextInput' || this.props.element.element === 'TextArea' || this.props.element.element === 'EmailInput' || this.props.element.element === 'NumberInput' || this.props.element.element === 'PhoneNumber' || this.props.element.element === 'SensitiveInput';
       var this_files = this.props.files.length ? this.props.files : [];
       if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== '') {
         this_files.unshift({

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/lib/language-provider/locales/en-us.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Checkboxes",
   "multiple-choice":"Multiple Choice",
   "text-input":"Text Input",
+  "sensitive-input":"Sensitive Input",
   "email-input":"Email",
   "phone-input":"Phone Number",
   "number-input":"Number Input",

package/lib/language-provider/locales/fa-ir.json

@@ -79,6 +79,7 @@
   "checkboxes": "چک‌ باکس‌ها",
   "multiple-choice": "چند گزینه‌ای",
   "text-input": "ورودی متن",
+  "sensitive-input": "ورودی حساس",
   "email-input": "ایمیل",
   "phone-input": "شماره تلفن",
   "number-input": "ورودی عدد",

package/lib/language-provider/locales/it-it.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Checkboxes",
   "multiple-choice":"Scelta multipla",
   "text-input":"Input testo",
+  "sensitive-input":"Input sensibile",
   "email-input":"Email",
   "phone-input":"Numero di telefono",
   "number-input":"Input numerico",

package/lib/language-provider/locales/vi-vn.json

@@ -79,6 +79,7 @@
   "checkboxes" : "Hộp chọn",
   "multiple-choice":"Nhiều lựa chọn",
   "text-input":"Nhập chữ",
+  "sensitive-input":"Nhập dữ liệu nhạy cảm",
   "email-input": "Email",
   "phone-input": "Số điện thoại",
   "number-input":"Nhập số",

package/lib/sortable-form-elements.js

@@ -16,6 +16,7 @@ var Header = _formElements["default"].Header,
   Label = _formElements["default"].Label,
   LineBreak = _formElements["default"].LineBreak,
   TextInput = _formElements["default"].TextInput,
+  SensitiveInput = _formElements["default"].SensitiveInput,
   EmailInput = _formElements["default"].EmailInput,
   PhoneNumber = _formElements["default"].PhoneNumber,
   NumberInput = _formElements["default"].NumberInput,
@@ -39,6 +40,7 @@ FormElements.Paragraph = (0, _sortableElement["default"])(Paragraph);
 FormElements.Label = (0, _sortableElement["default"])(Label);
 FormElements.LineBreak = (0, _sortableElement["default"])(LineBreak);
 FormElements.TextInput = (0, _sortableElement["default"])(TextInput);
+FormElements.SensitiveInput = (0, _sortableElement["default"])(SensitiveInput);
 FormElements.EmailInput = (0, _sortableElement["default"])(EmailInput);
 FormElements.PhoneNumber = (0, _sortableElement["default"])(PhoneNumber);
 FormElements.NumberInput = (0, _sortableElement["default"])(NumberInput);

package/lib/toolbar.js

@@ -245,6 +245,17 @@ var Toolbar = /*#__PURE__*/function (_React$Component) {
         }),
         icon: 'fas fa-phone',
         field_name: 'phone_input_'
+      }, {
+        key: 'SensitiveInput',
+        canHaveAnswer: true,
+        name: intl.formatMessage({
+          id: 'sensitive-input'
+        }),
+        label: intl.formatMessage({
+          id: 'place-holder-label'
+        }),
+        icon: 'fas fa-lock',
+        field_name: 'sensitive_input_'
       }, {
         key: 'TextArea',
         canHaveAnswer: true,

package/package.json

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

package/types/index.d.ts

@@ -13,6 +13,9 @@ type BaseElement = {
     | "Checkboxes"
     | "Multiple Choice"
     | "Text Input"
+    | "Sensitive Input"
+    | "Email Input"
+    | "Phone Number"
     | "Number Input"
     | "Multi-line Input"
     | "Two Column Row"