@coorpacademy/components 11.13.4 → 11.13.6-alpha.4

package/es/atom/form-text-input/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FormTextInputProps } from './prop-types';
+declare const FormTextInput: {
+    ({ "aria-label": ariaLabel, autocomplete, "data-testid": dataTestid, disabled, hint, inputClassName, isRequired, label, maxlength, name, onChange, passwordRules, placeholder, type, value, equals, wrapperClassName }: FormTextInputProps): JSX.Element;
+    propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        autocomplete: import("prop-types").Requireable<string>;
+        'data-testid': import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        equals: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        hint: import("prop-types").Requireable<string>;
+        inputClassName: import("prop-types").Requireable<string>;
+        isRequired: import("prop-types").Requireable<boolean>;
+        label: import("prop-types").Requireable<string>;
+        maxlength: import("prop-types").Requireable<number>;
+        name: import("prop-types").Requireable<string>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        passwordRules: import("prop-types").Requireable<import("prop-types").InferProps<{
+            minLength: import("prop-types").Requireable<number>;
+        }>>;
+        placeholder: import("prop-types").Requireable<string>;
+        type: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        wrapperClassName: import("prop-types").Requireable<string>;
+    };
+};
+export default FormTextInput;
+//# sourceMappingURL=index.d.ts.map

package/es/atom/form-text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/index.tsx"],"names":[],"mappings":";AAYA,OAAkB,EAAa,kBAAkB,EAAY,MAAM,cAAc,CAAC;AAqBlF,QAAA,MAAM,aAAa;4NAkBhB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;CAyEpB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/es/atom/form-text-input/index.js

@@ -0,0 +1,113 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import classnames from 'classnames';
+import getOr from 'lodash/fp/getOr';
+import isEmpty from 'lodash/fp/isEmpty';
+import isEqual from 'lodash/fp/isEqual';
+import noop from 'lodash/fp/noop';
+import size from 'lodash/fp/size'; // import {
+//   NovaCompositionNavigationArrowRight as ArrowRight,
+//   NovaCompositionCoorpacademyInformationIcon as InformationIcon
+// } from '@coorpacademy/nova-icons';
+// import Provider, {GetTranslateFromContext} from '../provider';
+
+import propTypes, { TextInput } from './prop-types';
+import style from './style.css';
+
+const validate = (fieldValue, fieldEqualsValue) => {
+  return isEqual(fieldValue, fieldEqualsValue);
+};
+
+const VALID_EMAIL_PATTERN = /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
+const validatePattern = (fieldValue, pattern) => {
+  return pattern.test(fieldValue);
+};
+
+const DEFAULT_MIN_LENGTH = 8;
+
+const isEqualsDefined = equals => !isEmpty(equals); // autocorrect="off"
+// autocapitalize="none"
+// ng-pattern="/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/"
+
+
+const FormTextInput = ({
+  'aria-label': ariaLabel,
+  autocomplete,
+  'data-testid': dataTestid = 'form-text-input',
+  disabled,
+  hint,
+  inputClassName,
+  isRequired,
+  label,
+  maxlength = 150,
+  name,
+  onChange = noop,
+  passwordRules,
+  placeholder,
+  type = 'default',
+  value,
+  equals,
+  wrapperClassName
+}) => {
+  const [newValue, setNewValue] = useState(value);
+  const [isValid, setIsValid] = useState(true);
+  const isDefaultType = useMemo(() => !type || type === TextInput.default, [type]);
+  const isPasswordInput = useMemo(() => type === TextInput.password || type === TextInput.passwordConfirmation, [type]);
+  const isEmailInput = useMemo(() => type === TextInput.email, [type]);
+  const handleInputChange = useCallback(event => {
+    const newInput = event.target.value;
+    setNewValue(() => {
+      const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);
+      const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);
+      const passwordLengthCheck = !isPasswordInput || size(newInput) >= getOr(DEFAULT_MIN_LENGTH, ['minLength'], passwordRules);
+      setIsValid(passwordLengthCheck && isNewValueValid && validPattern);
+      return newInput;
+    });
+  }, [equals, isEmailInput, isPasswordInput, passwordRules]);
+  useEffect(() => {
+    onChange(newValue, isValid);
+    return;
+  }, [isValid, newValue, onChange]);
+  const fieldLabel = useMemo(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);
+  const errorStyle = useMemo(() => isValid ? undefined : {
+    border: '2px solid rgb(247, 63, 82)'
+  }, [isValid]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames(style.wrapper, wrapperClassName)
+  }, /*#__PURE__*/React.createElement("label", {
+    className: style.formLabel,
+    htmlFor: name
+  }, fieldLabel), /*#__PURE__*/React.createElement("input", _extends({}, !isPasswordInput && !isEmailInput && {
+    maxLength: maxlength
+  }, isEmailInput && {
+    autoCapitalize: 'none'
+  }, isRequired && {
+    required: true
+  }, !isValid && {
+    'aria-invalid': true
+  }, {
+    type: isDefaultType ? 'text' : type,
+    "aria-label": ariaLabel,
+    autoComplete: isDefaultType ? 'on' : autocomplete,
+    autoCorrect: 'off',
+    className: classnames(style.textInput, inputClassName),
+    "data-testid": dataTestid,
+    disabled: disabled,
+    id: name,
+    name: name,
+    onInput: handleInputChange,
+    placeholder: placeholder,
+    value: value,
+    style: errorStyle
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.hintWrapper
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.hint
+  }, hint)));
+};
+
+FormTextInput.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
+export default FormTextInput;
+//# sourceMappingURL=index.js.map

