{"_id":"@advanced-rest-client/validatable-mixin","_rev":"10-b212b7a8fef66bf6f82debf5e553c3aa","name":"@advanced-rest-client/validatable-mixin","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@advanced-rest-client/validatable-mixin","version":"1.0.0","keywords":["api-components","arc-components","forms","validation","web-components"],"license":"Apache-2.0","_id":"@advanced-rest-client/validatable-mixin@1.0.0","maintainers":[{"name":"jarrodek","email":"jarrodek@gmail.com"}],"contributors":[{"name":"Pawel Psztyc"},{"name":"The Advanced REST client authors","email":"arc@mulesoft.com"}],"homepage":"https://github.com/advanced-rest-client/validatable-mixin#readme","bugs":{"url":"https://github.com/advanced-rest-client/validatable-mixin/issues","email":"arc@mulesoft.com"},"dist":{"shasum":"1de67c0dd9cb22308639a952d0f749105a01ef34","tarball":"https://registry.npmjs.org/@advanced-rest-client/validatable-mixin/-/validatable-mixin-1.0.0.tgz","fileCount":5,"integrity":"sha512-qarIs4y4HxJ6t1qTO4//SHBxrwp6zmu20tbDLA79BoqS4h7FX91XZReo0tWFtq4km3foSLNmWk55gIT+BNVO+A==","signatures":[{"sig":"MEUCIAydY1TvJ1mzX1k5hp9lRlpLtcXAyRnRhPicNxFXSmAUAiEA2JHs5gy+gMaCU4eiSq9MTEnYmXVIBy+Ej7rmfyBoaaE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12448,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdDJOBCRA9TVsSAnZWagAAwBkQAIv4NTL13faJKL6YFn10\nNB/v+1N6fUVXtt5nxvpHjqe/QSsb2VRG3Ni+FQRhJ/FMmHxwEnMVgJaSnAjw\nHeptSg0VFOkwJ/6qm/oZGUmKkbyyyyUg8ok6H8aFmdojLDHsJ8eNWIjJjwnB\nowWqXCvzRlFWOr3I5c7f99YLkX5f32DzVmGY1gMoCLiaPdsm0UZP0qTysajZ\neOUuIk7EOf3XWIH0WtpjD0gJsci6+KigwmtDTFyYpyaFM3ElicsFPM6qfPvM\nv42f/zxDP1hBhRzgU+WPE+HdKDrOfa7jK8YQ9trtGKQ14B53XoKajVrRhG+Q\nihiWeg/wU7sRyLcTdX0poAklyE2s7bW7EUofaOaIUT8PhxCfR2ijwLgLGqZw\nt0ZBnjrMPTD5BHjTw4LHZbbMaGYGs10bOIuXiV7Rph1tw9lp78HY/ur9tzBJ\ngLJe4xwoesgzHqW9jKZowlp89cDBsdx6mRE9Fo52qT4REE1CvEfrmikviJVe\nCWKjuKGdjSydGWAkSIL9JW9oJiUGi+q2gzXLjUd/PmdQ3IJN/6Ouuaq5TZko\n1axw9oGRqGI8QF8wv8bCMhAsfL90y+MdGif0Wp5Q5TSlKnslpBuKyMccJFyT\nLVgL7s57yl2UBaRpNRPJKer22dz7w08gSgdwkx0PVy+XeHLFVOcK+hzriFaG\n4pLx\r\n=HGxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"validatable-mixin.js","authors":["Pawel Psztyc","The Advanced REST client authors <arc@mulesoft.com>"],"gitHead":"173bbb976cf7626986e84de0856bb49cde48eec2","scripts":{"test":"karma start --coverage","start":"owc-dev-server --open demo","test:sl":"karma start karma.sl.config.js --legacy --coverage","test:watch":"karma start --auto-watch=true --single-run=false","test:legacy":"karma start --legacy --coverage","update-types":"gen-typescript-declarations --deleteExisting --outDir .","test:legacy:watch":"karma start --legacy --auto-watch=true --single-run=false"},"_npmUser":{"name":"jarrodek","email":"jarrodek@gmail.com"},"deprecated":"This package is not maintained. Use  instead.","repository":{"url":"git://github.com/advanced-rest-client/validatable-mixin.git","type":"git"},"_npmVersion":"6.9.0","description":"A mixin to implement user input validation in a LitElement component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@polymer/iron-meta":"^3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"lit-html":"^1.0.0","lit-element":"^2.0.1","webpack-merge":"^4.1.5","owc-dev-server":"^1.0.0","@open-wc/testing":"^0.11.1","@open-wc/testing-karma":"^2.0.0","@advanced-rest-client/arc-demo-helper":"^1.0.3","@advanced-rest-client/validator-mixin":"^1.0.0","@advanced-rest-client/testing-karma-sl":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/validatable-mixin_1.0.0_1561105280589_0.073335380747092","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@advanced-rest-client/validatable-mixin","version":"1.0.1","keywords":["api-components","arc-components","forms","validation","web-components"],"license":"Apache-2.0","_id":"@advanced-rest-client/validatable-mixin@1.0.1","maintainers":[{"name":"jarrodek","email":"jarrodek@gmail.com"}],"contributors":[{"name":"Pawel Psztyc"},{"name":"The Advanced REST client authors","email":"arc@mulesoft.com"}],"homepage":"https://github.com/advanced-rest-client/validatable-mixin#readme","bugs":{"url":"https://github.com/advanced-rest-client/validatable-mixin/issues","email":"arc@mulesoft.com"},"dist":{"shasum":"bae030591f461587834dd71f82249fe19c4f6c46","tarball":"https://registry.npmjs.org/@advanced-rest-client/validatable-mixin/-/validatable-mixin-1.0.1.tgz","fileCount":5,"integrity":"sha512-qiCz4unxNwPmypKupRujxM5bUF50jsevgDCcCfwdYLWwDMHjc7Sm2gfvYNLTlECSLDXNiwtlVZ3Ihg+FePi3uQ==","signatures":[{"sig":"MEQCIGYRxiYtPpnHwtvILGjP8Bp2oB9DUytPUw8XuWEnsiTAAiB6Q+wtXi1dOifOi9MiClbmCF65fkEeL1j96BY9kJr9zA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEAzkCRA9TVsSAnZWagAAV94QAJclLz00y8PIZL9smlic\n2PibFzlR3/ut70sukXLAXhzWPRyR6qabJ9muLTeTBxIidR/uhFIaX2fpj73I\nAdRZ1E5Ak8hAdb8qEcFU+QBVmngNTFHxdXXn4vqwnRDtB6u4nxAbOFYPtQJt\nWuzL3fkU5Pf0+xoMTKF9iNPdVBleY4akAjNhtmdwuwbvYN9KWPBtUgdIQlws\n1vWaZGR719EL5+hdX5hGiZ+B5b5Wh0+QX8vzxfbgzfY+q6ZimFWZOU19wDl4\nsu2dFexafb8R+4iOAtZH2xjqODsbUSk1XKqq99gKUFxatB00M2VlvGfBMsDS\n3pejmFR8MpeFL2pXG0ud8oGFxFBGhDSPTUkIGu2/dGT7CJkvdJlDmpnpFIpE\nEAnSUv6eR9hR5/HkDh4iyiz56CxPPhir6U7RUo8905kGMemHU/H8brLdiCog\nAluMQkZuGlE/35bTKMXB7rC7KLFe7bu7XWWdIVGzwpH91+2ASjuSXvJs5ghY\nuVWIbrn6PdybekjggkFvECRFEHrVieMfWM6N5aIcC0BhB5LxZvbj8q5a5zg+\nY2yCO8I0rdCxjmPJNimrxZbqe3HMLCh5cn2sMnJjPBKwbK3beuq07jd5qEsJ\nh7tSo5vztV0G716S0DLxxSHvzD/Ieh6Wtm8UAklrkwwR/u4QwqKXbOYLc7Yq\n6DDP\r\n=ltN0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"validatable-mixin.js","authors":["Pawel Psztyc","The Advanced REST client authors <arc@mulesoft.com>"],"gitHead":"f1223d3251cc581a0400ff1a61681a3a48ced3d8","scripts":{"test":"karma start --coverage","start":"owc-dev-server --open demo","test:sl":"karma start karma.sl.config.js --legacy --coverage","test:watch":"karma start --auto-watch=true --single-run=false","test:legacy":"karma start --legacy --coverage","update-types":"gen-typescript-declarations --deleteExisting --outDir .","test:legacy:watch":"karma start --legacy --auto-watch=true --single-run=false"},"_npmUser":{"name":"jarrodek","email":"jarrodek@gmail.com"},"deprecated":"This package is not maintained. Use  instead.","repository":{"url":"git://github.com/advanced-rest-client/validatable-mixin.git","type":"git"},"_npmVersion":"6.9.0","description":"A mixin to implement user input validation in a LitElement component","directories":{},"_nodeVersion":"10.15.3","dependencies":{"@polymer/iron-meta":"^3.0.1"},"_hasShrinkwrap":false,"devDependencies":{"lit-html":"^1.0.0","lit-element":"^2.0.1","webpack-merge":"^4.1.5","owc-dev-server":"^1.0.0","@open-wc/testing":"^0.11.1","@open-wc/testing-karma":"^2.0.0","@advanced-rest-client/arc-demo-helper":"^1.0.3","@advanced-rest-client/validator-mixin":"^1.0.0","@advanced-rest-client/testing-karma-sl":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/validatable-mixin_1.0.1_1561332963394_0.44302842298223144","host":"s3://npm-registry-packages"}}},"time":{"created":"2019-06-21T08:21:20.420Z","modified":"2026-04-07T19:25:06.073Z","1.0.0":"2019-06-21T08:21:20.717Z","1.0.1":"2019-06-23T23:36:03.560Z"},"bugs":{"url":"https://github.com/advanced-rest-client/validatable-mixin/issues","email":"arc@mulesoft.com"},"license":"Apache-2.0","homepage":"https://github.com/advanced-rest-client/validatable-mixin#readme","keywords":["api-components","arc-components","forms","validation","web-components"],"repository":{"url":"git://github.com/advanced-rest-client/validatable-mixin.git","type":"git"},"description":"A mixin to implement user input validation in a LitElement component","contributors":[{"name":"Pawel Psztyc"},{"name":"The Advanced REST client authors","email":"arc@mulesoft.com"}],"maintainers":[{"email":"jarrodek@gmail.com","name":"jarrodek"},{"email":"alexperez@mulesoft.com","name":"alexperez_march_2024"},{"email":"elmellidiego@gmail.com","name":"dmacias"}],"readme":"[![Published on NPM](https://img.shields.io/npm/v/@advanced-rest-client/validatable-mixin.svg)](https://www.npmjs.com/package/@advanced-rest-client/validatable-mixin)\n\n[![Build Status](https://travis-ci.org/advanced-rest-client/validatable-mixin.svg?branch=stage)](https://travis-ci.org/advanced-rest-client/validatable-mixin)\n\n## Deprecation notice\n\nThis package is not maintained. Use `@anypont-web-components/validatable-mixin` instead.\n\n# ValidatableMixin\n\nA mixin to implement user input validation in a LitElement component.\n\nA port of `iron-validatable-mixin` that works with any JavaScript class.\nTo be used with Polymer 3, LitElement and low level web components.\n\nThis validatable supports multiple validators.\n\nUse `ValidatableMixin` to implement an element that validates user input.\nUse the related `ArcValidatorBehavior` to add custom validation logic\nto an iron-input or other wrappers around native inputs.\n\nBy default, an `<iron-form>` element validates its fields when the user presses the submit\nbutton.\nTo validate a form imperatively, call the form's `validate()` method, which in turn will\ncall `validate()` on all its children. By using `ValidatableMixin`, your\ncustom element will get a public `validate()`, which will return the validity\nof the element, and a corresponding `invalid` attribute, which can be used for styling.\n\nTo implement the custom validation logic of your element, you must override\nthe protected `_getValidity()` method of this behaviour, rather than `validate()`.\nSee [this](https://github.com/PolymerElements/iron-form/blob/master/demo/simple-element.html)\nfor an example.\n\n### Accessibility\n\nChanging the `invalid` property, either manually or by calling `validate()` will update the\n`aria-invalid` attribute.\n\n## Installation\n```bash\nnpm i @advanced-rest-client/validatable-mixin\n```\n\n## Usage\n\n### Using `_getValidity()` function\n\n```html\n<test-validatable></test-validatable>\n\n<script>\nimport { LitElement, html } from 'lit-element';\nimport { ValidatableMixin } from '@advanced-rest-client/validatable-mixin/validatable-mixin.js';\n\nclass InputValidatable extends ValidatableMixin(LitElement) {\n  render() {\n    return html`<input/>`;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('input', this._onInput.bind(this));\n  }\n\n  _onInput(e) {\n    this.validate(e.target.value);\n  }\n\n  _getValidity(value) {\n    return value.length >= 6;\n  }\n}\nwindow.customElements.define('input-validatable', InputValidatable);\n</script>\n```\n\n### Using custom validators\n\n```html\n<cats-only message=\"Only cats are allowed!\"></cats-only>\n<test-validatable validator=\"cats-only\"></test-validatable>\n\n<script>\nimport { LitElement } from 'lit-element';\nimport { ValidatorMixin } from '@advanced-rest-client/validator-mixin/validator-mixin.js';\n\nclass CatsOnly extends ValidatorMixin(LitElement) {\n  validate(value) {\n    return value.match(/^(c|ca|cat|cats)?$/) !== null;\n  }\n}\nwindow.customElements.define('cats-only', CatsOnly);\nclass InputValidatable extends ValidatableMixin(LitElement) {\n  render() {\n    return html`<input/>`;\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('input', this._onInput.bind(this));\n  }\n\n  _onInput(e) {\n    this.validate(e.target.value);\n  }\n}\nwindow.customElements.define('input-validatable', InputValidatable);\n</script>\n```\n\n\n## Testing\n```bash\nnpm test\n```\n\n## Demo\n```bash\nnpm start\n```\n\n### API components\n\nThis components is a part of [API components ecosystem](https://elements.advancedrestclient.com/)\n","readmeFilename":"README.md"}