{"_id":"high-select","_rev":"17-4f41466c096392e0ae69a225f7ccb222","name":"high-select","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.7":{"name":"high-select","version":"0.0.7","description":"custom select element with custom search records and using html in option with custom style.","main":"high-select.js","directories":{"lib":"lib"},"keywords":["custom-element","select","webcomponent"],"homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","gitHead":"0d2931d14e4e210a1fff26bec099210bb1da4e68","bugs":{"url":"https://github.com/hivabkbk/high-select/issues"},"_id":"high-select@0.0.7","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"gemje","email":"kabki.hiva@gmail.com"},"dist":{"integrity":"sha512-ixoSb4pRYB86m5dIMCOhidIn/svCiTXymbKQfo3025yzuFLpccKLiANK+k5N8Zfw9pCCmVQv12ypNgimGeOBcg==","shasum":"607ff8282c04cbc5fe41d934d2ebf51b122ad4be","tarball":"https://registry.npmjs.org/high-select/-/high-select-0.0.7.tgz","fileCount":5,"unpackedSize":22306,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCLQKCRA9TVsSAnZWagAAieYP/jLsHJI/eXlcHmpT1YVI\n00Zzc0u0yNxB4dZ7LnKTnO1sf79tIwAS8ifhkz/7yZqQtfKwyvz1XaxXzi9A\nc8VhYINsmtyqyDR7v/IoyBT3WXmndTNLmRgXEpvTLdfrwXNUNVlN6dKLQils\nv28GmDpAA9wgHaZkdP5kY+VLwOY6AJueey2R+hGbwlGfu7LsJZEzVBDcCHBM\nMQuFU1o7/BMF31G8uVvJTzNfm2MkSsmleKyu9USWr4IKsCDbZluB50ar4Hfp\nUyJMiaGOgO4IiPpQ034ldsfmglcueExS9dCPqU28I0dSb+QUahvvwyOKOm1h\nqiBwODeksnAD+p5FwUq2cW1rXeC1D+ijN+TJEXQH06wYDBKbwChT0VX9GTuH\nhgz0a3htRxo2rcQO3LD7PZ55xYd14eEDWL2HD6GUohasZBbtUDUoRnQQSP3e\nYFkSzQ2BUu8tuJyJlNjsCSvB8SJwr12NuWFTp8jhuBC3VWy4QalRY8n30dzn\nIPRKhqCinukyH+zOVfIBrmm/zNKUIJSCj0q7AS4KzQ2lyv/WhUnEZEpZnRhY\n0h7OtUcK0gqrajxSa7dTeHbeSBrkeb1h9CPzb2UywQs4lr+q0WAiyGxor+GX\nIpVeUY6NY/rUdBm8fV4kOhbpBripQm7pgrCiNqsB5r+XgarBkHktrRKvRCEb\nGuva\r\n=uB2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5hfgNTPYTGT6rhkdcAvL/+NIQ0vjbZmwN52RxOTqEQgIhAMvjwWxmd/7yk8R5GhuL2lilV27rRbRNiAPMKy5J5BRL"}]},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/high-select_0.0.7_1544074249092_0.9761313495690991"},"_hasShrinkwrap":false},"0.0.8":{"name":"high-select","version":"0.0.8","description":"custom select element with custom search records and using html in option with custom style.","main":"high-select.js","directories":{"lib":"lib"},"keywords":["custom-element","select","webcomponent"],"homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","gitHead":"a36e7ccf3acb99c5bdd451084c71295cdc67738b","bugs":{"url":"https://github.com/hivabkbk/high-select/issues"},"_id":"high-select@0.0.8","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"gemje","email":"kabki.hiva@gmail.com"},"dist":{"integrity":"sha512-uFfHFeQ23mI1CSoa5Gk5oDPeRmaqUhPNlaECQl3/3i4MOihHWtrBlYzN6tDthwWf3l68HxWwyZHfBMCg9MAT0Q==","shasum":"d28eea33e2bce7b18d53ba8700b7044e225f9e94","tarball":"https://registry.npmjs.org/high-select/-/high-select-0.0.8.tgz","fileCount":5,"unpackedSize":22415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCS1XCRA9TVsSAnZWagAAyWAQAIN32idn5BL8H6ZlTu/Z\nALZ7IqHVGXJEPLm7l3LNCEdgjL1ZKHa/qwT4qKGMWjHKxl8O1cFo13MVZM1r\n+3AtCVs5zU5QVgS3AH1VbcJIlIK8KSkN3iMfpYJPyFPSz+8Lj8OZvwsgUnc2\nbM+nJZeBOZzfPvH9F7nGW40UXdLhlGpjwZJC+jtq3qg7DFX1iHKOAdDUeKne\nltZRjKS8X0sJ+OQpgCYZuFj0YTFbkXZMxl6LTAGYVHtmWFnMiSa9cRjiKint\nIbUd2zcMX3hPlDxzcsz0NzLKjUbT37a7bYezpTJroHEwDTvBriI4WHy/rags\nMketmrwssPD5yOrhe5n8FKmrdUpOvd+PZWri9Y2O0DRRBtJFBMvTO/b4CU2c\nxnXkzFGzF3ZgDBRhdBsYB6SyNQWJ1LYgkmFl/KHVrCUdDdr8pmhy/t3ZmCdl\nj7QOJzApol9B+ox97Dung4uQPu3gB+SPwn24Q0OGABQ4kEsALg50GVPMXVjQ\nKYLhrj/aqyXZS8+1uFGmmieRsIn4aoLFqX1Ho/52LvdjrzX/EnXQuV+CNl3c\nNpfictGZW7l1Xx7D64eOmBTyfiOhhmVb/9wkTExqvzgSR2i5ytKOFy5Fdm8p\nZ+wPOirxcNl1SeRh3LACRgmqOkeEv5INEnHhJnR3n4izQI5JsN53dBnVnwQ5\nuoH4\r\n=71Kk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDP+ekDcPNxXraZ79ySZXQpmtP3J5RkzMaiWN/n9ShixAiAr3sw5gm5xO6pt+H6dS/NxjpbY3CJxWlR85XCDkB0wgQ=="}]},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/high-select_0.0.8_1544105302505_0.7754795519257782"},"_hasShrinkwrap":false},"0.0.9":{"name":"high-select","version":"0.0.9","description":"custom select element with custom search records and using html in option with custom style.","main":"high-select.js","directories":{"lib":"lib"},"keywords":["custom-element","select","webcomponent"],"homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","gitHead":"a36e7ccf3acb99c5bdd451084c71295cdc67738b","bugs":{"url":"https://github.com/hivabkbk/high-select/issues"},"_id":"high-select@0.0.9","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"gemje","email":"kabki.hiva@gmail.com"},"dist":{"integrity":"sha512-mYueANJKbVHV/25hv65ml7LyP8QhvflgPn7tTlY1ruOZqtg5nyQD5kVjOkeZrjdidMB3Av0tXxJqQEJEmkz75A==","shasum":"d7683c3708d4ea397139805c5c2c11acfa4392a0","tarball":"https://registry.npmjs.org/high-select/-/high-select-0.0.9.tgz","fileCount":5,"unpackedSize":22415,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCS/vCRA9TVsSAnZWagAAR/sP/2NXTcZRELzDWXF3E5Sh\nQSK+Nxnr2Crn2T/Mym8QkKcKYz3GR3NL0CpFt0MOh90A21HzvnnSbKdE/CeL\ngiyjuDGpSImI/VtIxsjCOO7X5I5NujmczdtHtA2hCwpgE303D9guB2rqsfcE\nDTINB1dcsG57/Ydz7ufF6z8TepVHAY7iwo2/S1Ub0spJVN8h3Fsxv+8+r0Un\nBaL2tB7Hb82nJTEF6Izlv0GtdiYVVnJgzGOGd+c6nQLpr5QVI/YVsv1PHO/z\nhYNmj/PsTfurFnQKuwDAn8zafFvKG3MzRhsJ3p7zjEZrq1m/ePaVJC3mTt8B\nbUSfir0AF0MDq/OxJFZZA3hfjr+CW5rLGE4pE77+SjyA7/edl+Oz+smentdf\n4CF09oCy6rj2J8LJUTP/1ADxgsK1PlAbOp+SN0tozjCH3lSixearqi9nEmBq\nA1H+Xdub30060Pey5v4ri5g9Jlv8QaXAsCnKH2xcsChIDsPdqdvLe96LDx0k\nbCWs+kre5qVEx8Oe7JBUjtFtOMLaY3n9171PFMtSWFIZaqtqiCEzaDNC/U9R\n2S/CieQNEfGf6R5tPACXl9cbFvz+AGlLIbZOF6+1A3lgSA/xJCWTnIRKJtir\nFaVDyBUIw7/Cl2H5O8dnHCst7Xqruwo+MwIjvkuhpEGAGvzmIz/av2zmJTBb\nDtu7\r\n=TJNG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWqZDrWyBjVQ7bubZ4RZd0pitl2GDTZA9j91YyTrjLRAiB82UCLYbcDMnt3H2oDt2Urh+6tMMbsv4b2TlxICoxNCA=="}]},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/high-select_0.0.9_1544105966930_0.5346384389393952"},"_hasShrinkwrap":false},"0.1.0":{"name":"high-select","version":"0.1.0","description":"custom select element with custom search records and using html in option with custom style.","main":"high-select.js","directories":{"lib":"lib"},"keywords":["custom-element","select","webcomponent","form","dropdown","option","list"],"homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","gitHead":"93ee2aa2d06cf73c67b54b717deab6c27d9ca940","bugs":{"url":"https://github.com/hivabkbk/high-select/issues"},"_id":"high-select@0.1.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"gemje","email":"kabki.hiva@gmail.com"},"dist":{"integrity":"sha512-WaXb2fG6bbKHDdJqJMFWe3eu1KRyUXhb0Ypf1RXH4prgodhh4CQaUWhHRbeZUDzomS/jXgeRndqTj1OT6L+Ytw==","shasum":"f099620c221fb919c22b6566a5ff127647ab2797","tarball":"https://registry.npmjs.org/high-select/-/high-select-0.1.0.tgz","fileCount":5,"unpackedSize":22495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGHuBCRA9TVsSAnZWagAAHBAP+gJuYdA2E8maO0rG3Iih\nI7ieoJTCfoFAxqoZQnrYuxUnFVJSgukvZFULtqKmnXJzTNfI+WvWBN5WtFcW\n8eoKit6T7CBf26YYlWWMkTF6eGxLsMgQXN203dAHWOn4KQrcPYDCu9jmKK9d\nIrQoGD6RGw9bA93nlG8K0+T7QbyG9JZPIUP3kA4cZ+uM5f1xjRYkY1FV5Pd7\nkzNqGCiauZ5ITjgUAnO1P88oyV+iAtV+F+BWd2Dt+6ghHfOUm9xft9Z4dTUP\n3zt8moR15fwjcSljt7Lo3fz0btlfymEbqAcQ2E82wsoqB2hNHPUFi20EOLQy\nQjt/iU5IMwhFitAsv/DX757GASJp9bGrK/LXM4EjAeABXJ7F/fN8kQxD6Uxa\nJQnKA42jK+Nuo6q66T7nL7fGzBUeuC0QLKmLFBpKWBhFjLr4uW6f63mPpKui\n6KMievYfn1VqBi1BuyQvqIik2Vv8D+mopDpiWEY1E5rDxO4z7VvFHjopDQhZ\nQb3KaUdeKzTk2HC6jZrUxr1OmTwjqIM1v3j6bWE+f8m2vsZ9Ls+h9qMgYlnK\nVNQPsK1HKwKTeL7Cxld6wgpGXU3bjBauc69QhBp9pURZkc18OO1XAdlNl4HO\n0DDJkYL/mFAZa00QWowRhylo/urRvCbs7kyCG6X0U/Bv/9F+e4LV7IVbNSbj\ndv73\r\n=FWx+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9wF60Qq9ob/yZ39sHRvHc5QUEpRS9+qKmeK0R38zP7AiEAlBnkQ/og0Dj6SCCEbwJq+uAtiX9cQOMqS7wCktNgGik="}]},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/high-select_0.1.0_1545108352602_0.7776867610882308"},"_hasShrinkwrap":false},"0.2.0":{"name":"high-select","version":"0.2.0","description":"custom select element with custom search records and using html in option with custom style.","main":"high-select.js","directories":{"lib":"lib"},"keywords":["custom-element","select","webcomponent","form","dropdown","option","list"],"homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","gitHead":"b286f120310c6403b4a17d1b47d7d6bc61259206","bugs":{"url":"https://github.com/hivabkbk/high-select/issues"},"_id":"high-select@0.2.0","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-sYqmbGF/u73HHiJbQ779hTFlmm47yuowoJVzrooMIKqeATmAGQK+0NxRMnZtjTqkxyaB3AnfzteE1y6tvYVPKg==","shasum":"4aeddc15df50e33a5a0c7c7b84dc3b35c8f19bae","tarball":"https://registry.npmjs.org/high-select/-/high-select-0.2.0.tgz","fileCount":5,"unpackedSize":25595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeU4hrCRA9TVsSAnZWagAAdjEP+gIHaDwLaQc2Hh/HPlIB\nb0SOKgNWL70VPHT4qF4BilKB/JWiP1Fzsc8l/HLDs5H38v0WVHZCsM5c7Tkf\nNTmOiFTZE9h0Jq7bMaG4y4qK2A0PstOjtoa7fnxlwMa92l6trMj1+y8cHOVj\n9YNoazVqWITTVuqj9O0Ic6x8X4R5Cpf8ANlNg2iUnABIB/7xTu3NS50iGFvU\nCvcJ3VIjemcDAC3fxw5sdRVH2Lm/FzGqEaRaPw4xUl8BbuLHZgj6W/CZsG8N\nFuOIvCIApDliMWYhr9h8wBo2VeepesStWD3Ggh2XuljHhHKTP9ijPCsL6aPP\nvgOIuxuZbm7M3uwZk+T8INAkfbze0PHakkijtbbDc+DfzcT88MHfMtxUMJ59\nIxsOrAUHYfR77X7cVgrhdDUcv9GXIm7d/8R1gwZ5JjGT5PHpesj1sINzjJbu\nRoVZzm6MkDL91VanJLF5/Q2mVl1oNJHHdRUMD8nY6IykM2nYXb9ULNZhvbnL\npbbmfMz5bSU/LTpWiF8mkez9zSYMciAb5dvLDulVVGbc8t3X5rdpTBxlPP9P\nxw7ugswPnnBe5UECqLz1/FjOjNei0j8eEpuLufKWfhHIT+6C90tHt7WkrDv+\nKr6g+r2L/W2hbp4BgrNVZSCPYW/O82w95+6UKSgK4jJQkxpLvaNDfOiJYoaS\nHr8X\r\n=5tEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFrL6ep3hssw6C8cYz9vSZs/oCoHcklWdtPJmCxsfwGwIhAKbp1MGhWsVCdzaLJO825lNIq5sViKhajDCvBL8iHW50"}]},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"_npmUser":{"name":"gemje","email":"kabki.hiva@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/high-select_0.2.0_1582532715184_0.16006362587650624"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-05T14:54:34.550Z","0.0.1":"2018-12-05T14:54:34.654Z","modified":"2022-05-05T00:23:12.679Z","0.0.2":"2018-12-05T16:18:23.626Z","0.0.3":"2018-12-05T16:23:35.270Z","0.0.4":"2018-12-05T16:24:51.549Z","0.0.5":"2018-12-05T16:36:14.944Z","0.0.6":"2018-12-05T19:19:44.135Z","0.0.7":"2018-12-06T05:30:49.281Z","0.0.8":"2018-12-06T14:08:22.644Z","0.0.9":"2018-12-06T14:19:27.048Z","0.1.0":"2018-12-18T04:45:52.732Z","0.2.0":"2020-02-24T08:25:15.399Z"},"maintainers":[{"name":"gemje","email":"kabki.hiva@gmail.com"}],"description":"custom select element with custom search records and using html in option with custom style.","keywords":["custom-element","select","webcomponent","form","dropdown","option","list"],"author":{"name":"Hiva Kabki","email":"kabki.hiva@gmail.com"},"license":"MIT","readme":"# high-select\r\n\r\n`high-select` is a custom element looks like classic `select` HTML element but with more capabilities like putting HTML tags in its options, customizing search records for any options and customizing its styles.\r\n\r\n\r\n## Installation\r\n\r\nYou can use `high-select` via script tag or NPM.\r\n\r\n### Script Tag\r\n\r\nadd below tag to your html document\r\n\r\n```html\r\n<script  type=\"module\" src='https://unpkg.com/high-select@0.2.0/lib/high-select.js'></script>\r\n```\r\n\r\n\r\n### NPM\r\n\r\n```npm\r\n npm install high-select --save\r\n```\r\n\r\nonce you installed the package, you can add this tag to your html document\r\n\r\n```html\r\n<script  type=\"module\" src='node_modules/high-select/lib/high-select.js'></script>\r\n```\r\n\r\n\r\n## Usage\r\n\r\nfirst, create your `high-select` tag\r\n\r\n```html\r\n<high-select></high-select>\r\n```\r\n\r\nthen add some `high-option`s inside it\r\n\r\n```html\r\n<high-select>\r\n    <high-option> option 1 </high-option>\r\n    <high-option> option 2 </high-option>\r\n    <high-option> option 3 </high-option>\r\n    <high-option> option 4 </high-option>\r\n    <high-option> option 5 </high-option>\r\n</high-select>\r\n```\r\n\r\nyour `high-select` element is ready.\r\n\r\n## How does it work?\r\n\r\n`high-select` let you select an option from a list of them, like the classic one. so the value of selected option will be the value of the select element.\r\n\r\n### value of an option\r\n\r\nuntil you give an `option` a `value` attribute, the option's `innerText` would be the value of that. so if values of your options are unreadable or coded or ... give options the value attribute like this:\r\n\r\n```html\r\n<high-option value=\"1\"> Option 1 </high-option>\r\n```\r\n\r\n### default value of select\r\n\r\nif you give an option a `selected` attribute, it would be the `high-select` value untill user change it. otherwise the first option would be selected by default.\r\n\r\n### search\r\n\r\nto enable search in options you should give the `high-select` a `search` attribute.\r\n\r\n```html\r\n<high-select search></high-select>\r\n```\r\n\r\n### arrow\r\n\r\nto enable arrow in options you should give the `high-select` a `arrow` attribute.\r\n\r\n```html\r\n<high-select arrow></high-select>\r\n```\r\n\r\n### animated\r\n\r\nto enable animation in options you should give the `high-select` a `animated` attribute.\r\n\r\n```html\r\n<high-select animated></high-select>\r\n```\r\n\r\n#### customize the search\r\n\r\ngive options a `record` attribute and put your records there, when user search for something, `high-select` search for any string in the `record` attribute and `innerText` of all options to find the match.\r\n\r\n```html\r\n<high-select search>\r\n    <high-option value=\"1\" record=\"one uno\"> option 1 </high-option>\r\n</high-select>\r\n```\r\n\r\nabove option would be found one search input of \"1\", \"o\", \"one\", \"uno\"\r\n\r\n\r\n### using html in options\r\n\r\nyou can use any html tags in the high-options tags including img, ... , but you must give the option a `title` attribute, so when user select the option, `title` would be shown as selected option.\r\n\r\n```html\r\n<high-select animated arrow search>\r\n    <high-option>Select a country</high-option>\r\n    <high-option value=\"it\" title=\"italy\">\r\n        <img src=\"an-image-of-italy\">    \r\n    <high-option>\r\n    <high-option value=\"fr\" title=\"france\">\r\n        <img src=\"an-image-of-france\">    \r\n    <high-option>\r\n</high-select>\r\n```\r\n\r\n\r\n### disabling\r\n\r\nyou can disable `high-select` and its options at any time, just give them a `disabled` attribute.\r\n\r\n\r\n## manipulating by javascript\r\n\r\n`high-select` state could be accessed and change via javascript.\r\n\r\n\r\n### getting select value\r\n\r\nselect the `high-select` element and get its value property.\r\n\r\n```javascript\r\ndocument.querySelector(\"high-select\").value;\r\n```\r\n\r\n\r\n### changing the select value\r\n\r\nput the value in the `high-select` value property.\r\n\r\n```javascript\r\ndocument.querySelector(\"high-select\").value = \"it\";\r\n```\r\n\r\nif the value you give high-select would not be available in options, it simply ignore it.\r\n\r\n\r\n### change options selected property\r\n\r\nif you give any options of `high-select` a `selected` property.\r\nthe option change the select value.\r\n\r\n```javascript\r\ndocument.querySelector(\"high-select\").children[2].selected = true;\r\n```\r\n\r\n\r\n## change event\r\n\r\nyou can catch the change event of `high-select` by listening to it. whenever the value change by user interacting with element, `high-select` tells you.\r\n\r\n```javascript\r\ndocument.querySelector(\"high-select\").addEventListener(\"change\", function(){\r\n    console.log(this.value);\r\n});\r\n```\r\n\r\n## user Experience\r\n\r\nuser could interact with `high-select` via mouse and keyboard easily. (Enter, Esc, Arrow down, Arrow up, Home, End)\r\n\r\n\r\n## styling\r\n\r\ncustomize `high-select` styles.\r\n\r\n\r\n### high-select's HTML structure\r\n\r\n`high-select` use shadow dom for the most part of itself, so styling it would not be so easy, the structure of its shadow dom is like this:\r\n\r\nthere is an element with id of `caller`, caller would call the list of options which it is in another element with id `bigot`.\r\ninside bigot we have `search` which contains an input element and `holder` which hold the options.\r\n\r\n\r\n### styling variables\r\n\r\nthere is list of css variable that make you able to change the shadow dom's elements style:\r\n\r\n--caller-padding\r\n\r\n--caller-background\r\n\r\n--caller-shadow\r\n\r\n--caller-color\r\n\r\n--caller-border-radius\r\n\r\n\r\n--caller-disabled-color\r\n\r\n--caller-disabled-background\r\n\r\n\r\n--caller-hover-cursor\r\n\r\n--caller-hover-background\r\n\r\n--caller-hover-color\r\n\r\n\r\n--caller-focus-outline\r\n\r\n\r\n--arrow-font-size\r\n\r\n--arrow-margin\r\n\r\n--arrow-color\r\n\r\n\r\n--bigot-shadow\r\n\r\n--bigot-background\r\n\r\n--bigot-border\r\n\r\n\r\n--input-outline\r\n\r\n--input-margin\r\n\r\n--input-width\r\n\r\n--input-border-width\r\n\r\n--input-border-color\r\n\r\n--input-border-style\r\n\r\n--input-font\r\n\r\n--input-padding\r\n\r\n--input-color\r\n\r\n--input-background\r\n\r\n--animated-time\r\n\r\n--option-padding\r\n\r\n--option-border\r\n\r\n--option-hover-background\r\n\r\n--option-hover-color\r\n\r\n--option-disabled-background\r\n\r\n--option-disabled-color\r\n\r\n--option-active-background\r\n\r\n--option-active-color\r\n\r\n--option-selected-background\r\n\r\n--option-selected-color\r\n\r\nplease suggest us if you think there could be more variables needed.\r\n\r\n\r\n## problem and issues\r\n\r\n- currently high-select not working properly in iframe and a tranformed container, any idea about how to fix it?\r\n- edge has issues with display properties of shadow dom elements.\r\n\r\n \r\n## Contributing\r\n\r\n1. Fork it!\r\n2. Create your feature branch: `git checkout -b new-feature`\r\n3. Commit your changes: `git commit -am 'Add some feature'`\r\n4. Push to the branch: `git push origin new-feature`\r\n5. Submit a pull request :D\r\n\r\n## License\r\n\r\nMIT LICENSE\r\n\r\n\r\n","readmeFilename":"readme.md","homepage":"https://github.com/hivabkbk/high-select/blob/master/readme.md","repository":{"type":"git","url":"git+https://github.com/hivabkbk/high-select.git"},"bugs":{"url":"https://github.com/hivabkbk/high-select/issues"}}