package/es/atom/form-text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useCallback","useMemo","useState","useEffect","classnames","getOr","isEmpty","isEqual","noop","size","propTypes","TextInput","style","validate","fieldValue","fieldEqualsValue","VALID_EMAIL_PATTERN","validatePattern","pattern","test","DEFAULT_MIN_LENGTH","isEqualsDefined","equals","FormTextInput","ariaLabel","autocomplete","dataTestid","disabled","hint","inputClassName","isRequired","label","maxlength","name","onChange","passwordRules","placeholder","type","value","wrapperClassName","newValue","setNewValue","isValid","setIsValid","isDefaultType","default","isPasswordInput","password","passwordConfirmation","isEmailInput","email","handleInputChange","event","newInput","target","isNewValueValid","validPattern","passwordLengthCheck","fieldLabel","errorStyle","undefined","border","wrapper","formLabel","maxLength","autoCapitalize","required","textInput","hintWrapper"],"sources":["../../../src/atom/form-text-input/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useEffect, FormEvent} from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport isEqual from 'lodash/fp/isEqual';\nimport noop from 'lodash/fp/noop';\nimport size from 'lodash/fp/size';\n// import {\n//   NovaCompositionNavigationArrowRight as ArrowRight,\n//   NovaCompositionCoorpacademyInformationIcon as InformationIcon\n// } from '@coorpacademy/nova-icons';\n// import Provider, {GetTranslateFromContext} from '../provider';\nimport propTypes, {FieldValue, FormTextInputProps, TextInput} from './prop-types';\nimport style from './style.css';\n\nconst validate = (fieldValue: FieldValue, fieldEqualsValue: FieldValue) => {\n  return isEqual(fieldValue, fieldEqualsValue);\n};\n\nconst VALID_EMAIL_PATTERN =\n  /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;\n\nconst validatePattern = (fieldValue: string, pattern: RegExp) => {\n  return pattern.test(fieldValue);\n};\n\nconst DEFAULT_MIN_LENGTH = 8;\n\nconst isEqualsDefined = (equals: FieldValue | undefined): equals is FieldValue => !isEmpty(equals);\n\n// autocorrect=\"off\"\n// autocapitalize=\"none\"\n// ng-pattern=\"/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/\"\nconst FormTextInput = ({\n  'aria-label': ariaLabel,\n  autocomplete,\n  'data-testid': dataTestid = 'form-text-input',\n  disabled,\n  hint,\n  inputClassName,\n  isRequired,\n  label,\n  maxlength = 150,\n  name,\n  onChange = noop,\n  passwordRules,\n  placeholder,\n  type = 'default',\n  value,\n  equals,\n  wrapperClassName\n}: FormTextInputProps) => {\n  const [newValue, setNewValue] = useState<FieldValue>(value);\n\n  const [isValid, setIsValid] = useState<boolean>(true);\n\n  const isDefaultType = useMemo(() => !type || type === TextInput.default, [type]);\n\n  const isPasswordInput = useMemo(\n    () => type === TextInput.password || type === TextInput.passwordConfirmation,\n    [type]\n  );\n\n  const isEmailInput = useMemo(() => type === TextInput.email, [type]);\n\n  const handleInputChange = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const newInput: FieldValue = (event.target as HTMLInputElement).value;\n      setNewValue(() => {\n        const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);\n        const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);\n        const passwordLengthCheck =\n          !isPasswordInput ||\n          size(newInput) >= getOr(DEFAULT_MIN_LENGTH, ['minLength'], passwordRules);\n\n        setIsValid(passwordLengthCheck && isNewValueValid && validPattern);\n\n        return newInput;\n      });\n    },\n    [equals, isEmailInput, isPasswordInput, passwordRules]\n  );\n\n  useEffect(() => {\n    onChange(newValue, isValid);\n    return;\n  }, [isValid, newValue, onChange]);\n\n  const fieldLabel = useMemo(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);\n\n  const errorStyle = useMemo(\n    () => (isValid ? undefined : {border: '2px solid rgb(247, 63, 82)'}),\n    [isValid]\n  );\n\n  return (\n    <div className={classnames(style.wrapper, wrapperClassName)}>\n      <label className={style.formLabel} htmlFor={name}>\n        {fieldLabel}\n      </label>\n      <input\n        {...(!isPasswordInput && !isEmailInput && {maxLength: maxlength})}\n        {...(isEmailInput && {autoCapitalize: 'none'})}\n        {...(isRequired && {required: true})}\n        {...(!isValid && {'aria-invalid': true})}\n        type={isDefaultType ? 'text' : type}\n        aria-label={ariaLabel}\n        autoComplete={isDefaultType ? 'on' : autocomplete}\n        autoCorrect={'off'}\n        className={classnames(style.textInput, inputClassName)}\n        data-testid={dataTestid}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onInput={handleInputChange}\n        placeholder={placeholder}\n        value={value}\n        style={errorStyle}\n      />\n      <div className={style.hintWrapper}>\n        <span className={style.hint}>{hint}</span>\n      </div>\n    </div>\n  );\n};\n\nFormTextInput.propTypes = propTypes;\n\nexport default FormTextInput;\n"],"mappings":"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"}

