@essential-js/ui/form/form.amd.js

EssentialJS UI

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "iconsax-react"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.hmr = _exports.formController = _exports.__beyond_pkg = _exports.ValidateInput = _exports.Textarea = _exports.Switch = _exports.Input = _exports.Controller = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "@essential-js/ui@1.0.0/form"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['iconsax-react', dependency_3]]);
  brequire('@beyond-js/kernel/styles').styles.register('@essential-js/ui@1.0.0/form');
  const ims = new Map();

  /**********************************
  INTERNAL MODULE: ./controller/index
  **********************************/

  ims.set('./controller/index', {
    hash: 3867061899,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Controller = Controller;
      var React = require("react");
      var _model = require("./model");
      /*bundle*/
      function Controller({
        template
      }) {
        const isTemplateAnArray = Array.isArray(template);
        const SingleInput = (!isTemplateAnArray && _model.formController[template.type]) ?? _model.formController.default;
        const inputs = isTemplateAnArray && template.map(input => {
          const Element = _model.formController[input.type] ?? _model.formController.default;
          return React.createElement(Element, {
            key: input.name,
            ...input,
            _components: _model.formController
          });
        });
        const output = isTemplateAnArray ? inputs : React.createElement(SingleInput, {
          ...template
        });
        return React.createElement(React.Fragment, null, output);
      }
    }
  });

  /**********************************
  INTERNAL MODULE: ./controller/model
  **********************************/

  ims.set('./controller/model', {
    hash: 2137315958,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.formController = void 0;
      var _input = require("../input");
      var _textarea = require("../textarea");
      class FormController {
        textarea = _textarea.Textarea;
        radioItem = _input.Input;
        checkItem = _input.Input;
        default = _input.Input;
        setComponent(type, component) {
          this[type] = component;
        }
      }
      /*bundle*/
      const formController = new FormController();
      exports.formController = formController;
    }
  });

  /***********************
  INTERNAL MODULE: ./input
  ***********************/

  ims.set('./input', {
    hash: 3982942507,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Input = Input;
      var _react = require("react");
      var _iconsaxReact = require("iconsax-react");
      const PASSWORD_TYPE = 'password';
      const TEXT_TYPE = 'text';
      /*bundle*/
      function Input({
        label,
        after = null,
        before = null,
        inputClassName,
        ...props
      }) {
        const [customType, setCustomType] = _react.default.useState(props.type);
        const [showPassword, setShowPassword] = _react.default.useState(false);
        const isPasswordType = props.type === PASSWORD_TYPE;
        function toggleDisplayPassword() {
          setShowPassword(!showPassword);
          const newType = customType === PASSWORD_TYPE ? TEXT_TYPE : PASSWORD_TYPE;
          setCustomType(newType);
        }
        const Icon = isPasswordType && (showPassword ? _iconsaxReact.EyeSlash : _iconsaxReact.Eye);
        return _react.default.createElement("div", {
          className: `essential__input ${props.className}`
        }, before && _react.default.createElement("div", {
          className: "before has-icon"
        }, before), _react.default.createElement("div", {
          className: "input__container"
        }, _react.default.createElement("input", {
          ...props,
          type: customType,
          className: inputClassName
        }), Icon && _react.default.createElement(Icon, {
          className: "password__icon",
          onClick: toggleDisplayPassword
        }), _react.default.createElement("label", {
          htmlFor: props.id
        }, label)), after && _react.default.createElement("div", {
          className: "after has-icon"
        }, after));
      }
    }
  });

  /************************
  INTERNAL MODULE: ./swtich
  ************************/

  ims.set('./swtich', {
    hash: 1560921659,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Switch = Switch;
      var _react = require("react");
      /*bundle*/
      function Switch({
        checked,
        ...props
      }) {
        const cls = checked ? 'checked' : 'unchecked';
        return _react.default.createElement("button", {
          className: `essential__switch ${cls} ${props.className}`,
          ...props
        }, _react.default.createElement("div", {
          className: "indicator"
        }));
      }
    }
  });

  /**************************
  INTERNAL MODULE: ./textarea
  **************************/

  ims.set('./textarea', {
    hash: 2155008208,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Textarea = Textarea;
      var _react = require("react");
      /*bundle*/
      function Textarea({
        label,
        inputClassName,
        ...props
      }) {
        return _react.default.createElement("div", {
          className: `essential__textarea ${props.className}`
        }, _react.default.createElement("textarea", {
          id: "textarea",
          ...props,
          className: inputClassName
        }), _react.default.createElement("label", {
          htmlFor: "textarea"
        }, label));
      }
    }
  });

  /********************************
  INTERNAL MODULE: ./validate-input
  ********************************/

  ims.set('./validate-input', {
    hash: 2535927001,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.ValidateInput = ValidateInput;
      var _react = require("react");
      var _input = require("./input");
      /*bundle*/
      function ValidateInput({
        isOk,
        label,
        errorMessage,
        successMessage,
        inputClassName,
        ...props
      }) {
        const displayMessage = props.value;
        const cls = !isOk ? 'wrong' : 'ok';
        const messageCls = !isOk ? 'error' : 'success';
        const messageToDisplay = isOk ? successMessage : errorMessage;
        const displayMessageCls = displayMessage ? 'display-message' : '';
        return _react.default.createElement("div", {
          className: `essential__validate-input ${cls} ${displayMessageCls}`
        }, _react.default.createElement(_input.Input, {
          ...props,
          inputClassName: inputClassName,
          label: label
        }), _react.default.createElement("span", {
          className: `message ${messageCls}`
        }, messageToDisplay));
      }
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./controller/index",
    "from": "Controller",
    "name": "Controller"
  }, {
    "im": "./controller/model",
    "from": "formController",
    "name": "formController"
  }, {
    "im": "./input",
    "from": "Input",
    "name": "Input"
  }, {
    "im": "./swtich",
    "from": "Switch",
    "name": "Switch"
  }, {
    "im": "./textarea",
    "from": "Textarea",
    "name": "Textarea"
  }, {
    "im": "./validate-input",
    "from": "ValidateInput",
    "name": "ValidateInput"
  }];
  let Controller, formController, Input, Switch, Textarea, ValidateInput;

  // Module exports
  _exports.ValidateInput = ValidateInput;
  _exports.Textarea = Textarea;
  _exports.Switch = Switch;
  _exports.Input = Input;
  _exports.formController = formController;
  _exports.Controller = Controller;
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'Controller') && (_exports.Controller = Controller = require ? require('./controller/index').Controller : value);
    (require || prop === 'formController') && (_exports.formController = formController = require ? require('./controller/model').formController : value);
    (require || prop === 'Input') && (_exports.Input = Input = require ? require('./input').Input : value);
    (require || prop === 'Switch') && (_exports.Switch = Switch = require ? require('./swtich').Switch : value);
    (require || prop === 'Textarea') && (_exports.Textarea = Textarea = require ? require('./textarea').Textarea : value);
    (require || prop === 'ValidateInput') && (_exports.ValidateInput = ValidateInput = require ? require('./validate-input').ValidateInput : value);
  };
  const __beyond_pkg = __pkg;
  _exports.__beyond_pkg = __beyond_pkg;
  const hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  _exports.hmr = hmr;
  __pkg.initialise(ims);
});
//# sourceMappingURL=form.amd.js.map