{"_id":"@csgis-geoladris/ui","_rev":"7-8454bca8794420c1c4c43f9e728af903","name":"@csgis-geoladris/ui","description":"## General","dist-tags":{"dev":"1.0.0-alpha.3","latest":"0.1.0"},"versions":{"1.0.0-alpha.0":{"name":"@csgis-geoladris/ui","version":"1.0.0-alpha.0","license":"MIT","author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"dependencies":{"moment":"2.5.1","nouislider":"9.2.0","pikaday":"1.5.1","sortablejs":"1.4.2","typeahead.js":"0.10.2","popper.js":"^1.9.9","tooltip.js":"^1.1.4","@geoladris/core":"geoladris/core#master"},"files":["src/**","css/**","/geoladris.json"],"devDependencies":{"babel-eslint":"^7.2.1","eslint":"^3.18.0","eslint-config-airbnb-es5":"^1.1.0","eslint-plugin-react":"^6.10.3","jasmine-core":"^2.5.2","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-junit-reporter":"^1.1.0","karma-phantomjs-launcher":"^1.0.2","karma-requirejs":"^1.1.0","phantomjs-prebuilt":"^2.1.14","requirejs":"^2.1.0","squirejs":"^0.2.1"},"scripts":{"test":"karma start","testd":"karma start --single-run=false --auto-watch --browsers=Chrome --reporters=progress","lint":"eslint src test"},"description":"## General","_id":"@csgis-geoladris/ui@1.0.0-alpha.0","dist":{"shasum":"8ea68d0e7e275cd08c7a91c0e64bb1854b5e1eb0","tarball":"https://registry.npmjs.org/@csgis-geoladris/ui/-/ui-1.0.0-alpha.0.tgz","integrity":"sha512-cR203bZYBdp/EI/zfcBTVCS2HQR5n756dTPmYRhIAATnYbvTMnoqdLBt5CDdOvPralIxl/VkBkOyDmXdN7aMug==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCR/nh2TRpOoq7B9/OZ2S3srTwqwpSlUeQ/nHtwl68dzQIhANHzkvliRxbyAGEFw4LIqThnhBiqBiyfQxTrhwqIsEA4"}]},"maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"_npmUser":{"name":"vicgonco","email":"victor.gonzalez@geomati.co"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-1.0.0-alpha.0.tgz_1504254993944_0.4335770085453987"},"directories":{}},"1.0.0-alpha.1":{"name":"@csgis-geoladris/ui","version":"1.0.0-alpha.1","license":"MIT","author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"dependencies":{"moment":"2.5.1","nouislider":"9.2.0","pikaday":"1.5.1","sortablejs":"1.4.2","typeahead.js":"0.10.2","popper.js":"^1.9.9","tooltip.js":"^1.1.4","@geoladris/core":"dev"},"files":["src/**","css/**","/geoladris.json"],"devDependencies":{"babel-eslint":"^7.2.1","eslint":"^3.18.0","eslint-config-airbnb-es5":"^1.1.0","eslint-plugin-react":"^6.10.3","jasmine-core":"^2.5.2","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-junit-reporter":"^1.1.0","karma-phantomjs-launcher":"^1.0.2","karma-requirejs":"^1.1.0","phantomjs-prebuilt":"^2.1.14","requirejs":"^2.1.0","squirejs":"^0.2.1"},"scripts":{"test":"karma start","testd":"karma start --single-run=false --auto-watch --browsers=Chrome --reporters=progress","lint":"eslint src test"},"description":"## General","_id":"@csgis-geoladris/ui@1.0.0-alpha.1","dist":{"shasum":"cd5c5428239d07b5d81845b0d9dfee0afb53c47d","tarball":"https://registry.npmjs.org/@csgis-geoladris/ui/-/ui-1.0.0-alpha.1.tgz","integrity":"sha512-n8rObLZIEVKSuvRxXv948Cz3F0+Ki0qfuGWpNyh0uYfz4wqo+esjiUWg569FSu8XmeKtxOoITK8KnFByTHZUlQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLPb2jkyx7Xx0znPgTSicB38l2vlCyxEGvTseS/DyGSAIgYBR0XfJVCcmM6c9trKwm1GyjSe+cBo6BpJy5I6z1LTw="}]},"maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"_npmUser":{"name":"vicgonco","email":"victor.gonzalez@geomati.co"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-1.0.0-alpha.1.tgz_1504255173541_0.3438281388953328"},"directories":{}},"1.0.0-alpha.2":{"name":"@csgis-geoladris/ui","version":"1.0.0-alpha.2","license":"MIT","author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"dependencies":{"@geoladris/core":"dev","moment":"2.5.1","nouislider":"9.2.0","pikaday":"1.5.1","popper.js":"^1.9.9","sortablejs":"1.4.2","tooltip.js":"^1.1.4","typeahead.js":"0.10.2"},"files":["src/**","css/**","jslib/**","/geoladris.json"],"devDependencies":{"babel-eslint":"^7.2.1","eslint":"^3.18.0","eslint-config-airbnb-es5":"^1.1.0","eslint-plugin-react":"^6.10.3","jasmine-core":"^2.5.2","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-junit-reporter":"^1.1.0","karma-phantomjs-launcher":"^1.0.2","karma-requirejs":"^1.1.0","phantomjs-prebuilt":"^2.1.14","requirejs":"^2.1.0","squirejs":"^0.2.1"},"scripts":{"test":"karma start","testd":"karma start --single-run=false --auto-watch --browsers=Chrome --reporters=progress","lint":"eslint src test"},"description":"## General","_id":"@csgis-geoladris/ui@1.0.0-alpha.2","dist":{"shasum":"d6b7c5ee9d52f78927602b0490decbbbd6f2ca53","tarball":"https://registry.npmjs.org/@csgis-geoladris/ui/-/ui-1.0.0-alpha.2.tgz","integrity":"sha512-qGnmfoGqEhsJgBa1KQa59kM4/xzAQaQX0fKp7aLlv2bCEeHtw6hhLj5JNS1zlbWDQe0Ml3gc8EmZip2QIenMbQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtgnbLGmTHM/B3JEBHjvWTSk+WGSVFC++/qP2IjlbCaAIgfvDUBZPlo5mv/DbdclgLtMW876EEMCXQqCV3I7/OpFM="}]},"maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"_npmUser":{"name":"vicgonco","email":"victor.gonzalez@geomati.co"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-1.0.0-alpha.2.tgz_1504255716897_0.18706292775459588"},"directories":{}},"1.0.0-alpha.3":{"name":"@csgis-geoladris/ui","version":"1.0.0-alpha.3","license":"MIT","author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"main":"dist/ui.js","dependencies":{"@geoladris/core":"dev","moment":"2.5.1","nouislider":"9.2.0","pikaday":"1.5.1","popper.js":"^1.9.9","sortablejs":"1.4.2","tooltip.js":"^1.1.4","typeahead.js":"0.10.2"},"devDependencies":{"@csgis/di":"^0.0.1-alpha.1","@geoladris/event-bus":"^0.0.1-alpha.2","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-eslint":"^7.2.1","babel-loader":"^7.1.2","babel-preset-env":"^1.6.0","codecov":"^2.3.0","eslint":"^3.18.0","eslint-config-airbnb-es5":"^1.1.0","eslint-plugin-react":"^6.10.3","istanbul-instrumenter-loader":"^3.0.0","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-mocha":"^1.3.0","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.4","mocha":"^3.5.3","sinon":"^4.0.0","webpack":"^3.6.0"},"scripts":{"build":"babel src --out-dir dist","prepublish":"yarn run build","test":"karma start","test:debug":"karma start --single-run=false --auto-watch --browsers=Chrome --reporters=progress","lint":"eslint src test","coverage":"yarn run test && codecov --disable=gcov -f coverage/lcov/lcov.info"},"description":"## General","licenseText":"MIT License\n\nCopyright (c) 2017 CSGIS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@csgis-geoladris/ui@1.0.0-alpha.3","dist":{"shasum":"165e6108b2e99fce99794d67fee59847f06af852","tarball":"https://registry.npmjs.org/@csgis-geoladris/ui/-/ui-1.0.0-alpha.3.tgz","integrity":"sha512-9SUtF+FTDqkHIw5Pg72g3aoUgpFa/2gj0wk9qKoqwZCutcIXgUfTT+jVO/qHt4z6VgLEc6PBHoaRXTSTJsk0Yw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIbgx0dhreg/Idasld3Uc8/dh434KK8LNFWY3pVvoz5gIhAORR/J5/iQgz4BmhMqvJYYs2EjWoseSURbJDNj0IAa8E"}]},"maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"_npmUser":{"name":"vicgonco","email":"victor.gonzalez@geomati.co"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui-1.0.0-alpha.3.tgz_1506687137957_0.4967864374630153"},"directories":{}},"0.1.0":{"name":"@csgis-geoladris/ui","version":"0.1.0","license":"MIT","author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"dependencies":{"@geoladris/core":"dev","moment":"2.5.1","nouislider":"9.2.0","pikaday":"1.5.1","popper.js":"^1.9.9","sortablejs":"1.4.2","tooltip.js":"^1.1.4","typeahead.js":"0.10.2"},"files":["src/**","css/**","jslib/**","/geoladris.json"],"devDependencies":{"babel-eslint":"^7.2.1","eslint":"^3.18.0","eslint-config-airbnb-es5":"^1.1.0","eslint-plugin-react":"^6.10.3","jasmine-core":"^2.5.2","karma":"^1.3.0","karma-chrome-launcher":"^2.0.0","karma-coverage":"^1.1.1","karma-jasmine":"^1.0.2","karma-junit-reporter":"^1.1.0","karma-phantomjs-launcher":"^1.0.2","karma-requirejs":"^1.1.0","phantomjs-prebuilt":"^2.1.14","requirejs":"^2.1.0","squirejs":"^0.2.1"},"scripts":{"test":"karma start","testd":"karma start --single-run=false --auto-watch --browsers=Chrome --reporters=progress","lint":"eslint src test"},"description":"## General","licenseText":"MIT License\n\nCopyright (c) 2017 CSGIS\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@csgis-geoladris/ui@0.1.0","dist":{"shasum":"677cdc23ac22574adfd21a1a6f72b2edcf8682b5","tarball":"https://registry.npmjs.org/@csgis-geoladris/ui/-/ui-0.1.0.tgz","fileCount":45,"unpackedSize":225768,"integrity":"sha512-7ZZZJpPuQGUC9hHn6+hrfjBrQ5TF1aJx9ILpA2kWyPcylH7fZarAN+QB57afY7VztjRuPWxfdFzHsasaNAuOmQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA9izG/Ztca8xi1C3DlNrMVcfxaKlryyxG1EWFGZg8FAIgMh4MPYvg5BPvCoH/DccAHAi5z+Usbw2FAIZ3BbJL1Zw="}]},"maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"_npmUser":{"name":"vicgonco","email":"victor.gonzalez@geomati.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ui_0.1.0_1519032881379_0.951120496772045"},"_hasShrinkwrap":false}},"readme":"# Events\n\n## General\n\n### <a name=\"ui-show\"></a>ui-show\n\n\nMessage (*String*, mandatory): Identifier of the div to show.\n\nExample:\n```javascript\nbus.send(\"ui-show\", \"mydiv\");\n```\n\n### <a name=\"ui-hide\"></a>ui-hide\n\nMessage (*String*, mandatory): Identifier of the div to hide.\n\nExample:\n```javascript\nbus.send(\"ui-hide\", \"mydiv\");\n```\n\n### <a name=\"ui-toggle\"></a>ui-toggle\n\nMessage (*String*, mandatory): Identifier of the div to toggle visibility.\n\nExample:\n```javascript\nbus.send(\"ui-toggle\", \"mydiv\");\n```\n\n### ui-open-url\n\nThis event can be managed directly with JS but it is useful for testing.\n\nMessage (*Object*):\n\n* **url** (*String*, mandatory): URL to open.\n* **target** (*String*, mandatory): Target attribute or name of the window.\n\nExample:\n```js\nbus.send(\"ui-open-url\", {\n    url : \"http://www.google.es\",\n    target : \"_blank\"\n});\n```\n\n### ui-alert\n\nMessage (*Object*):\n\n* **severity** (*String*, mandatory): Can be anything as long as there is a CSS rule named *ui-alert-<severity>* to style the alert.\n* **message** (*String*, mandatory): The message to show in the alert. It does **not** accept HTML code.\n\nExample:\n```js\nbus.send(\"ui-alert\", {\n    severity : \"info\",\n    message : \"Operation successful.\"\n});\n```\n\n### ui-loading:start\n\nMessage (*String*, mandatory): The text to be shown on a loading message.\n\nExample:\n```js\nbus.send(\"ui-loading:start\", \"Bitte warten Sie\");\n```\n\n### ui-loading:end\n\nMessage (*String*, mandatory): The text to be removed from the loading message.\n\nExample:\n```js\nbus.send(\"ui-loading:end\", \"Bitte warten Sie\");\n```\n\n## Extended functionality\n\n### ui-accordion-group:`<id>`:visibility\n\n`<group-id>` matches the *id* specified when creating the [accordion group](plugins.md#ui-accordion-group).\n\nMessage (*Object*):\n\n* **header** (*boolean*, optional): Determines wether the header of the group should be visible or not. If not specified, the visibility is not changed.\n* **content** (*boolean*, optional): Determines wether the content of the group should be visible or not. If not specified, the visibility is not changed.\n\nExample:\n```js\nbus.send(\"ui-accordion-group:layers:visibility\", {\n    header : true,\n    content : false\n});\n```\n\n### ui-button:`<id>`:enable\n\n`<id>` matches the *id* specified when creating the [button](plugins.md#ui-button).\n\nMessage (*boolean*, mandatory): Determines whether the button should be enabled or not.\n\nExample:\n```js\nbus.send(\"ui-button:mybutton:enable\", true);\n```\n\n### ui-button:`<id>`:activate\n\n`<id>` matches the *id* specified when creating the [button](plugins.md#ui-button).\n\nMessage (*boolean*, mandatory): Determines whether the button should be active or not.\n\nExample:\n```\nbus.send(\"ui-button:mybutton:activate\", true);\n```\n\n### ui-button:`<id>`:toggle\n\n`<id>` matches the *id* specified when creating the [button](plugins.md#ui-button).\n\nMessage (*Empty*).\n\nExample:\n```js\nbus.send(\"ui-button:mybutton:toggle\");\n```\n\n### ui-button:`<id>`:link-active\n\n`<id>` matches the *id* specified when creating the [button](plugins.md#ui-button).\n\nMessage (*String*, mandatory): Identifier of the div to link active state. Button state will change on [ui-show](#ui-show), [ui-hide](#ui-hide) and [ui-toggle](#ui-toggle) events for this div.\n\nExample:\n```js\nbus.send(\"ui-button:mybutton:link-active\", \"mydialog\");\n```\n\n\n### ui-choice:`<id>`:set-values\n\n`<id>` matches the *id* specified when creating the [choice](plugins.md#ui-choice).\n\nMessage (*Array* of *String*): Values to set.\n\nExample:\n```js\nbus.send(\"ui-choice:mychoice:set-values\", [ [ \"1\", \"2\", \"3\" ] ]);\n```\n\n### <a name=\"ui-dropdown-button-add-item\"></a>ui-dropdown-button:`<id>`:add-item\n\n`<id>` matches the *id* specified when creating the [dropdown button](plugins.md#ui-dropdown-button).\n\nMessage (*Object*):\n\n* **id** (*String*, mandatory): Identifier of the dropdown item.\n* **text** (*String*, mandatory): Text to be shown for the dropdown item.\n* **tooltip** (*String*, optional): Tooltip to show on mouse over.\n\nExample:\n```js\nbus.send(\"ui-dropdown-button:mydropdown:add-item\", {\n    id : \"item1\",\n    text : \"Item 1\",\n    tooltip : \"My item tooltip\"\n});\n```\n\n### ui-dropdown-button:`<id>`:set-item\n\n`<id>` matches the *id* specified when creating the [dropdown button](plugins.md#ui-dropdown-button).\n\nMessage (*String*, mandatory): Identifier of the item to set, as specified on [ui-dropdown-button:&lt;id&gt;:add-item](plugins.md#ui-dropdown-button-add-item).\n\nExample:\n```js\nbus.send(\"ui-dropdown-button:mydropdown:set-item\", \"item1\");\n```\n\n### ui-dropdown-button:`<id>`:item-selected\n\n`<id>` matches the *id* specified when creating the [dropdown button](plugins.md#ui-dropdown-button).\n\nMessage (*String*, mandatory): Identifier of the item that has been selected, as specified on [ui-dropdown-button:&lt;id&gt;:add-item](plugins.md#ui-dropdown-button-add-item).\n\nExample:\n```js\nbus.send(\"ui-dropdown-button:mydropdown:item-selected\", \"item1\");\n```\n\n\n### ui-form-collector:extend\n\nWith this event you can gather data from a set of input controls and send an event with that data.\n\nMessage (*Object*):\n\n* **button** (*String*, mandatory): Identifier of the button that will trigger the form collection and event send.\n* **clickEventName** (*String*, mandatory): Event to send when the button is clicked.\n* **divs** (*Array* of *String*, mandatory): Set of divs to gather data. These fields must implement the `<field>-field-value-fill`_ event.\n* **requiredDivs** (*Array* of *String*, optional): Subset of ``divs``. All these fields must have non empty values for the ``button`` to be enabled, otherwise it's disabled. Works for fields created with the ``ui-input:create`` and ``ui-choice:create`` events.\n* **names** (*Array* of *String*, optional): Set of attribute names to use for the event message. If not specified, the div identifiers will be used as attribute names for event message.\n\nExample:\n```js\nbus.send(\"ui-form-collector:extend\", {\n    button : \"button-ok\",\n    clickEventName : \"zoomTo\",\n    divs : [ \"input-crs\", \"input-x\", \"input-y\" ],\n    names : [ \"crs\", \"lon\", \"lat\" ]\n});\n```\n\n### ui-input:`<id>`:set-label\n\n`<id>` matches the *id* specified when creating the input (can be [checkbox](plugins.md#ui-checkbox), [choice](plugins.md#ui-choice), [input](plugins.md#ui-input), [radio](plugins.md#ui-radio),  [slider](plugins.md#ui-slider) or [text-area](plugins.md#ui-text-area)).\n\nMessage (*String*): Label text.\n\nExample:\n```js\nbus.send(\"ui-input:mychoice:set-label\", \"Choice: \");\n```\n\n### ui-slider:`<id>`:set-value\n\n`<id>` matches the *id* specified when creating the [slider](plugins.md#ui-slider).\n\nMessage (*int*): Value to select.\n\nExample:\n```js\nbus.send(\"ui-slider:myslider:set-value\", 4);\n```\n\n### ui-slider:`<id>`:set-values\n\n`<id>` matches the *id* specified when creating the [slider](plugins.md#ui-slider).\n\nMessage (*Array* of *int*): Values to set.\n\nExample:\n```js\nbus.send(\"ui-slider:myslider:set-values\", [ [ 1, 4, 6 ] ]);\n```\n\n### ui-sliding-div:expand\n\nMessage (*String*, mandatory): Id of the sliding div to expand.\n\nExample:\n```js\nbus.send(\"ui-sliding-div:expand\", \"mysliding\");\n```\n\n### ui-sliding-div:collapse\n\nMessage (*String*, mandatory): Id of the sliding div to collapse.\n\nExample:\n```js\nbus.send(\"ui-sliding-div:collapse\", \"mysliding\");\n```\n\n### ui-sliding-div:toggle\n\nMessage (*String*, mandatory): Id of the sliding div to toggle.\n\nExample:\n```js\nbus.send(\"ui-sliding-div:toggle\", \"mysliding\");\n```\n\n\n### ui-table:`<id>`:clear\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Empty*).\n\nExample:\n```js\nbus.send(\"ui-table:mytable:clear\");\n```\n\n### ui-table:`<id>`:adjust\n\nUsed to adjust the column width, usually when the table is shown. `<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Empty*).\n\nExample:\n```js\nbus.send(\"ui-table:mytable:adjust\");\n```\n\n### <a name=\"ui-table-set-data\"></a>ui-table:`<id>`:set-data\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Object*):\n\n* **data** (*Array* of *Object*, mandatory): Array with the data to fill the table. All objects should in the array should have the same properties.\n* **fields** (*Object*, mandatory): Names of the fields to show on the table. Each property key on the object is the display name and the property value is the propery name to be used on the *data* array of objects.\n* **idColumn** (*int*, mandatory): Column index (in ``fields``) to use as identifier for row selection.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:set-data\", {\n    \"data\" : [{\n        \"number\" : \"1\",\n        \"char\" : \"a\"\n    },{\n        \"number\" : \"2\",\n        \"char\" : \"b\"\n    },{\n        \"number\" : \"3\",\n        \"char\" : \"c\"\n    }],\n    \"fields\" : {\n        \"Nr.\" : \"number\",\n        \"Character\" : \"char\"\n    }\n});\n```\n\n### ui-table:`<id>`:data-selected\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Array* of *Object*): Array with the selected objects (subset of the array provided on [ui-table:&lt;id&gt;:set-data](plugins.md#ui-table-set-data)). All objects should in the array should have the same properties.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:data-selected\", [[{\n    \"number\" : \"3\",\n    \"char\" : \"c\"\n}]]);\n```\n\n### ui-table:`<id>`:select-data\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Array* of *Object*): Array with the selected objects (subset of the array provided on [ui-table:&lt;id&gt;:set-data](plugins.md#ui-table-set-data)). All objects should in the array should have the same properties.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:select-data\", [[{\n    \"number\" : \"3\",\n    \"char\" : \"c\"\n}]]);\n```\n\n### ui-table:`<id>`:invert-selection\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage: Empty.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:invert-selection\");\n```\n\n### ui-table:`<id>`:sort-selected-first\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage: Empty.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:sort-selected-first\");\n```\n\n### ui-table:`<id>`:filter\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*String*): Text to filter the rows on the table.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:filter\", \"Male\");\n```\n\n### ui-table:`<id>`:row-selection-changed\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Object*):\n\n* **id** (*String*, mandatory): Identifier of the row changing selection.\n* **selected** (*boolean*, mandatory): ``true`` if the row has been selected, ``false`` otherwise.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:row-selection-changed\", {\n    id : \"4759\",\n    selected : true\n});\n```\n\n### ui-table:`<id>`:column-visibility-changed\n\n`<id>` matches the *id* specified when creating the [table](plugins.md#ui-table).\n\nMessage (*Array* of *int*, mandatory): Array containing the indexes of the currently visible columns.\n\nExample:\n```js\nbus.send(\"ui-table:mytable:column-visibility-changed\", [[ 1, 2, 4, 7 ]]);\n```\n\n# Modules\n\n**Note**: Any module not listed here does not use any configuration.\n\n## `ui.js`\n\nIt provides the following functions:\n\n### `create(type, properties)`\n\nUI creation is managed with a single function instead of a set of events. The function accepts the following arguments:\n\n* **type** (*String*, mandatory): The type of element to create. There are some special element types with added functionality/elements (see list below); apart from that, any valid HTML tag (`div`, `a`, `p`) is a valid type.\n\n  When a special element type matches a valid HTML tag (`input`, `table`, ...), the element is always created with added functionality/elements.\n\n* **props** (*Object*, mandatory): Properties to create the element. The following properties are available for all element types (except when specified); special element types have special properties (see below):\n\n  * **id** (*String*, mandatory): `id` attribute for the created element.\n  * **parent** (*String* or *DOM Element*, mandatory): parent element (`id` attribute or DOM element) where the new element should be added.\n  * **css** (*String*, optional): CSS class(es) to apply to the new element.\n  * **html** (*String*, optional): HTML (inner) content to set for the new element.\n  * **priority** (*int*, optional): Element's priority. If priority is specified, the button will be added at the corresponding index to the parent div, depending on the priorities of the other elements. If priority is not specified, the button will be added at the end.\n\nWhenever an element is created, a new event is sent with the DOM element:\n\n```js\nbus.send(\"ui:created\", elem);\n```\n\n\n#### <a name=\"ui-accordion-group\"></a>accordion-group\n\nExtra `props`:\n\n* **title** (*String*, mandatory): Text to show in the group header.\n* **visible** (*boolean*): Determines wether the content should be visible or not; this is, wether the accordion group should be collapsed or not. Default is *false*.\n\nReturns an object with two DOM elements:\n* **header**\n* **content**\n\nExample:\n```js\nvar accordionGroup = ui.create(\"accordion-group\", {\n    id : \"layers\",\n    parent : \"parent\",\n    title : \"My Layers\",\n    visible : true\n});\naccordionGroup.header.style.color = \"white\";\naccordionGroup.content.style.color = \"black\";\n```\n\n#### <a name=\"ui-button\"></a>button\n\nExtra `props`:\n\n* **tooltip** (*String*, optional): Tooltip to show on mouse over.\n* ~~**text** (*String*, **text** or **image** mandatory): The text to show in the button~~. *Deprecated. Use **html** instead*.\n* **image** (*String*, optional): The image to show in the button background.\n* **clickEventName** (*String*, optional): Name of the event to send when the button is clicked.\n* **clickEventMessage** (*any*, optional): The message to send when the button is clicked. It is ignored if *clickEventName* is not specified.\n* **clickEventCallback** (*function*, optional): The callback to call when the button is clicked. It is ignored if *clickEventName* is also specified.\n\nReturns the button (DOM element).\n\nExample:\n```js\nui.create(\"button\", {\n    id : \"mybutton\",\n    parent : \"mytoolbar\",\n    css : \"mybutton-class\",\n    priority : 200,\n    image : \"images/button.png\",\n    clickEventName : \"button-clicked\",\n    clickEventMessage : \"mybutton\"\n});\n```\n\n#### <a name=\"ui-checkbox\"></a>checkbox\n\nExtra `props`:\n\n* **label** (*String*, mandatory): Text to show for the new item.\n\nReturns the input (DOM element).\n\nExample:\n```js\nui.create(\"checkbox\", {\n    id : \"osm\",\n    parent : \"layer-list\",\n    css : \"layerlist\",\n    label : \"OSM\"\n});\n```\n\n#### <a name=\"ui-choice\"></a>choice\n\nExtra `props`:\n\n* **label** (*String*, optional): Label to show before the choice field.\n* **values** (*Array* of *string* or *Object*, optional): Available values for the choice field. If objects are provided, each object must have ``value`` (the field value itself) and ``text`` (the display text for the value); if strings are provided, each string is used for both value and text.\n\nReturns the input (DOM element).\n\nExample:\n```js\nui.create(\"choice\", {\n    id : \"mychoice\",\n    parent : \"mydialog\",\n    css : \"choice\",\n    label : \"Number: \",\n    values : [ {\n        value : \"value-1\",\n        text : \"1\"\n    }, {\n        value : \"value-2\",\n        text : \"2\"\n    }, {\n        value : \"value-3\",\n        text : \"3\"\n    } ]\n});\n```\n\n\n#### <a name=\"ui-confirm-dialog\"></a>confirm-dialog\n\nExtra `props`:\n\n* **messages** (*Object*):\n    * **question**: Question to be confirmed or not. Optional.\n    * **yes**: Text for the *ok* button.\n    * **no**: Text for the *cancel* button.\n* Any other property that can be accepted by [dialog](#ui-dialog).\n\nReturns the dialog (DOM element).\n\nExample:\n```js\nui.create(\"confirm-dialog\", {\n    id : \"mydialog\",\n    parent : layout.center,\n    css : \"mydialogclass\",\n    title : \"My Dialog\",\n    closeButton : true\n});\n```\n\n#### <a name=\"ui-dialog\"></a>dialog\n\nExtra `props`:\n\n* **title** (*String*, optional): Dialog title.\n* **closeButton** (*boolean*): Determines wether the dialog has a close button or not.\n* **modal** (*boolean*): Determines if the dialog is modal or not.\n* **visible** (*boolean*): Determines wether the dialog should be shown when created or not.\n\nReturns the dialog (DOM element).\n\nExample:\n```js\nui.create(\"dialog\", {\n    id : \"mydialog\",\n    parent : layout.center,\n    css : \"mydialogclass\",\n    title : \"My Dialog\",\n    closeButton : true\n});\n```\n\n#### <a name=\"ui-divstack\"></a>divstack\n\nIn this case `props` must be an array of div identifiers. These divs will be mutually exclusive; if a div is shown all the others will be hidden. This event does **not** create the divs.\n\nReturns `undefined`.\n\nExample:\n```js\nui.create(\"divstack\", [\"mydiv\", \"mydiv2\", \"mydiv3\"]);\n```\n\n#### <a name=\"ui-dropdown-button\"></a>dropdown-button\n\nSame extra `props` as `button`s. Useful for `ui-dropdown-buttons:<id>:*` events.\n\nReturns the button (DOM element).\n\nExample:\n```js\nui.create(\"dropdown-button\", {\n    id : \"mydropdown\",\n    parent : \"layout-center\",\n    tooltip : \"Dropdown button\"\n});\n```\n\n#### <a name=\"ui-input\"></a>input\n\nExtra `props`:\n\n* **label** (*String*, optional): Label to show before the input field.\n* **type** (*String*, optional): Type of input. It must be one of the values supported by the `<input>` tag for the `type` attribute. Default is `text`.\n* **placeholder** (*String*, optional): Placeholder to show in the input.\n* **autocomplete** (*Function*): Enables autocompletion. Used only if `type` is `text`.\n\n  Receives:\n  * **query** (*String*): Current value of the input to autocomplete.\n\n  Returns an *Array* of *Object*. Each object has:\n  * **value** (*String*, mandatory): Text to show in the autocomplete suggestion.\n  * **type** (*String*, optional): CSS class to set in the element containing the suggestion, to style it differently.\n\nThe following properties are only available if `options` have been specified:\n\n* **minQueryLength** (*int*, optional): Minimum number of characters that have to be written before the autocomplete options appear. Default value is 0.\n* **showOnFocus** (*boolean*): Determines whether the autocomplete options will be shown when the control gains focus or not. Note that if the current text is shorter than *minQueryLength*, options won't be shown even if this option is `true`.\n\nReturns the input (DOM element).\n\nExample:\n```js\nui.create(\"input\", {\n    id : \"login-user\",\n    parent : \"mydialog\",\n    css : \"login-field\",\n    label : \"User: \",\n    type : \"text\"\n    placeholder : \"Enter your user\",\n    autocomplete : function(query) {\n      return [ \"User 1\", \"User 2\", \"User 3\" ].filter(function(u) {\n        return u.startsWith(query);\n      });\n    },\n    minQueryLength : 3,\n    showOnFocus : true\n});\n```\n\n#### <a name=\"ui-radio\"></a>radio\n\nExtra `props`:\n\n* **label** (*String*, mandatory): Text to show for the new item.\n\nReturns the input (DOM element).\n\nExample:\n```js\nui.create(\"radio\", {\n    id : \"osm\",\n    parent : \"base-layer\",\n    css : \"baselayer\",\n    label : \"OpenStreetMap\"\n});\n```\n\n#### <a name=\"ui-slider\"></a>slider\n\nExtra `props`:\n\n* **label** (*String*, optional): Label to show before the choice field.\n* **values** (*Array* of *int*, mandatory): Available values for the slider.\n* **value** (*int*, optional): Initial value for the slider. It must be contained in **values**.\n* **snap** (*boolean*, optional): Snap to **values** or not. Default is `false`.\n\nReturns the slider (DOM element). It listens to the `change` and `slide` events. Both return the selected value in `event.detail.value`.\n\nExample:\n```js\nvar slider = ui.create(\"slider\", {\n    id : \"myslider\",\n    parent : \"mydialog\",\n    css : \"slider\",\n    label : \"Number: \",\n    values : [ 1, 2, 3 ],\n    value : 2,\n    snap : true\n});\n\nslider.addEventListener(\"change\", function(event) {\n    console.log(\"Changed: \" + event.detail.value);\n});\n\nslider.addEventListener(\"slide\", function(event) {\n    console.log(\"Slided: \" + event.detail.value);\n});\n```\n\n#### sliding-div\n\nExtra `props`:\n\n* **direction** (*String*, optional): Sliding direction. Available options are ``horizontal``, ``vertical`` and ``both``. Default is ``vertical``.\n* **handlePosition** (*String*, optional): Position for the handle that expands/collapses the div. Available options are ``left``, ``right``, ``top``, ``bottom``, ``top-left``, ``bottom-left``, ``top-right``, ``bottom-right``. Default is ``bottom``.\n* **visible** (*boolean*, optional): Determines whether to show or hide the div when created. Default is ``false``.\n\nReturns the sliding div (DOM element).\n\nExample:\n```js\nui.create(\"sliding-div\", {\n    id : \"mysliding\",\n    parent : \"layout-center\",\n    css : \"sliding-div\",\n    direction : \"both\",\n    handlePosition : \"bottom-right\",\n    visible : true\n});\n```\n\n#### <a name=\"ui-table\"></a>table-ext\n\nA table with very specific functionality. It has the `-ext` suffix so it is possible to create a standard `<table>` tag without this functionality.\n\nExtra `props`:\n\n* **label** (*String*, optional): Label to show before the text area field.\n* **rows** (*int*, optional): Number of rows for the text area.\n* **cols** (*int*, optional): Number of columns for the text area.\n* **hasColumnSelection** (*boolean*, optional): Enable to show a button above the table that allows dynamic column selection. Default is ``false``.\n* **messages** (*Object*, optional): Translation messages for the table. Currently supports the following messages:\n\n  * **info**: Specifies which page and/or rows are being shown among the total. It's possible to use the following placeholders: ``_PAGE_``, ``_PAGES_``, ``_START_``, ``_END_``, ``_TOTAL_``.\n\nReturns the table (DOM element).\n\nExample:\n```js\nui.create(\"table\", {\n    id : \"mytable\",\n    parent : \"layout-center\"\n    css : \"table-class\",\n    messages : {\n        \"info\" : \"Showing records from _START_ to _END_. Total: _TOTAL_.\"\n    }\n});\n```\n\n#### <a name=\"ui-text-area\"></a>text-area\n\nExtra `props`:\n\n* **label** (*String*, optional): Label to show before the text area field.\n* **rows** (*int*, optional): Number of rows for the text area.\n* **cols** (*int*, optional): Number of columns for the text area.\n\nReturns the textarea (DOM element).\n\nExample:\n```js\nui.create(\"text-area\", {\n    id : \"mytextarea\",\n    parent : \"mydialog\",\n    css : \"text-area\",\n    rows : 2,\n    cols : 40\n});\n```\n\n#### `sortable(elem)`\n\nMakes sortable the children of the specified element.\n  * **param `elem`**: `id` (string) or DOM element (Element).\n  * **returns**: `undefined`.\n  * **event `change`**: enabled for the specified element; triggered whenever the order changes. This shouldn't interfere with the `change` event since no `input`, `select`, `textarea` (according to to the [MDN doc](https://developer.mozilla.org/en-US/docs/Web/Events/change), the only Elements triggering `change`) should ever be sortable.\n\n\n### `ui-alerts.js`\n\n* **timeout** (*int*, optional): Number of seconds before the alert disappears. Default is 5.\n* **parentDiv** (*String*, optional): Identifier of the div where the alerts should be added. Defaults to ``layout.center``.\n\n### `ui-sliding-div.js`\n\n* **duration** (*int*, optional): Number of milliseconds for the sliding div animation. Default is 500.\n","maintainers":[{"name":"vicgonco","email":"victor.gonzalez@geomati.co"}],"time":{"modified":"2022-06-12T16:47:45.044Z","created":"2017-09-01T08:36:35.133Z","1.0.0-alpha.0":"2017-09-01T08:36:35.133Z","1.0.0-alpha.1":"2017-09-01T08:39:34.751Z","1.0.0-alpha.2":"2017-09-01T08:48:38.158Z","1.0.0-alpha.3":"2017-09-29T12:12:19.366Z","0.1.0":"2018-02-19T09:34:41.455Z"},"author":{"name":"Víctor González","email":"victor.gonzalez@geomati.co"},"license":"MIT","readmeFilename":"README.md"}