package/es/atom/form-text-input/prop-types.d.ts

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+export declare const TextInput: {
+    readonly country: "country";
+    readonly email: "email";
+    readonly firstName: "firstName";
+    readonly lastName: "lastName";
+    readonly language: "language";
+    readonly login: "login";
+    readonly password: "password";
+    readonly passwordConfirmation: "passwordConfirmation";
+    readonly default: "default";
+};
+declare const propTypes: {
+    'aria-label': PropTypes.Requireable<string>;
+    autocomplete: PropTypes.Requireable<string>;
+    'data-testid': PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    equals: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    hint: PropTypes.Requireable<string>;
+    inputClassName: PropTypes.Requireable<string>;
+    isRequired: PropTypes.Requireable<boolean>;
+    label: PropTypes.Requireable<string>;
+    maxlength: PropTypes.Requireable<number>;
+    name: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    passwordRules: PropTypes.Requireable<PropTypes.InferProps<{
+        minLength: PropTypes.Requireable<number>;
+    }>>;
+    placeholder: PropTypes.Requireable<string>;
+    type: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    wrapperClassName: PropTypes.Requireable<string>;
+};
+declare type TextInputType = keyof typeof TextInput;
+export declare type FieldValue = string | number;
+export declare type PasswordRulesConfig = {
+    minLength: number;
+};
+export declare type FormTextInputProps = {
+    'aria-label'?: string;
+    autocomplete?: string;
+    'data-testid'?: string;
+    disabled?: boolean;
+    equals?: FieldValue;
+    hint?: string;
+    inputClassName?: string | null;
+    isRequired?: boolean;
+    label: string;
+    maxlength?: number;
+    name: string;
+    onChange?: (value: FieldValue, isValid?: boolean) => void;
+    passwordRules?: PasswordRulesConfig;
+    placeholder?: string;
+    type?: TextInputType;
+    value: FieldValue;
+    wrapperClassName?: string | null;
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.d.ts.map

package/es/atom/form-text-input/prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,aAAK,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC;AAE5C,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,oBAAY,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/es/atom/form-text-input/prop-types.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import keys from 'lodash/fp/keys';
+export const TextInput = {
+  country: 'country',
+  email: 'email',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  language: 'language',
+  login: 'login',
+  password: 'password',
+  passwordConfirmation: 'passwordConfirmation',
+  default: 'default'
+};
+const propTypes = {
+  'aria-label': PropTypes.string,
+  autocomplete: PropTypes.string,
+  'data-testid': PropTypes.string,
+  disabled: PropTypes.bool,
+  equals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  hint: PropTypes.string,
+  inputClassName: PropTypes.string,
+  isRequired: PropTypes.bool,
+  label: PropTypes.string,
+  maxlength: PropTypes.number,
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  passwordRules: PropTypes.shape({
+    minLength: PropTypes.number
+  }),
+  placeholder: PropTypes.string,
+  type: PropTypes.oneOf(keys(TextInput)),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  wrapperClassName: PropTypes.string
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.js.map

package/es/atom/form-text-input/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["PropTypes","keys","TextInput","country","email","firstName","lastName","language","login","password","passwordConfirmation","default","propTypes","string","autocomplete","disabled","bool","equals","oneOfType","number","hint","inputClassName","isRequired","label","maxlength","name","onChange","func","passwordRules","shape","minLength","placeholder","type","oneOf","value","wrapperClassName"],"sources":["../../../src/atom/form-text-input/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport keys from 'lodash/fp/keys';\n\nexport const TextInput = {\n  country: 'country',\n  email: 'email',\n  firstName: 'firstName',\n  lastName: 'lastName',\n  language: 'language',\n  login: 'login',\n  password: 'password',\n  passwordConfirmation: 'passwordConfirmation',\n  default: 'default'\n} as const;\n\nconst propTypes = {\n  'aria-label': PropTypes.string,\n  autocomplete: PropTypes.string,\n  'data-testid': PropTypes.string,\n  disabled: PropTypes.bool,\n  equals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  hint: PropTypes.string,\n  inputClassName: PropTypes.string,\n  isRequired: PropTypes.bool,\n  label: PropTypes.string,\n  maxlength: PropTypes.number,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  passwordRules: PropTypes.shape({\n    minLength: PropTypes.number\n  }),\n  placeholder: PropTypes.string,\n  type: PropTypes.oneOf(keys(TextInput)),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  wrapperClassName: PropTypes.string\n};\n\ntype TextInputType = keyof typeof TextInput;\n\nexport type FieldValue = string | number;\n\nexport type PasswordRulesConfig = {\n  minLength: number;\n};\n\nexport type FormTextInputProps = {\n  'aria-label'?: string;\n  autocomplete?: string;\n  'data-testid'?: string;\n  disabled?: boolean;\n  equals?: FieldValue;\n  hint?: string;\n  inputClassName?: string | null;\n  isRequired?: boolean;\n  label: string;\n  maxlength?: number;\n  name: string;\n  onChange?: (value: FieldValue, isValid?: boolean) => void;\n  passwordRules?: PasswordRulesConfig;\n  placeholder?: string;\n  type?: TextInputType;\n  value: FieldValue;\n  wrapperClassName?: string | null;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,gBAAjB;AAEA,OAAO,MAAMC,SAAS,GAAG;EACvBC,OAAO,EAAE,SADc;EAEvBC,KAAK,EAAE,OAFgB;EAGvBC,SAAS,EAAE,WAHY;EAIvBC,QAAQ,EAAE,UAJa;EAKvBC,QAAQ,EAAE,UALa;EAMvBC,KAAK,EAAE,OANgB;EAOvBC,QAAQ,EAAE,UAPa;EAQvBC,oBAAoB,EAAE,sBARC;EASvBC,OAAO,EAAE;AATc,CAAlB;AAYP,MAAMC,SAAS,GAAG;EAChB,cAAcZ,SAAS,CAACa,MADR;EAEhBC,YAAY,EAAEd,SAAS,CAACa,MAFR;EAGhB,eAAeb,SAAS,CAACa,MAHT;EAIhBE,QAAQ,EAAEf,SAAS,CAACgB,IAJJ;EAKhBC,MAAM,EAAEjB,SAAS,CAACkB,SAAV,CAAoB,CAAClB,SAAS,CAACa,MAAX,EAAmBb,SAAS,CAACmB,MAA7B,CAApB,CALQ;EAMhBC,IAAI,EAAEpB,SAAS,CAACa,MANA;EAOhBQ,cAAc,EAAErB,SAAS,CAACa,MAPV;EAQhBS,UAAU,EAAEtB,SAAS,CAACgB,IARN;EAShBO,KAAK,EAAEvB,SAAS,CAACa,MATD;EAUhBW,SAAS,EAAExB,SAAS,CAACmB,MAVL;EAWhBM,IAAI,EAAEzB,SAAS,CAACa,MAXA;EAYhBa,QAAQ,EAAE1B,SAAS,CAAC2B,IAZJ;EAahBC,aAAa,EAAE5B,SAAS,CAAC6B,KAAV,CAAgB;IAC7BC,SAAS,EAAE9B,SAAS,CAACmB;EADQ,CAAhB,CAbC;EAgBhBY,WAAW,EAAE/B,SAAS,CAACa,MAhBP;EAiBhBmB,IAAI,EAAEhC,SAAS,CAACiC,KAAV,CAAgBhC,IAAI,CAACC,SAAD,CAApB,CAjBU;EAkBhBgC,KAAK,EAAElC,SAAS,CAACkB,SAAV,CAAoB,CAAClB,SAAS,CAACa,MAAX,EAAmBb,SAAS,CAACmB,MAA7B,CAApB,CAlBS;EAmBhBgB,gBAAgB,EAAEnC,SAAS,CAACa;AAnBZ,CAAlB;AAkDA,eAAeD,SAAf"}

package/es/atom/form-text-input/style.css

@@ -0,0 +1,53 @@
+@value colors: "../../variables/colors.css";
+@value dark from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_450 from colors;
+@value white from colors;
+
+.wrapper {
+  margin: 10px 0;
+  position: relative;
+  font-family: 'Gilroy';
+}
+
+.formLabel {
+  font-size: 13px;
+  text-align: left;
+  /* temporal */
+  color: dark;
+  display: block;
+  margin-bottom: 7px;
+  width: 100%;
+}
+
+.textInput {
+  width: 100%;
+  height: 59px;
+  background-color: white;
+  border: solid 1px cm_grey_450;
+  text-align: left;
+  margin-bottom: 26px;
+
+  appearance: none;
+  padding: 0 8px 0 15px;
+  border-radius: 0;
+
+  box-sizing: border-box;
+  cursor: text;
+
+  color: inherit;
+  font: inherit;
+  overflow: visible;
+}
+
+.hintWrapper {
+  font-size: 12px;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+
+.hint {
+  color: cm_grey_400;
+  text-align: left;
+  font-style: italic;
+}

package/es/molecule/questions/qcm-graphic/style.css

@@ -165,6 +165,7 @@
 .innerHTML {
   composes: innerHTML from '../../../atom/label/style.css'
 }
+
 .hiddenCheckbox {
-  opacity: 0;
+  display: none;
 }

package/lib/atom/form-text-input/index.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { FormTextInputProps } from './prop-types';
+declare const FormTextInput: {
+    ({ "aria-label": ariaLabel, autocomplete, "data-testid": dataTestid, disabled, hint, inputClassName, isRequired, label, maxlength, name, onChange, passwordRules, placeholder, type, value, equals, wrapperClassName }: FormTextInputProps): JSX.Element;
+    propTypes: {
+        'aria-label': import("prop-types").Requireable<string>;
+        autocomplete: import("prop-types").Requireable<string>;
+        'data-testid': import("prop-types").Requireable<string>;
+        disabled: import("prop-types").Requireable<boolean>;
+        equals: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        hint: import("prop-types").Requireable<string>;
+        inputClassName: import("prop-types").Requireable<string>;
+        isRequired: import("prop-types").Requireable<boolean>;
+        label: import("prop-types").Requireable<string>;
+        maxlength: import("prop-types").Requireable<number>;
+        name: import("prop-types").Requireable<string>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        passwordRules: import("prop-types").Requireable<import("prop-types").InferProps<{
+            minLength: import("prop-types").Requireable<number>;
+        }>>;
+        placeholder: import("prop-types").Requireable<string>;
+        type: import("prop-types").Requireable<string>;
+        value: import("prop-types").Requireable<NonNullable<string | number | null | undefined>>;
+        wrapperClassName: import("prop-types").Requireable<string>;
+    };
+};
+export default FormTextInput;
+//# sourceMappingURL=index.d.ts.map

package/lib/atom/form-text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/index.tsx"],"names":[],"mappings":";AAYA,OAAkB,EAAa,kBAAkB,EAAY,MAAM,cAAc,CAAC;AAqBlF,QAAA,MAAM,aAAa;4NAkBhB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;CAyEpB,CAAC;AAIF,eAAe,aAAa,CAAC"}

package/lib/atom/form-text-input/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _getOr = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
+
+var _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _size = _interopRequireDefault(require("lodash/fp/size"));
+
+var _propTypes = _interopRequireWildcard(require("./prop-types"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const validate = (fieldValue, fieldEqualsValue) => {
+  return (0, _isEqual.default)(fieldValue, fieldEqualsValue);
+};
+
+const VALID_EMAIL_PATTERN = /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
+const validatePattern = (fieldValue, pattern) => {
+  return pattern.test(fieldValue);
+};
+
+const DEFAULT_MIN_LENGTH = 8;
+
+const isEqualsDefined = equals => !(0, _isEmpty.default)(equals); // autocorrect="off"
+// autocapitalize="none"
+// ng-pattern="/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/"
+
+
+const FormTextInput = ({
+  'aria-label': ariaLabel,
+  autocomplete,
+  'data-testid': dataTestid = 'form-text-input',
+  disabled,
+  hint,
+  inputClassName,
+  isRequired,
+  label,
+  maxlength = 150,
+  name,
+  onChange = _noop.default,
+  passwordRules,
+  placeholder,
+  type = 'default',
+  value,
+  equals,
+  wrapperClassName
+}) => {
+  const [newValue, setNewValue] = (0, _react.useState)(value);
+  const [isValid, setIsValid] = (0, _react.useState)(true);
+  const isDefaultType = (0, _react.useMemo)(() => !type || type === _propTypes.TextInput.default, [type]);
+  const isPasswordInput = (0, _react.useMemo)(() => type === _propTypes.TextInput.password || type === _propTypes.TextInput.passwordConfirmation, [type]);
+  const isEmailInput = (0, _react.useMemo)(() => type === _propTypes.TextInput.email, [type]);
+  const handleInputChange = (0, _react.useCallback)(event => {
+    const newInput = event.target.value;
+    setNewValue(() => {
+      const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);
+      const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);
+      const passwordLengthCheck = !isPasswordInput || (0, _size.default)(newInput) >= (0, _getOr.default)(DEFAULT_MIN_LENGTH, ['minLength'], passwordRules);
+      setIsValid(passwordLengthCheck && isNewValueValid && validPattern);
+      return newInput;
+    });
+  }, [equals, isEmailInput, isPasswordInput, passwordRules]);
+  (0, _react.useEffect)(() => {
+    onChange(newValue, isValid);
+    return;
+  }, [isValid, newValue, onChange]);
+  const fieldLabel = (0, _react.useMemo)(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);
+  const errorStyle = (0, _react.useMemo)(() => isValid ? undefined : {
+    border: '2px solid rgb(247, 63, 82)'
+  }, [isValid]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(_style.default.wrapper, wrapperClassName)
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    className: _style.default.formLabel,
+    htmlFor: name
+  }, fieldLabel), /*#__PURE__*/_react.default.createElement("input", _extends({}, !isPasswordInput && !isEmailInput && {
+    maxLength: maxlength
+  }, isEmailInput && {
+    autoCapitalize: 'none'
+  }, isRequired && {
+    required: true
+  }, !isValid && {
+    'aria-invalid': true
+  }, {
+    type: isDefaultType ? 'text' : type,
+    "aria-label": ariaLabel,
+    autoComplete: isDefaultType ? 'on' : autocomplete,
+    autoCorrect: 'off',
+    className: (0, _classnames.default)(_style.default.textInput, inputClassName),
+    "data-testid": dataTestid,
+    disabled: disabled,
+    id: name,
+    name: name,
+    onInput: handleInputChange,
+    placeholder: placeholder,
+    value: value,
+    style: errorStyle
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.hintWrapper
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.hint
+  }, hint)));
+};
+
+FormTextInput.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+var _default = FormTextInput;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/form-text-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["validate","fieldValue","fieldEqualsValue","isEqual","VALID_EMAIL_PATTERN","validatePattern","pattern","test","DEFAULT_MIN_LENGTH","isEqualsDefined","equals","isEmpty","FormTextInput","ariaLabel","autocomplete","dataTestid","disabled","hint","inputClassName","isRequired","label","maxlength","name","onChange","noop","passwordRules","placeholder","type","value","wrapperClassName","newValue","setNewValue","useState","isValid","setIsValid","isDefaultType","useMemo","TextInput","default","isPasswordInput","password","passwordConfirmation","isEmailInput","email","handleInputChange","useCallback","event","newInput","target","isNewValueValid","validPattern","passwordLengthCheck","size","getOr","useEffect","fieldLabel","errorStyle","undefined","border","classnames","style","wrapper","formLabel","maxLength","autoCapitalize","required","textInput","hintWrapper","propTypes"],"sources":["../../../src/atom/form-text-input/index.tsx"],"sourcesContent":["import React, {useCallback, useMemo, useState, useEffect, FormEvent} from 'react';\nimport classnames from 'classnames';\nimport getOr from 'lodash/fp/getOr';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport isEqual from 'lodash/fp/isEqual';\nimport noop from 'lodash/fp/noop';\nimport size from 'lodash/fp/size';\n// import {\n//   NovaCompositionNavigationArrowRight as ArrowRight,\n//   NovaCompositionCoorpacademyInformationIcon as InformationIcon\n// } from '@coorpacademy/nova-icons';\n// import Provider, {GetTranslateFromContext} from '../provider';\nimport propTypes, {FieldValue, FormTextInputProps, TextInput} from './prop-types';\nimport style from './style.css';\n\nconst validate = (fieldValue: FieldValue, fieldEqualsValue: FieldValue) => {\n  return isEqual(fieldValue, fieldEqualsValue);\n};\n\nconst VALID_EMAIL_PATTERN =\n  /[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;\n\nconst validatePattern = (fieldValue: string, pattern: RegExp) => {\n  return pattern.test(fieldValue);\n};\n\nconst DEFAULT_MIN_LENGTH = 8;\n\nconst isEqualsDefined = (equals: FieldValue | undefined): equals is FieldValue => !isEmpty(equals);\n\n// autocorrect=\"off\"\n// autocapitalize=\"none\"\n// ng-pattern=\"/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/\"\nconst FormTextInput = ({\n  'aria-label': ariaLabel,\n  autocomplete,\n  'data-testid': dataTestid = 'form-text-input',\n  disabled,\n  hint,\n  inputClassName,\n  isRequired,\n  label,\n  maxlength = 150,\n  name,\n  onChange = noop,\n  passwordRules,\n  placeholder,\n  type = 'default',\n  value,\n  equals,\n  wrapperClassName\n}: FormTextInputProps) => {\n  const [newValue, setNewValue] = useState<FieldValue>(value);\n\n  const [isValid, setIsValid] = useState<boolean>(true);\n\n  const isDefaultType = useMemo(() => !type || type === TextInput.default, [type]);\n\n  const isPasswordInput = useMemo(\n    () => type === TextInput.password || type === TextInput.passwordConfirmation,\n    [type]\n  );\n\n  const isEmailInput = useMemo(() => type === TextInput.email, [type]);\n\n  const handleInputChange = useCallback(\n    (event: FormEvent<HTMLInputElement>) => {\n      const newInput: FieldValue = (event.target as HTMLInputElement).value;\n      setNewValue(() => {\n        const isNewValueValid = !isEqualsDefined(equals) || validate(newInput, equals);\n        const validPattern = !isEmailInput || validatePattern(newInput, VALID_EMAIL_PATTERN);\n        const passwordLengthCheck =\n          !isPasswordInput ||\n          size(newInput) >= getOr(DEFAULT_MIN_LENGTH, ['minLength'], passwordRules);\n\n        setIsValid(passwordLengthCheck && isNewValueValid && validPattern);\n\n        return newInput;\n      });\n    },\n    [equals, isEmailInput, isPasswordInput, passwordRules]\n  );\n\n  useEffect(() => {\n    onChange(newValue, isValid);\n    return;\n  }, [isValid, newValue, onChange]);\n\n  const fieldLabel = useMemo(() => `${label} ${isRequired ? '*' : ''}`, [isRequired, label]);\n\n  const errorStyle = useMemo(\n    () => (isValid ? undefined : {border: '2px solid rgb(247, 63, 82)'}),\n    [isValid]\n  );\n\n  return (\n    <div className={classnames(style.wrapper, wrapperClassName)}>\n      <label className={style.formLabel} htmlFor={name}>\n        {fieldLabel}\n      </label>\n      <input\n        {...(!isPasswordInput && !isEmailInput && {maxLength: maxlength})}\n        {...(isEmailInput && {autoCapitalize: 'none'})}\n        {...(isRequired && {required: true})}\n        {...(!isValid && {'aria-invalid': true})}\n        type={isDefaultType ? 'text' : type}\n        aria-label={ariaLabel}\n        autoComplete={isDefaultType ? 'on' : autocomplete}\n        autoCorrect={'off'}\n        className={classnames(style.textInput, inputClassName)}\n        data-testid={dataTestid}\n        disabled={disabled}\n        id={name}\n        name={name}\n        onInput={handleInputChange}\n        placeholder={placeholder}\n        value={value}\n        style={errorStyle}\n      />\n      <div className={style.hintWrapper}>\n        <span className={style.hint}>{hint}</span>\n      </div>\n    </div>\n  );\n};\n\nFormTextInput.propTypes = propTypes;\n\nexport default FormTextInput;\n"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;AACA;;;;;;;;;;AAEA,MAAMA,QAAQ,GAAG,CAACC,UAAD,EAAyBC,gBAAzB,KAA0D;EACzE,OAAO,IAAAC,gBAAA,EAAQF,UAAR,EAAoBC,gBAApB,CAAP;AACD,CAFD;;AAIA,MAAME,mBAAmB,GACvB,mIADF;;AAGA,MAAMC,eAAe,GAAG,CAACJ,UAAD,EAAqBK,OAArB,KAAyC;EAC/D,OAAOA,OAAO,CAACC,IAAR,CAAaN,UAAb,CAAP;AACD,CAFD;;AAIA,MAAMO,kBAAkB,GAAG,CAA3B;;AAEA,MAAMC,eAAe,GAAIC,MAAD,IAA0D,CAAC,IAAAC,gBAAA,EAAQD,MAAR,CAAnF,C,CAEA;AACA;AACA;;;AACA,MAAME,aAAa,GAAG,CAAC;EACrB,cAAcC,SADO;EAErBC,YAFqB;EAGrB,eAAeC,UAAU,GAAG,iBAHP;EAIrBC,QAJqB;EAKrBC,IALqB;EAMrBC,cANqB;EAOrBC,UAPqB;EAQrBC,KARqB;EASrBC,SAAS,GAAG,GATS;EAUrBC,IAVqB;EAWrBC,QAAQ,GAAGC,aAXU;EAYrBC,aAZqB;EAarBC,WAbqB;EAcrBC,IAAI,GAAG,SAdc;EAerBC,KAfqB;EAgBrBlB,MAhBqB;EAiBrBmB;AAjBqB,CAAD,KAkBI;EACxB,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAAqBJ,KAArB,CAAhC;EAEA,MAAM,CAACK,OAAD,EAAUC,UAAV,IAAwB,IAAAF,eAAA,EAAkB,IAAlB,CAA9B;EAEA,MAAMG,aAAa,GAAG,IAAAC,cAAA,EAAQ,MAAM,CAACT,IAAD,IAASA,IAAI,KAAKU,oBAAA,CAAUC,OAA1C,EAAmD,CAACX,IAAD,CAAnD,CAAtB;EAEA,MAAMY,eAAe,GAAG,IAAAH,cAAA,EACtB,MAAMT,IAAI,KAAKU,oBAAA,CAAUG,QAAnB,IAA+Bb,IAAI,KAAKU,oBAAA,CAAUI,oBADlC,EAEtB,CAACd,IAAD,CAFsB,CAAxB;EAKA,MAAMe,YAAY,GAAG,IAAAN,cAAA,EAAQ,MAAMT,IAAI,KAAKU,oBAAA,CAAUM,KAAjC,EAAwC,CAAChB,IAAD,CAAxC,CAArB;EAEA,MAAMiB,iBAAiB,GAAG,IAAAC,kBAAA,EACvBC,KAAD,IAAwC;IACtC,MAAMC,QAAoB,GAAID,KAAK,CAACE,MAAP,CAAmCpB,KAAhE;IACAG,WAAW,CAAC,MAAM;MAChB,MAAMkB,eAAe,GAAG,CAACxC,eAAe,CAACC,MAAD,CAAhB,IAA4BV,QAAQ,CAAC+C,QAAD,EAAWrC,MAAX,CAA5D;MACA,MAAMwC,YAAY,GAAG,CAACR,YAAD,IAAiBrC,eAAe,CAAC0C,QAAD,EAAW3C,mBAAX,CAArD;MACA,MAAM+C,mBAAmB,GACvB,CAACZ,eAAD,IACA,IAAAa,aAAA,EAAKL,QAAL,KAAkB,IAAAM,cAAA,EAAM7C,kBAAN,EAA0B,CAAC,WAAD,CAA1B,EAAyCiB,aAAzC,CAFpB;MAIAS,UAAU,CAACiB,mBAAmB,IAAIF,eAAvB,IAA0CC,YAA3C,CAAV;MAEA,OAAOH,QAAP;IACD,CAVU,CAAX;EAWD,CAduB,EAexB,CAACrC,MAAD,EAASgC,YAAT,EAAuBH,eAAvB,EAAwCd,aAAxC,CAfwB,CAA1B;EAkBA,IAAA6B,gBAAA,EAAU,MAAM;IACd/B,QAAQ,CAACO,QAAD,EAAWG,OAAX,CAAR;IACA;EACD,CAHD,EAGG,CAACA,OAAD,EAAUH,QAAV,EAAoBP,QAApB,CAHH;EAKA,MAAMgC,UAAU,GAAG,IAAAnB,cAAA,EAAQ,MAAO,GAAEhB,KAAM,IAAGD,UAAU,GAAG,GAAH,GAAS,EAAG,EAAhD,EAAmD,CAACA,UAAD,EAAaC,KAAb,CAAnD,CAAnB;EAEA,MAAMoC,UAAU,GAAG,IAAApB,cAAA,EACjB,MAAOH,OAAO,GAAGwB,SAAH,GAAe;IAACC,MAAM,EAAE;EAAT,CADZ,EAEjB,CAACzB,OAAD,CAFiB,CAAnB;EAKA,oBACE;IAAK,SAAS,EAAE,IAAA0B,mBAAA,EAAWC,cAAA,CAAMC,OAAjB,EAA0BhC,gBAA1B;EAAhB,gBACE;IAAO,SAAS,EAAE+B,cAAA,CAAME,SAAxB;IAAmC,OAAO,EAAExC;EAA5C,GACGiC,UADH,CADF,eAIE,mDACO,CAAChB,eAAD,IAAoB,CAACG,YAArB,IAAqC;IAACqB,SAAS,EAAE1C;EAAZ,CAD5C,EAEOqB,YAAY,IAAI;IAACsB,cAAc,EAAE;EAAjB,CAFvB,EAGO7C,UAAU,IAAI;IAAC8C,QAAQ,EAAE;EAAX,CAHrB,EAIO,CAAChC,OAAD,IAAY;IAAC,gBAAgB;EAAjB,CAJnB;IAKE,IAAI,EAAEE,aAAa,GAAG,MAAH,GAAYR,IALjC;IAME,cAAYd,SANd;IAOE,YAAY,EAAEsB,aAAa,GAAG,IAAH,GAAUrB,YAPvC;IAQE,WAAW,EAAE,KARf;IASE,SAAS,EAAE,IAAA6C,mBAAA,EAAWC,cAAA,CAAMM,SAAjB,EAA4BhD,cAA5B,CATb;IAUE,eAAaH,UAVf;IAWE,QAAQ,EAAEC,QAXZ;IAYE,EAAE,EAAEM,IAZN;IAaE,IAAI,EAAEA,IAbR;IAcE,OAAO,EAAEsB,iBAdX;IAeE,WAAW,EAAElB,WAff;IAgBE,KAAK,EAAEE,KAhBT;IAiBE,KAAK,EAAE4B;EAjBT,GAJF,eAuBE;IAAK,SAAS,EAAEI,cAAA,CAAMO;EAAtB,gBACE;IAAM,SAAS,EAAEP,cAAA,CAAM3C;EAAvB,GAA8BA,IAA9B,CADF,CAvBF,CADF;AA6BD,CA3FD;;AA6FAL,aAAa,CAACwD,SAAd,2CAA0BA,kBAA1B;eAEexD,a"}

package/lib/atom/form-text-input/prop-types.d.ts

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+export declare const TextInput: {
+    readonly country: "country";
+    readonly email: "email";
+    readonly firstName: "firstName";
+    readonly lastName: "lastName";
+    readonly language: "language";
+    readonly login: "login";
+    readonly password: "password";
+    readonly passwordConfirmation: "passwordConfirmation";
+    readonly default: "default";
+};
+declare const propTypes: {
+    'aria-label': PropTypes.Requireable<string>;
+    autocomplete: PropTypes.Requireable<string>;
+    'data-testid': PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    equals: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    hint: PropTypes.Requireable<string>;
+    inputClassName: PropTypes.Requireable<string>;
+    isRequired: PropTypes.Requireable<boolean>;
+    label: PropTypes.Requireable<string>;
+    maxlength: PropTypes.Requireable<number>;
+    name: PropTypes.Requireable<string>;
+    onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    passwordRules: PropTypes.Requireable<PropTypes.InferProps<{
+        minLength: PropTypes.Requireable<number>;
+    }>>;
+    placeholder: PropTypes.Requireable<string>;
+    type: PropTypes.Requireable<string>;
+    value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    wrapperClassName: PropTypes.Requireable<string>;
+};
+declare type TextInputType = keyof typeof TextInput;
+export declare type FieldValue = string | number;
+export declare type PasswordRulesConfig = {
+    minLength: number;
+};
+export declare type FormTextInputProps = {
+    'aria-label'?: string;
+    autocomplete?: string;
+    'data-testid'?: string;
+    disabled?: boolean;
+    equals?: FieldValue;
+    hint?: string;
+    inputClassName?: string | null;
+    isRequired?: boolean;
+    label: string;
+    maxlength?: number;
+    name: string;
+    onChange?: (value: FieldValue, isValid?: boolean) => void;
+    passwordRules?: PasswordRulesConfig;
+    placeholder?: string;
+    type?: TextInputType;
+    value: FieldValue;
+    wrapperClassName?: string | null;
+};
+export default propTypes;
+//# sourceMappingURL=prop-types.d.ts.map

package/lib/atom/form-text-input/prop-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/form-text-input/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;CAUZ,CAAC;AAEX,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAoBd,CAAC;AAEF,aAAK,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC;AAE5C,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAEzC,oBAAY,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,oBAAY,kBAAkB,GAAG;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1D,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,UAAU,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAClC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/atom/form-text-input/prop-types.js

@@ -0,0 +1,47 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.TextInput = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _keys = _interopRequireDefault(require("lodash/fp/keys"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const TextInput = {
+  country: 'country',
+  email: 'email',
+  firstName: 'firstName',
+  lastName: 'lastName',
+  language: 'language',
+  login: 'login',
+  password: 'password',
+  passwordConfirmation: 'passwordConfirmation',
+  default: 'default'
+};
+exports.TextInput = TextInput;
+const propTypes = {
+  'aria-label': _propTypes.default.string,
+  autocomplete: _propTypes.default.string,
+  'data-testid': _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  equals: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  hint: _propTypes.default.string,
+  inputClassName: _propTypes.default.string,
+  isRequired: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  maxlength: _propTypes.default.number,
+  name: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  passwordRules: _propTypes.default.shape({
+    minLength: _propTypes.default.number
+  }),
+  placeholder: _propTypes.default.string,
+  type: _propTypes.default.oneOf((0, _keys.default)(TextInput)),
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  wrapperClassName: _propTypes.default.string
+};
+var _default = propTypes;
+exports.default = _default;
+//# sourceMappingURL=prop-types.js.map

package/lib/atom/form-text-input/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prop-types.js","names":["TextInput","country","email","firstName","lastName","language","login","password","passwordConfirmation","default","propTypes","PropTypes","string","autocomplete","disabled","bool","equals","oneOfType","number","hint","inputClassName","isRequired","label","maxlength","name","onChange","func","passwordRules","shape","minLength","placeholder","type","oneOf","keys","value","wrapperClassName"],"sources":["../../../src/atom/form-text-input/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\nimport keys from 'lodash/fp/keys';\n\nexport const TextInput = {\n  country: 'country',\n  email: 'email',\n  firstName: 'firstName',\n  lastName: 'lastName',\n  language: 'language',\n  login: 'login',\n  password: 'password',\n  passwordConfirmation: 'passwordConfirmation',\n  default: 'default'\n} as const;\n\nconst propTypes = {\n  'aria-label': PropTypes.string,\n  autocomplete: PropTypes.string,\n  'data-testid': PropTypes.string,\n  disabled: PropTypes.bool,\n  equals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  hint: PropTypes.string,\n  inputClassName: PropTypes.string,\n  isRequired: PropTypes.bool,\n  label: PropTypes.string,\n  maxlength: PropTypes.number,\n  name: PropTypes.string,\n  onChange: PropTypes.func,\n  passwordRules: PropTypes.shape({\n    minLength: PropTypes.number\n  }),\n  placeholder: PropTypes.string,\n  type: PropTypes.oneOf(keys(TextInput)),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  wrapperClassName: PropTypes.string\n};\n\ntype TextInputType = keyof typeof TextInput;\n\nexport type FieldValue = string | number;\n\nexport type PasswordRulesConfig = {\n  minLength: number;\n};\n\nexport type FormTextInputProps = {\n  'aria-label'?: string;\n  autocomplete?: string;\n  'data-testid'?: string;\n  disabled?: boolean;\n  equals?: FieldValue;\n  hint?: string;\n  inputClassName?: string | null;\n  isRequired?: boolean;\n  label: string;\n  maxlength?: number;\n  name: string;\n  onChange?: (value: FieldValue, isValid?: boolean) => void;\n  passwordRules?: PasswordRulesConfig;\n  placeholder?: string;\n  type?: TextInputType;\n  value: FieldValue;\n  wrapperClassName?: string | null;\n};\n\nexport default propTypes;\n"],"mappings":";;;;;AAAA;;AACA;;;;AAEO,MAAMA,SAAS,GAAG;EACvBC,OAAO,EAAE,SADc;EAEvBC,KAAK,EAAE,OAFgB;EAGvBC,SAAS,EAAE,WAHY;EAIvBC,QAAQ,EAAE,UAJa;EAKvBC,QAAQ,EAAE,UALa;EAMvBC,KAAK,EAAE,OANgB;EAOvBC,QAAQ,EAAE,UAPa;EAQvBC,oBAAoB,EAAE,sBARC;EASvBC,OAAO,EAAE;AATc,CAAlB;;AAYP,MAAMC,SAAS,GAAG;EAChB,cAAcC,kBAAA,CAAUC,MADR;EAEhBC,YAAY,EAAEF,kBAAA,CAAUC,MAFR;EAGhB,eAAeD,kBAAA,CAAUC,MAHT;EAIhBE,QAAQ,EAAEH,kBAAA,CAAUI,IAJJ;EAKhBC,MAAM,EAAEL,kBAAA,CAAUM,SAAV,CAAoB,CAACN,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUO,MAA7B,CAApB,CALQ;EAMhBC,IAAI,EAAER,kBAAA,CAAUC,MANA;EAOhBQ,cAAc,EAAET,kBAAA,CAAUC,MAPV;EAQhBS,UAAU,EAAEV,kBAAA,CAAUI,IARN;EAShBO,KAAK,EAAEX,kBAAA,CAAUC,MATD;EAUhBW,SAAS,EAAEZ,kBAAA,CAAUO,MAVL;EAWhBM,IAAI,EAAEb,kBAAA,CAAUC,MAXA;EAYhBa,QAAQ,EAAEd,kBAAA,CAAUe,IAZJ;EAahBC,aAAa,EAAEhB,kBAAA,CAAUiB,KAAV,CAAgB;IAC7BC,SAAS,EAAElB,kBAAA,CAAUO;EADQ,CAAhB,CAbC;EAgBhBY,WAAW,EAAEnB,kBAAA,CAAUC,MAhBP;EAiBhBmB,IAAI,EAAEpB,kBAAA,CAAUqB,KAAV,CAAgB,IAAAC,aAAA,EAAKjC,SAAL,CAAhB,CAjBU;EAkBhBkC,KAAK,EAAEvB,kBAAA,CAAUM,SAAV,CAAoB,CAACN,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUO,MAA7B,CAApB,CAlBS;EAmBhBiB,gBAAgB,EAAExB,kBAAA,CAAUC;AAnBZ,CAAlB;eAkDeF,S"}

package/lib/atom/form-text-input/style.css

@@ -0,0 +1,53 @@
+@value colors: "../../variables/colors.css";
+@value dark from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_450 from colors;
+@value white from colors;
+
+.wrapper {
+  margin: 10px 0;
+  position: relative;
+  font-family: 'Gilroy';
+}
+
+.formLabel {
+  font-size: 13px;
+  text-align: left;
+  /* temporal */
+  color: dark;
+  display: block;
+  margin-bottom: 7px;
+  width: 100%;
+}
+
+.textInput {
+  width: 100%;
+  height: 59px;
+  background-color: white;
+  border: solid 1px cm_grey_450;
+  text-align: left;
+  margin-bottom: 26px;
+
+  appearance: none;
+  padding: 0 8px 0 15px;
+  border-radius: 0;
+
+  box-sizing: border-box;
+  cursor: text;
+
+  color: inherit;
+  font: inherit;
+  overflow: visible;
+}
+
+.hintWrapper {
+  font-size: 12px;
+  margin-top: -20px;
+  margin-bottom: 20px;
+}
+
+.hint {
+  color: cm_grey_400;
+  text-align: left;
+  font-style: italic;
+}

package/lib/molecule/questions/qcm-graphic/style.css

@@ -165,6 +165,7 @@
 .innerHTML {
   composes: innerHTML from '../../../atom/label/style.css'
 }
+
 .hiddenCheckbox {
-  opacity: 0;
+  display: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.13.4",
+  "version": "11.13.6-alpha.4+04c04f1af",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -166,5 +166,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "b34004d19bb58f3353279981952655008cc3004a"
+  "gitHead": "04c04f1afd7592264895a6ff26be7300e0bc64b4"
 }

package/locales/.mtslconfig.json

@@ -1 +0,0 @@
-{"ignore_dirs":[]}