├── .npmrc ├── LICENSE ├── README.md ├── bootstrap-table.png ├── bower.json ├── package.json ├── responsive-table.png ├── smart-table-sort.png ├── smart-table.png ├── src ├── smart.button.js ├── smart.colorinput.js ├── smart.data.js ├── smart.date.js ├── smart.dropdownlist.js ├── smart.element.js ├── smart.export.js ├── smart.filter.js ├── smart.input.js ├── smart.listbox.js ├── smart.pager.js ├── smart.scrollbar.js ├── smart.table.js └── smart.window.js ├── table-component.png ├── table-edit.png ├── table-filter-row.png ├── table-filter.png ├── table-group.png ├── tables.png └── tree-table.png /.npmrc: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [2019y] [jQWidgets LTD] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [Smart.Table](https://www.htmlelements.com) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Get%20over%2020%20free%20custom%20elements%20based%20on%20SmartHTMLElements%20&url=https://www.htmlelements.com/&via=htmlelements&hashtags=bootstrap,design,templates,table,developers,webcomponents,customelements,polymer,material) 2 | 3 | 4 | [Table with Fliter](https://htmlelements.com/demos/table) 5 | 6 | 7 | Smart.Table supports the following features: 8 | 9 | - Sorting by one and multiple columns 10 | - Paging 11 | - Filtering with Filter Row and Filtering Input 12 | - Grouping 13 | - Tree Table 14 | - Expandable Rows 15 | - Cell and Row Editing 16 | - Keyboard navigation 17 | - Selection 18 | - Cell Validation 19 | - Loading on Demand 20 | - Responsive columns 21 | - Multi Row Header and Footer 22 | - Sticky Columns 23 | - Sticky Header 24 | - Columns Reorder 25 | - Data Export to Excel, PDF, HTML, CSV, TSV, HTML 26 | 27 | [Table Component](https://htmlelements.com/demos/table) 28 | 29 | Smart.Table is FREE for everyone. 30 | 31 | Demos: https://www.htmlelements.com/demos/table/overview/ 32 | 33 |   34 | [![Price](https://img.shields.io/badge/price-FREE-0098f7.svg)](https://github.com/HTMLElements/smart-table/blob/master/LICENSE) 35 | [![npm](https://img.shields.io/npm/v/@smarthtmlelements/smart-table.svg?style=flat)](https://www.npmjs.com/package/@smarthtmlelements/smart-table) 36 | [![License: APACHE](https://img.shields.io/badge/license-APACHE-blue.svg)](https://github.com/HTMLElements/smart-table/blob/master/LICENSE) 37 | [![](https://img.shields.io/website-up-down-green-red/https/shields.io.svg?label=www.htmlelements.com)](https://www.htmlelements.com) 38 | [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/htmlelements/smart-table) 39 | 40 | # <smart-table> 41 | 42 | [Live Demo ↗](https://htmlelements.com/demos/table/) 43 | | 44 | [Documentation ↗](https://www.htmlelements.com/docs/) 45 | | 46 | [Documentation for Web Components↗](https://www.htmlelements.com/docs/table/) 47 | | 48 | [Documentation for Angular↗](https://www.htmlelements.com/docs/table/) 49 | | 50 | [Documentation for React↗](https://www.htmlelements.com/docs/table/) 51 | | 52 | 53 | [Installation ↗](https://www.npmjs.com/package/smart-webcomponents-community) 54 | 55 | 56 | [<smart-table>](https://htmlelements.com/demos/table/) is a Custom HTML Element providing an alternative of the standard Table, part of the [Smart UI Community Version](https://htmlelements.com/). 57 | 58 | 59 | 71 | ```html 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 |
CountryAreaPopulation_RuralPopulation_TotalGDP_Total
Brazil85157670.152058090002353025
China93882110.46137553000010380380
France6754170.21645290002846889
Germany3570210.25814590003859547
India32875900.6812862600002047811
Italy3012300.31606763612147952
Japan3778350.071269200004616335
Russia170982420.261465447101857461
United States91474200.1932309700017418925
United Kingdom2448200.18650970002945146
96 | 97 | ``` 98 | 99 | ## Tree Table 100 | 101 | [Table with Tree](https://htmlelements.com/demos/table) 102 | 103 | ## Table Grouping 104 | 105 | [Table with Grouping](https://htmlelements.com/demos/table) 106 | 107 | ## Table with Filter Row 108 | 109 | [Table with Filter Row](https://htmlelements.com/demos/table) 110 | 111 | ## Table with Cell Edit 112 | 113 | [Table with Edit](https://htmlelements.com/demos/table) 114 | 115 | ## Basic table 116 | 117 | [Screenshot of smart-table, using the Material theme](https://htmlelements.com/demos/table) 118 | 119 | ## Table with Bootstrap UI 120 | 121 | [Table Bootstrap](https://htmlelements.com/demos/table) 122 | 123 | ## Table with Sort 124 | 125 | [Screenshot of smart-table, using which is sortable](https://htmlelements.com/demos/table) 126 | 127 | ## Table with Responsive CSS 128 | 129 | [Screenshot of smart-table, using the Responsive Tablet mode](https://htmlelements.com/demos/table) 130 | 131 | 132 | [Screenshot of smart-table, using the Responsive mode](https://htmlelements.com/demos/table) 133 | 134 | 135 | ## Getting Started 136 | 137 | Smart HTML Elements components documentation includes getting started, customization and api documentation topics. 138 | 139 | [Getting Started Documentation](https://www.htmlelements.com/docs/table/) 140 | | 141 | [CSS Documentation](https://www.htmlelements.com/docs/table-css/) 142 | | 143 | [API Documentation](https://www.htmlelements.com/docs/table-api/) 144 | 145 | 146 | ## The file structure for Smart HTML Elements 147 | 148 | - `source/` 149 | 150 | Javascript files. 151 | 152 | - `source/styles/` 153 | 154 | Component CSS Files. 155 | 156 | - `demos/` 157 | 158 | Demo files 159 | 160 | ## Running demos in browser 161 | 162 | 1. Fork the `Smart-HTML-Elements-Core` repository and clone it locally. 163 | 164 | 1. Make sure you have [npm](https://www.npmjs.com/) installed. 165 | 166 | 1. When in the `Smart-HTML-Elements-Core` directory, run `npm install` and then `bower install` to install dependencies. 167 | 168 | 1. Run a localhost or upload the demo on a web server. Then run: 169 | 170 | - /demos/smart-table/overview/ 171 | 172 | 173 | ## Following the coding style 174 | 175 | We are using [ESLint](http://eslint.org/) for linting JavaScript code. 176 | 177 | ## Creating a pull request 178 | 179 | - Make sure your code is compliant with ESLint 180 | - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description 181 | - Wait for response from one of our team members 182 | 183 | 184 | ## License 185 | 186 | Apache License 2.0 187 | -------------------------------------------------------------------------------- /bootstrap-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/bootstrap-table.png -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smart-table", 3 | "authors": [ 4 | "jQWidgets Ltd" 5 | ], 6 | "description": "Smart Table is a FREE Table Web Component with Styles and Functionality which extend the Tables.", 7 | "license": "Apache-2.0", 8 | "keywords": [ 9 | "table", 10 | "bootstrap table", 11 | "bootstrap tables", 12 | "tables web component", 13 | "table web component", 14 | "web component" 15 | ], 16 | "main": "", 17 | "ignore": [ 18 | "**/.*", 19 | "**/node_modules", 20 | "**/bower_components", 21 | "**/tests" 22 | ], 23 | "dependencies": { 24 | "webcomponentsjs": "^1.0.0", 25 | "smart-core": "HTMLElements/smart-core" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smart-table", 3 | "version": "7.7.4", 4 | "description": "Table Web Component", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/HTMLElements/smart-table.git" 12 | }, 13 | "author": "", 14 | "license": "https://htmlelements.com/license/", 15 | "bugs": { 16 | "url": "https://github.com/HTMLElements/smart-table/issues" 17 | }, 18 | "dependencies": { 19 | "@smarthtmlelements/smart-core": "^2.3.0", 20 | "smart-webcomponents": "7.7.1" 21 | }, 22 | "homepage": "https://github.com/HTMLElements/smart-table#readme", 23 | "keywords": [ 24 | "table", 25 | "element", 26 | "bootstrap", 27 | "angular table", 28 | "react table", 29 | "angular datatable", 30 | "react datatable", 31 | "tables", 32 | "table", 33 | "bootstrap table", 34 | "table web component", 35 | "datatable web component", 36 | "table grid", 37 | "datagrid bootstrap", 38 | "bootstrap grid", 39 | "table custom element", 40 | "html carousel", 41 | "material web components", 42 | "table", 43 | "material table", 44 | "custom elements", 45 | "tables" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /responsive-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/responsive-table.png -------------------------------------------------------------------------------- /smart-table-sort.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/smart-table-sort.png -------------------------------------------------------------------------------- /smart-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/smart-table.png -------------------------------------------------------------------------------- /src/smart.button.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v7.7.4 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | /** 7 | * Button custom element. 8 | */ 9 | Smart('smart-button', class Button extends Smart.ContentElement { 10 | // Button's properties. 11 | static get properties() { 12 | return { 13 | 'value': { 14 | type: 'string' 15 | }, 16 | 'name': { 17 | type: 'string' 18 | }, 19 | 'type': { 20 | value: 'button', 21 | type: 'string' 22 | }, 23 | 'clickMode': { 24 | allowedValues: ['hover', 'press', 'release', 'pressAndRelease'], 25 | type: 'string', 26 | value: 'release' 27 | } 28 | }; 29 | } 30 | 31 | 32 | /** 33 | * CSS files needed for the element (ShadowDOM) 34 | */ 35 | static get styleUrls() { 36 | return [ 37 | 'smart.button.css' 38 | ] 39 | } 40 | 41 | /** Button's template. */ 42 | template() { 43 | return ''; 44 | } 45 | 46 | static get listeners() { 47 | return { 48 | 'button.down': '_downHandler', 49 | 'button.mouseenter': '_mouseEnterHandler', 50 | 'button.mouseleave': '_mouseLeaveHandler', 51 | 'button.touchend': '_touchEndHandler', 52 | 'button.click': '_clickHandler', 53 | 'button.up': '_upHandler', 54 | 'up': '_upHandler', 55 | 'button.focus': '_focusHandler', 56 | 'button.blur': '_blurHandler' 57 | }; 58 | } 59 | 60 | focus() { 61 | const that = this; 62 | 63 | if (!that.$.button) { 64 | HTMLElement.prototype.focus.call(that); 65 | return; 66 | } 67 | 68 | that.$.button.focus(); 69 | } 70 | 71 | blur() { 72 | const that = this; 73 | 74 | if (!that.$.button) { 75 | HTMLElement.prototype.blur.call(that); 76 | return; 77 | } 78 | 79 | that.$.button.blur(); 80 | } 81 | 82 | _upHandler(event) { 83 | const that = this; 84 | 85 | event.stopPropagation(); 86 | that.$.setAttributeValue('active', false); 87 | } 88 | 89 | _focusHandler() { 90 | const that = this; 91 | 92 | that.$.setAttributeValue('focus', true); 93 | that.$.fireEvent('focus'); 94 | } 95 | 96 | _blurHandler() { 97 | const that = this; 98 | 99 | that.$.setAttributeValue('focus', false); 100 | that.$.fireEvent('blur'); 101 | } 102 | 103 | _clickHandler(event) { 104 | const that = this; 105 | 106 | if ((that.clickMode !== 'release' && that.clickMode !== 'pressAndRelease') || that.readonly) { 107 | event.preventDefault(); 108 | event.stopPropagation(); 109 | } 110 | } 111 | 112 | _downHandler(event) { 113 | const that = this; 114 | 115 | if (that.disabled) { 116 | return; 117 | } 118 | 119 | //if (!that.enableShadowDOM) { 120 | // event.originalEvent.stopPropagation(); 121 | //} 122 | 123 | if (that.hasRippleAnimation) { 124 | Smart.Utilities.Animation.Ripple.animate(that, event.pageX, event.pageY); 125 | } 126 | 127 | that.$.setAttributeValue('active', true); 128 | 129 | if ((that.clickMode === 'press' || that.clickMode === 'pressAndRelease') && !that.readonly) { 130 | const buttons = ('buttons' in event) ? event.buttons : event.which; 131 | 132 | that.$.fireEvent('click', { buttons: buttons, clientX: event.clientX, clientY: event.clientY, pageX: event.pageX, pageY: event.pageY, screenX: event.screenX, screenY: event.screenY }); 133 | } 134 | } 135 | 136 | _mouseEnterHandler(event) { 137 | const that = this; 138 | 139 | if (that.readonly) { 140 | return; 141 | } 142 | 143 | that.$button.setAttributeValue('hover', true); 144 | that.$.setAttributeValue('hover', true); 145 | 146 | if (that.clickMode === 'hover') { 147 | const buttons = ('buttons' in event) ? event.buttons : event.which; 148 | 149 | that.$.fireEvent('click', { buttons: buttons, clientX: event.clientX, clientY: event.clientY, pageX: event.pageX, pageY: event.pageY, screenX: event.screenX, screenY: event.screenY }); 150 | } 151 | } 152 | 153 | _touchEndHandler() { 154 | const that = this; 155 | 156 | setTimeout(function () { 157 | that.$button.setAttributeValue('hover', false); 158 | that.$.setAttributeValue('hover', false); 159 | }, 300); 160 | } 161 | 162 | _mouseLeaveHandler() { 163 | const that = this; 164 | 165 | that.$button.setAttributeValue('hover', false); 166 | that.$.setAttributeValue('hover', false); 167 | } 168 | 169 | /** 170 | * Called when a property is changed. 171 | */ 172 | propertyChangedHandler(propertyName, oldValue, newValue) { 173 | super.propertyChangedHandler(propertyName, oldValue, newValue); 174 | 175 | const that = this; 176 | 177 | if (propertyName === 'disabled') { 178 | that._setFocusable(); 179 | 180 | if (that.$button) { 181 | that.$button.setAttributeValue('hover', false); 182 | } 183 | 184 | that.$.setAttributeValue('hover', false); 185 | 186 | if (that instanceof Smart.RepeatButton) { 187 | that._stopRepeat(); 188 | } 189 | } 190 | else if (propertyName === 'unfocusable') { 191 | that._setFocusable(); 192 | } 193 | } 194 | 195 | /** 196 | * Sets tab index 197 | */ 198 | _setFocusable() { 199 | const that = this; 200 | 201 | const target = that.$.button ? that.$.button : that; 202 | 203 | if (that.disabled || that.unfocusable) { 204 | target.removeAttribute('tabindex'); 205 | target.tabIndex = -1; 206 | return; 207 | } 208 | 209 | target.tabIndex = that.tabIndex > 0 ? that.tabIndex : 0; 210 | } 211 | 212 | ready() { 213 | const that = this; 214 | 215 | super.ready(); 216 | 217 | that.setAttribute('role', 'button'); 218 | 219 | that._setFocusable(); 220 | 221 | if (that.enableShadowDOM && that.$.hiddenInput) { 222 | that.appendChild(that.$.hiddenInput); 223 | } 224 | 225 | 226 | } 227 | }); 228 | 229 | /** 230 | * Repeat Button. 231 | */ 232 | Smart('smart-repeat-button', class RepeatButton extends Smart.Button { 233 | // button's properties. 234 | static get properties() { 235 | return { 236 | 'delay': { 237 | value: 50, 238 | type: 'number' 239 | }, 240 | 'initialDelay': { 241 | value: 150, 242 | type: 'number' 243 | } 244 | }; 245 | } 246 | 247 | static get listeners() { 248 | return { 249 | 'button.down': '_startRepeat', 250 | 'button.mouseenter': '_overriddenHandler', 251 | 'button.mouseleave': '_overriddenHandler', 252 | 'button.pointerenter': '_updateInBoundsFlag', 253 | 'button.pointerleave': '_updateInBoundsFlag', 254 | 'button.touchmove': '_touchmoveHandler', 255 | 'document.up': '_stopRepeat' 256 | }; 257 | } 258 | 259 | _clickHandler(event) { 260 | const that = this; 261 | 262 | if (that.clickMode !== 'release' || that.preventDefaultClick || that.readonly || that.disabled) { 263 | event.preventDefault(); 264 | event.stopPropagation(); 265 | that.preventDefaultClick = false; 266 | } 267 | } 268 | 269 | _updateInBoundsFlag(event) { 270 | const that = this; 271 | 272 | if (event.type.indexOf('leave') !== -1) { 273 | that._isPointerInBounds = false; 274 | 275 | that.$button.setAttributeValue('hover', false); 276 | that.$.setAttributeValue('hover', false); 277 | } 278 | else { 279 | that._isPointerInBounds = true; 280 | 281 | that.$button.setAttributeValue('hover', true); 282 | that.$.setAttributeValue('hover', true); 283 | } 284 | 285 | const buttons = ('buttons' in event) ? event.buttons : event.which; 286 | 287 | if (buttons !== 1) { 288 | that._stopRepeat(event); 289 | } 290 | } 291 | 292 | _startRepeat(event) { 293 | const that = this; 294 | 295 | that.setAttribute('active', ''); 296 | 297 | if (!that._initialTimer && !that.readonly) { 298 | that._initialTimer = setTimeout(function () { 299 | that._repeatTimer = setInterval(() => { 300 | if (that._isPointerInBounds) { 301 | const buttons = ('buttons' in event) ? event.buttons : event.which; 302 | 303 | that.$.fireEvent('click', { buttons: buttons, clientX: event.clientX, clientY: event.clientY, pageX: event.pageX, pageY: event.pageY, screenX: event.screenX, screenY: event.screenY }); 304 | that.preventDefaultClick = true; 305 | } 306 | }, that.delay); 307 | }, that.initialDelay); 308 | } 309 | } 310 | 311 | _stopRepeat(event) { 312 | const that = this; 313 | 314 | if (that.readonly || event && 315 | (event.type === 'pointercancel' || 316 | event.originalEvent && event.originalEvent.type === 'pointercancel')) { 317 | return; 318 | } 319 | 320 | that.$.setAttributeValue('active', false); 321 | 322 | if (that._repeatTimer) { 323 | clearInterval(that._repeatTimer); 324 | that._repeatTimer = null; 325 | } 326 | 327 | if (that._initialTimer) { 328 | clearTimeout(that._initialTimer); 329 | that._initialTimer = null; 330 | } 331 | } 332 | 333 | _touchmoveHandler(event) { 334 | if (this.preventDefaultClick && event.cancelable) { 335 | event.preventDefault(); 336 | event.stopPropagation(); 337 | } 338 | } 339 | 340 | _overriddenHandler() { } 341 | }); 342 | 343 | /** 344 | * Toggle Button. 345 | */ 346 | Smart('smart-toggle-button', class ToggleButton extends Smart.Button { 347 | // Toggle Button's properties. 348 | static get properties() { 349 | return { 350 | 'checked': { 351 | value: false, 352 | type: 'boolean?' 353 | }, 354 | 'falseContent': { 355 | value: '', 356 | reflectToAttribute: false, 357 | type: 'string' 358 | }, 359 | 'indeterminateContent': { 360 | value: '', 361 | reflectToAttribute: false, 362 | type: 'string' 363 | }, 364 | 'indeterminate': { 365 | value: false, 366 | type: 'boolean' 367 | }, 368 | 'trueContent': { 369 | value: '', 370 | reflectToAttribute: false, 371 | type: 'string' 372 | }, 373 | 'indeterminateTemplate': { 374 | value: null, 375 | type: 'any' 376 | }, 377 | 'trueTemplate': { 378 | value: null, 379 | type: 'any' 380 | }, 381 | 'falseTemplate': { 382 | value: null, 383 | type: 'any' 384 | }, 385 | 'type': { 386 | value: 'toggle', 387 | type: 'string', 388 | defaultReflectToAttribute: true, 389 | readonly: true 390 | } 391 | }; 392 | } 393 | 394 | /** 395 | * Toggle Button's event listeners. 396 | */ 397 | static get listeners() { 398 | return { 399 | 'keydown': '_keyHandler', 400 | 'keyup': '_keyHandler', 401 | 'dragstart': '_dragStartHandler', 402 | 'button.click': '_buttonClickHandler', 403 | 'button.mouseenter': '_buttonMouseEnterHandler', 404 | 'button.mouseleave': '_buttonMouseLeaveHandler', 405 | 'document.up': '_documentUpHandler' 406 | }; 407 | } 408 | 409 | /** Called when the element is ready. Used for one-time configuration of the ToggleButton. */ 410 | ready() { 411 | super.ready(); 412 | 413 | this._setAriaState(); 414 | } 415 | 416 | /** 417 | * Sets WAI-ARIA state. 418 | */ 419 | _setAriaState() { 420 | const that = this, 421 | checked = that.checked; 422 | 423 | if (checked === null) { 424 | that.setAttribute('aria-pressed', 'mixed'); 425 | return; 426 | } 427 | 428 | that.setAttribute('aria-pressed', checked); 429 | } 430 | 431 | /** 432 | * Overrides the inherited "click" handler of the inner button element. 433 | */ 434 | _buttonClickHandler() { } 435 | 436 | _buttonMouseLeaveHandler() { 437 | const that = this; 438 | 439 | that.removeAttribute('hover'); 440 | } 441 | 442 | /** 443 | * Changes the check state on hover. 444 | */ 445 | _buttonMouseEnterHandler() { 446 | const that = this; 447 | 448 | that.setAttribute('hover', ''); 449 | 450 | if ((that.disabled) || (that.readonly) || (that.clickMode !== 'hover')) { 451 | return; 452 | } 453 | 454 | that._changeCheckState('pointer'); 455 | that.focus(); 456 | that._updateHidenInputNameAndValue(); 457 | } 458 | 459 | /** Changes the check state wneh widget container is clicked. */ 460 | _documentUpHandler(event) { 461 | const that = this; 462 | 463 | if (!that._pressed) { 464 | return; 465 | } 466 | 467 | that._pressed = false; 468 | 469 | if ((that.disabled) || (that.readonly) || (that.clickMode === 'press') || 470 | event.originalEvent.type === 'pointercancel') { 471 | return; 472 | } 473 | 474 | that._changeCheckState('pointer'); 475 | that.focus(); 476 | that._updateHidenInputNameAndValue(); 477 | } 478 | 479 | _downHandler(event) { 480 | const that = this; 481 | 482 | if (that.disabled || that.readonly) { 483 | return; 484 | } 485 | 486 | if (that.hasRippleAnimation) { 487 | Smart.Utilities.Animation.Ripple.animate(that, event.pageX, event.pageY); 488 | } 489 | 490 | that._pressed = true; 491 | 492 | if (that.clickMode === 'press' || that.clickMode === 'pressAndRelease') { 493 | that._changeCheckState('pointer'); 494 | that.$.fireEvent('click'); 495 | that._updateHidenInputNameAndValue(); 496 | } 497 | 498 | if (that.clickMode === 'press') { 499 | event.preventDefault(); 500 | event.stopPropagation(); 501 | } 502 | } 503 | 504 | _dragStartHandler(event) { 505 | event.preventDefault(); 506 | } 507 | 508 | /** Changes the check state when spacebar is pressed. */ 509 | _keyHandler(event) { 510 | const that = this; 511 | 512 | if ((that.disabled !== true) && !that.readonly && (event.keyCode === 32)) { 513 | if (event.type === 'keydown') { 514 | event.preventDefault(); 515 | return; 516 | } 517 | 518 | if (that.switchMode === 'none') { 519 | return; 520 | } 521 | 522 | that._changeCheckState('keyboard'); 523 | that._updateHidenInputNameAndValue(); 524 | } 525 | } 526 | 527 | /** Changes the check state. */ 528 | _changeCheckState(changeType) { 529 | const that = this; 530 | 531 | let oldValue = null; 532 | 533 | if (that.checked === null) { 534 | that.checked = true; 535 | } 536 | else { 537 | oldValue = that.checked; 538 | that.checked = !that.checked; 539 | } 540 | 541 | that._handleTextSelection(); 542 | 543 | that.$.fireEvent('change', { 'value': that.checked, 'oldValue': oldValue, changeType: changeType }); 544 | that._setAriaState(); 545 | } 546 | 547 | _handleTextSelection() { 548 | const that = this; 549 | 550 | that.$.addClass('smart-unselectable'); 551 | 552 | if (that.timer) { 553 | clearTimeout(that.timer); 554 | } 555 | 556 | that.timer = setTimeout(() => that.$.removeClass('smart-unselectable'), 500); 557 | } 558 | 559 | /** 560 | * Called when a property is changed. 561 | */ 562 | propertyChangedHandler(propertyName, oldValue, newValue) { 563 | super.propertyChangedHandler(propertyName, oldValue, newValue); 564 | const that = this; 565 | 566 | if (propertyName === 'checked') { 567 | that.$.fireEvent('change', { 'value': newValue, 'oldValue': oldValue, changeType: 'api' }); 568 | that._setAriaState(); 569 | return; 570 | } 571 | 572 | switch (propertyName) { 573 | case 'trueTemplate': 574 | that._handleTemplate(true); 575 | break; 576 | case 'falseTemplate': 577 | that._handleTemplate(false); 578 | break; 579 | case 'indeterminateTemplate': 580 | that._handleTemplate(); 581 | break; 582 | } 583 | } 584 | 585 | _htmlBindOnInitialization() { 586 | const that = this; 587 | 588 | that._bindContentProperty('trueContent', 'smart-true-content'); 589 | that._bindContentProperty('falseContent', 'smart-false-content'); 590 | that._bindContentProperty('indeterminateContent', 'smart-indeterminate-content'); 591 | } 592 | 593 | _bindContentProperty(propertyName, className) { 594 | const that = this; 595 | 596 | if (!that.$[propertyName + 'Container']) { 597 | return; 598 | } 599 | 600 | let testElement = document.createElement('div'); 601 | 602 | testElement.innerHTML = that.innerHTML; 603 | 604 | let elements = testElement.getElementsByClassName(className), 605 | element; 606 | 607 | if (elements.length > 0) { 608 | for (let i = 0; i < elements.length; i++) { 609 | element = elements[i]; 610 | } 611 | } 612 | 613 | if (that[propertyName] === '') { 614 | that[propertyName] = element === undefined ? '' : element.outerHTML; 615 | } 616 | 617 | that.$[propertyName + 'Container'].innerHTML = that[propertyName]; 618 | } 619 | 620 | _updateContentProperties() { 621 | const that = this; 622 | 623 | update('trueContent'); 624 | update('falseContent'); 625 | update('indeterminateContent'); 626 | 627 | function update(property) { 628 | if (that.$[property + 'Container']) { 629 | that[property] = that.$[property + 'Container'].innerHTML; 630 | } 631 | } 632 | } 633 | 634 | _updateHidenInputValue() { 635 | const that = this; 636 | 637 | if (!that.$.hiddenInput) { 638 | return; 639 | } 640 | 641 | let inputValue; 642 | 643 | if (that.checked === null) { 644 | inputValue = 'null'; 645 | } 646 | else if (that.checked === false) { 647 | inputValue = 'off'; 648 | } 649 | else { 650 | inputValue = that.value || 'on'; 651 | } 652 | 653 | that.$.hiddenInput.setAttribute('value', inputValue); 654 | } 655 | 656 | _updateHidenInputName() { 657 | const that = this; 658 | 659 | if (!that.$.hiddenInput) { 660 | return; 661 | } 662 | 663 | let inputName = that.checked === false ? '' : that.name || ''; 664 | 665 | that.$.hiddenInput.setAttribute('name', inputName); 666 | } 667 | 668 | _updateHidenInputNameAndValue() { 669 | const that = this; 670 | 671 | that._updateHidenInputName(); 672 | that._updateHidenInputValue(); 673 | } 674 | 675 | /** 676 | * Apply a template to true/false/indeterminate states of the elements. 677 | */ 678 | _handleTemplate(state, oldValue) { 679 | const that = this; 680 | let template, templateTarget, value; 681 | 682 | 683 | if (state === true) { 684 | template = that.trueTemplate; 685 | templateTarget = that.$.trueContentContainer; 686 | value = that.trueContent; 687 | } 688 | else if (state === false) { 689 | template = that.falseTemplate; 690 | templateTarget = that.$.falseContentContainer; 691 | value = that.falseContent; 692 | } 693 | else { 694 | template = that.indeterminateTemplate; 695 | templateTarget = that.$.indeterminateContentContainer; 696 | value = that.indeterminateContent; 697 | } 698 | 699 | if (oldValue) { 700 | templateTarget.innerHTML = value ? value : ''; 701 | } 702 | 703 | if (template === null || !template) { 704 | return; 705 | } 706 | 707 | if (typeof template === 'function') { 708 | template(templateTarget, { value: value }); 709 | return; 710 | } 711 | 712 | if (!('content' in document.createElement('template'))) { 713 | that.error(that.localize('htmlTemplateNotSuported', { elementType: that.nodeName.toLowerCase() })); 714 | return; 715 | } 716 | 717 | template = document.getElementById(template); 718 | if (template === null || !('content' in template)) { 719 | that.error(that.localize('invalidTemplate', { elementType: that.nodeName.toLowerCase(), property: 'template' })); 720 | return; 721 | } 722 | 723 | const content = template.content, 724 | childrenCount = content.childNodes.length, 725 | regex = /{{\w+}}/g; 726 | let bindingString, 727 | bindingDetails = []; 728 | 729 | for (let i = 0; i < childrenCount; i++) { 730 | bindingString = regex.exec(content.childNodes[i].innerHTML); 731 | while (bindingString) { 732 | bindingDetails.push({ childNodeIndex: i, bindingString: bindingString[0] }); 733 | bindingString = regex.exec(content.childNodes[i].innerHTML); 734 | } 735 | } 736 | 737 | const bindingsCount = bindingDetails.length; 738 | let clone = document.importNode(template.content, true), 739 | bindingHolderElement, 740 | bindingStringsCount; 741 | 742 | for (let b = 0; b < bindingsCount; b++) { 743 | bindingHolderElement = clone.childNodes[bindingDetails[b].childNodeIndex]; 744 | bindingStringsCount = bindingDetails.length; 745 | for (let i = 0; i < bindingStringsCount; i++) { 746 | bindingHolderElement.innerHTML = bindingHolderElement.innerHTML.replace(bindingDetails[b].bindingString, value); 747 | } 748 | } 749 | 750 | templateTarget.innerHTML = ''; 751 | for (let i = 0; i < clone.childNodes.length; i++) { 752 | if (clone.childNodes[i].outerHTML) { 753 | templateTarget.innerHTML += clone.childNodes[i].outerHTML; 754 | } 755 | } 756 | } 757 | }); 758 | 759 | -------------------------------------------------------------------------------- /src/smart.colorinput.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v8.0.0 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | !function(e){var t={};function r(a){if(t[a])return t[a].exports;var o=t[a]={i:a,l:!1,exports:{}};return e[a].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(a,o,function(t){return e[t]}.bind(null,o));return a},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=19)}({19:function(e,t){Smart("smart-color-input",class extends Smart.Input{static get properties(){return{dataSource:{type:"any",value:null},displayMode:{value:"default",allowedValues:["default","grid"],type:"string"},dropDownHeight:{type:"any",value:"auto"},messages:{value:{en:{standardColors:"Standard colors",themeShadeColors:"",themeColors:"Theme colors"}},type:"object",extend:!0},placeholder:{value:"Please Select Color",type:"string"},valueDisplayMode:{value:"default",allowedValues:["default","colorBox","colorCode"],type:"string"},valueFormat:{value:"hex",allowedValues:["rgb","rgba","hex"],type:"string"}}}static get listeners(){return{"input.focus":"_focusHandler","input.blur":"_blurHandler","input.keydown":"_keyDownHandler","input.keyup":"_keyUpHandler","input.keypress":"_keyPressHandler","input.select":"_inputSelectHandler","dropDownButton.down":"_dropDownButtonDownHandler","inputContainer.down":"_downHandler","document.up":"_documentUpHandler"}}template(){return''}open(){const e=this;let t;e.dropDownDataSource?(e.query="",t="function"==typeof e.dataSource?e.dataSource(e.query):e.dataSource):t="function"==typeof e.dropDownDataSource?e.dropDownDataSource(e.query):e.dropDownDataSource,e._process(t);const r=e.$.menu.querySelector(".color-sample.selected");if(r){const t=e.$.input.dataValue,a=e.$.menu.querySelectorAll(".color-sample");for(let o=0;o=a&&r>=o?(s=r,n=a>o?o:a):a>=o&&a>=r?(s=a,n=r>o?o:r):(s=o,n=a>r?r:a),l.v=s,l.s=s?(s-n)/s:0,l.s){const e=s-n;l.h=r===s?(a-o)/e:a===s?2+(o-r)/e:4+(r-a)/e,l.h=60*l.h,l.h<0&&(l.h+=360)}else l.h=0;return l.s=parseFloat(l.s),l.v=parseFloat(l.v),l}_rgbArrayToHEX(e){let t="#";if(Array.isArray(e)&&null===e[0])return null;for(let r=0;r<3;r++){let a=parseInt(e[r]).toString(16).toUpperCase();a=1===a.length?0+a:a,t+=a}let r=parseFloat(e[3]);return isNaN(r)||(r=parseInt(255*r).toString(16).toUpperCase(),"FF"!==r&&(t=t.slice(0,7)+(1===r.length?0+r:r))),t}_HSVtoRGBA(e,t){const r=(e=e||{h:0,s:0,v:0}).h,a=e.s,o=e.v;let l,n,s,i=o*a,d=r/60,c=i*(1-Math.abs(d%2-1));d>=0&&d<=1?[l,n,s]=[i,c,0]:d>=1&&d<=2?[l,n,s]=[c,i,0]:d>=2&&d<=3?[l,n,s]=[0,i,c]:d>=3&&d<=4?[l,n,s]=[0,c,i]:d>=4&&d<=5?[l,n,s]=[c,0,i]:d>=5&&d<=6&&([l,n,s]=[i,0,c]);const u=o-i;return"rgba("+Math.round(255*(l+u))+", "+Math.round(255*(n+u))+", "+Math.round(255*(s+u))+", "+(void 0!==t?t:this._getRGBA().a||0)+")"}_toRGBA(e,t){const r=this;let a=r.value;function o(e){const r=/^#(.)(.)(.)$/gi.exec(e),a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(e),o=r?parseInt(r[1]+r[1],16):parseInt(a[1],16),l=r?parseInt(r[2]+r[2],16):parseInt(a[2],16),n=r?parseInt(r[3]+r[3],16):parseInt(a[3],16),s=r?parseInt(r[4]+r[4],16):parseInt(a[4],16);return t?"rgba("+o+", "+l+", "+n+", 1)":"rgba("+o+", "+l+", "+n+", "+(isNaN(s)?"1":s/255)+")"}if(r._isRGBA(e)){if(t){return"rgba("+e.match(/(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})/gi)+", 1)"}return e}if(r._isValidColorName(e))a=o(r._cssColorNamesHEX[e.trim().toLowerCase()]);else if(r._isHEX(e))a=o(e);else{if(!r._isRGB(e))return!1;a=e.toLowerCase(),a=a.replace("rgb","rgba"),a=a.replace(")",", 1)")}return a}_isHEX(e){return/(^#[0-9A-F]{3}$)|(^#[0-9A-F]{6}$)|(^#[0-9A-F]{8}$)/i.test(e)}_isRGB(e){return/rgb\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\)/i.test(e)}_isValidColorName(e){return!(!e||void 0===this._cssColorNamesHEX[e.trim().toLowerCase()])}_isRGBA(e){return/rgba\((\d*.\d+|\d+)\s*,\s*(\d*.\d+|\d+)\s*,\s*(\d*.\d+|\d+)\s*,\s*(\d*.\d+|\d+)\)/i.test(e)}_isValidColor(e){return this._isHEX(e)||this._isRGB(e)||this._isRGBA(e)||this._isValidColorName(e)}_performSelect(){const e=this,t=e.$.menu.querySelector(".selected")||e.$.menu.querySelector(".color-sample"),r=t.getAttribute("data-label"),a=t.getAttribute("value"),o=e.value,l=e.$.input.dataValue;e.value=e.$.colorSample.style.backgroundColor=e._formatValue(r),e.$.input.dataValue=a,e.value?(e.$colorSampleContainer.removeClass("no-color"),e.$.colorSample.setAttribute("aria-label",e.value)):(e.$colorSampleContainer.addClass("no-color"),e.$.colorSample.setAttribute("aria-label","No color")),t.classList.add("selected"),t.setAttribute("aria-current",!0),r===o&&a===l||e.$.fireEvent("change",{value:a,label:r,oldValue:l,oldLabel:o}),e.close()}_process(e){const t=this;if(e||(e=[]),"string"==typeof(e=e.slice(0))&&(e=t.$.deserialize(e,"array")),t.matcher)e=e.filter(e=>t.matcher(e)>-1);else if(t.query){let r=[];for(let e in t._cssColorNamesHEX)t._matcher(e,!0)>-1&&r.push(t._cssColorNamesHEX[e]);if(r.length)e=r;else if(e.length||null!==t.dataSource&&void 0!==t.dataSource)e=e.filter(e=>t._matcher(e)>-1);else{let r=t._generateColors();"default"===t.displayMode&&(r=[].concat.apply([],r.map(e=>Object.values(e)[0]))),e=r.filter(e=>t._matcher(e)>-1)}}!(e=t._sorter(e)).length&&t.opened&&t.close(),t.query.length>0&&!e.length||!e.length&&null!==t.dataSource&&void 0!==t.dataSource||(t.query.length>0?t._render(e.slice(0,t.items)):t._render(e),t._open(),t._refreshMenu(),t.ensureVisible())}_matcher(e,t){const r=this.query;if(e=t?e.label||e:this._formatValue(e.label||e),!r)return-1;switch(this.queryMode){case"startsWith":return e.startsWith(r);case"startsWithIgnoreCase":return e.toLowerCase().startsWith(r.toLowerCase());case"doesNotContain":return e.indexOf(r)<0;case"doesNotContainIgnoreCase":return e.toLowerCase().indexOf(r.toLowerCase())<0;case"contains":return e.indexOf(r)>-1;default:case"containsIgnoreCase":return e.toLowerCase().indexOf(r.toLowerCase());case"equals":return 0===e.localeCompare(r);case"equalsIgnoreCase":return 0===e.toLowerCase().localeCompare(r.toLowerCase());case"endsWith":return e.endsWith(r);case"endsWithIgnoreCase":return e.toLowerCase().endsWith(r.toLowerCase())}}_render(e){const t=this;if(t.$.menu.innerHTML="",e.length)t.$.menu.appendChild(t._createColorGroup(t._createColorSamples(e)));else if((null===t.dataSource||void 0===t.dataSource)&&!t.query.length)if(e=t._generateColors(),"default"===t.displayMode){const e=t._generateColors();for(let r=0;r0&&!t.$.menu.querySelector(".selected")&&(r[0].classList.add("selected"),r[0].setAttribute("aria-current",!0),t._setActiveDescendant(r[0])),r}ensureVisible(){this.$.menu.querySelector(".color-sample.selected")}_next(){const e=this,t=e.$.menu.querySelector(".color-sample.selected");if(!t){const t=e.$.menu.querySelector(".color-sample");return t.classList.add("selected"),t.setAttribute("aria-current",!0),void e._setActiveDescendant(t)}t.removeAttribute("aria-current"),t.classList.remove("selected");let r=t.nextElementSibling;if(!r){let a=t.parentElement.nextElementSibling;for(;a;){if(a.classList.contains("grid-samples-container")){r=a.children[0];break}a=a.nextElementSibling}r||(r=e.$.menu.querySelector(".color-sample"))}r.classList.add("selected"),r.setAttribute("aria-current",!0),e._setActiveDescendant(r),e.ensureVisible()}_prev(){const e=this,t=e.$.menu.querySelector(".color-sample.selected");if(!t){const t=e.$.menu.querySelector(".color-sample");return t.classList.add("selected"),t.setAttribute("aria-current",!0),void e._setActiveDescendant(t)}t.removeAttribute("aria-current"),t.classList.remove("selected");let r=t.previousElementSibling;if(!r){let a=t.parentElement.previousElementSibling;for(;a;){if(a.classList.contains("grid-samples-container")){r=a.children[a.children.length-1];break}a=a.previousElementSibling}r||(r=e.$.menu.querySelector(".grid-samples-container:last-of-type .color-sample:last-of-type"))}r.classList.add("selected"),r.setAttribute("aria-current",!0),e._setActiveDescendant(r),e.ensureVisible()}_move(e){const t=this;if(t.opened){switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 37:case 38:e.preventDefault(),t[t.rightToLeft?"_next":"_prev"]();break;case 39:case 40:e.preventDefault(),t[t.rightToLeft?"_prev":"_next"]()}e.stopPropagation()}}_inputSelectHandler(){const e=this;e.readonly&&(e.$.input.selectionStart=e.$.input.selectionEnd)}_keyDownHandler(e){const t=this;t._suppressKeyPressRepeat=![37,38,39,40,9,13,27,16,17,18].includes(e.keyCode),e.shiftKey||e.ctrlKey||(e.altKey?"ArrowUp"===e.key?t.close():"ArrowDown"===e.key&&t.open():t._move(e))}_keyUpHandler(e){const t=this;if(!(e.shiftKey||e.altKey||e.ctrlKey))switch(e.keyCode){case 40:case 39:case 38:case 37:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&t.open(),38===e.keyCode&&e.altKey&&t.close();break;case 9:case 13:if(!t.opened)return void(13===e.keyCode&&t.open());t._performSelect(),e.stopPropagation(),e.preventDefault();break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault();break;default:if(t.readonly)return void(32!==e.keyCode||t.opened||t.open());t._lookup(e),!t.opened||e.ctrlKey||e.shiftKey||(e.stopPropagation(),e.preventDefault()),t.$.input.dataValue=t.$.input.value,t._isValidColor(t.value)||(t.$colorSampleContainer.addClass("no-color"),t.$.colorSample.setAttribute("aria-label","No color"),t.$.colorSample.style.backgroundColor="")}}propertyChangedHandler(e,t,r){super.propertyChangedHandler(e,t,r);const a=this;if("dropDownHeight"===e)a.$.scrollView.style.setProperty("--smart-input-drop-down-menu-height",a.dropDownHeight+"px");else if("opened"===e)a.opened=t,r?a.open():a.close();else if("placeholder"===e){if(a.readonly){const e=a.getAttribute("aria-label");if(e&&e!==t)return;r?a.setAttribute("aria-label",r):a.removeAttribute("aria-label")}}else"readonly"===e?a._setAriaRelations():"theme"===e?a.$.scrollView.setAttribute(e,r):"rightToLeft"===e?r?a.$.scrollView.setAttribute("right-to-left",""):a.$.scrollView.removeAttribute("right-to-left"):"valueFormat"===e?(a.value=a._formatValue(a.value),a.$.input.dataValue=a.value):"displayMode"===e?a.open():"value"===e&&(a.set("value",a.$.input.dataValue=a.$.colorSample.style.backgroundColor=a._formatValue(r)),a.value||a.$colorSampleContainer.addClass("no-color"))}_createElement(){const e=this,t=document.createElement("div"),r=document.createElement("div");r.classList.add("smart-color-input-drop-down-menu","smart-color-panel"),r.setAttribute("theme",e.theme),e.$.scrollView=r,e.rightToLeft?e.$.scrollView.setAttribute("right-to-left",""):e.$.scrollView.removeAttribute("right-to-left"),e.$.menu=t,e.$.menu.classList.add("default-samples-container","grid-mode-container","smart-container"),e.$.scrollView.onclick=function(t){t.stopPropagation(),t.preventDefault(),e._performSelect(),e.$.input.focus()},e.classList.add("smart-drop-down-box","smart-color-picker"),e.value?(e.$colorSampleContainer.removeClass("no-color"),e.$.colorSample.setAttribute("aria-label",e.value)):(e.$colorSampleContainer.addClass("no-color"),e.$.colorSample.setAttribute("aria-label","No color")),e._cssColorNamesHEX={aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4","indianred ":"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",rebeccapurple:"#663399",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32"}}_setAriaRelations(){const e=this,t=e.getAttribute("aria-label");e.readonly?(e.setAttribute("role","button"),!t&&e.placeholder&&e.setAttribute("aria-label",e.placeholder),e.$.input.setAttribute("aria-hidden",!0),e.$.input.removeAttribute("aria-activedescendant"),e.$.input.removeAttribute("aria-controls"),e.$.dropDownButton.setAttribute("aria-hidden",!0)):(e.setAttribute("role","combobox"),t&&t===e.placeholder&&e.removeAttribute("aria-label"),e.$.input.setAttribute("role","searchbox"),e.$.input.removeAttribute("aria-hidden",!0),e.$.dropDownButton.removeAttribute("aria-hidden")),e.setAttribute("aria-expanded",e.opened),e.setAttribute("aria-haspopup","listbox"),e.$.scrollView.setAttribute("role","listbox")}})}}); -------------------------------------------------------------------------------- /src/smart.data.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v8.0.0 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | !function(e){var t={};function n(r){if(t[r])return t[r].exports;var a=t[r]={i:r,l:!1,exports:{}};return e[r].call(a.exports,a,a.exports,n),a.l=!0,a.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)n.d(r,a,function(t){return e[t]}.bind(null,a));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=26)}({26:function(e,t){Smart.DataAdapter=window.smartDataAdapter=class{constructor(e){e||(e={});const t=Object.assign(this,e);t.key=(65536*(1+Math.random())|0).toString(16).substring(1),t.$document=Smart.Utilities.Extend(document),t.boundSource=!1===t.observable?[]:new Smart.ObservableArray,t.dataItemById=[],void 0===t.allowAdd&&(t.allowAdd=!0),void 0===t.allowRemove&&(t.allowRemove=!0),void 0===t.allowUpdate&&(t.allowUpdate=!0),void 0===e.observable&&(t.observable=!0),e.dataSource||(t.dataSource=[]),e.dataFields||(t.dataFields=[]),e.dataSourceType||(t.dataSourceType="array"),e.id||(t.id=null),e.autoFetch||(t.autoFetch=!0),e.dataFields&&(t.dataFields=e.dataFields),Object.defineProperty(t,"groupBy",{configurable:!1,enumerable:!0,get:()=>t._groupBy?t._groupBy:[],set(e){const n=()=>{t.boundHierarchy=null,t.refreshHierarchy(),t.onGroup&&t.onGroup()};t._groupBy=new Smart.ObservableArray(e),t._groupBy.notify((function(){n()})),t.isInitialized&&n()}}),e.groupBy?e.groupBy.toArray?t.groupBy=e.groupBy.toArray():t.groupBy=e.groupBy:t.groupBy=[],e&&!1!==e.autoBind&&t.dataBind(),t.isInitialized=!0}get dataFields(){return this._dataFields}set dataFields(e){return this._dataFields=this._getDataFieldObjects(e),this._dataFields}_getDataFieldObjects(e){let t=[];if("number"==typeof e){const n="A".charCodeAt(0);let r="",a=0;for(let o=0;o=26&&(a=0,r+="A")}}else if(e.length>0)for(let n=0;n1?e[1].trim():"string";t.push({name:n,dataType:a})}else t.push(r)}return t}get dataSource(){const e=this;return e._dataSource||(e._dataSource=[]),e._dataSource}set dataSource(e){const t=this;t._dataSource=e,t.isInitialized&&(t.boundSource=!1===t.observable?[]:new Smart.ObservableArray,t.dataItemById=[],t.bindingCompleted=!1,t.dataBind())}get canNotify(){const e=this;return void 0===e._canNotify&&(e._canNotify=!0),e._canNotify}set canNotify(e){this._canNotify=e}_notify(e){const t=this;t.canNotify&&t.notifyFn&&t.notifyFn(e)}notify(e){e&&(this.notifyFn=e)}toArray(){const e=this;return!1===e.observable?e.boundSource:e.boundSource.toArray()}dataBind(){const e=this;e.clear();const t=()=>{e.observable&&e.boundSource.notify((function(t){if("update"===t.action&&t.path&&t.path.indexOf(".")>=0&&-1===t.path.indexOf("children")&&-1===t.path.indexOf("loaded")&&-1===t.path.indexOf("level")&&-1===t.path.indexOf("leaf")&&-1===t.path.indexOf("expanded")){let n=!1;for(let r=0;r=0&&(n=!0)}e._notify&&n&&e._notify({action:"update",data:t.target,index:t.index})}})),e._onBindingComplete()};"string"==typeof e.dataSource&&e.dataSource.indexOf(".json")>=0?(e.url=e.dataSource,e.dataSourceType="json",new n(e,t=>{e.dataSource=t,e._bindToJSON()})):"string"==typeof e.dataSource&&e.dataSource.indexOf(".xlsx")>=0?(e.url=e.dataSource,e.dataSourceType="xlsx",new n(e,n=>{if(!n[0])return n=[],e._bindToArray(),void t();const r=Object.keys(n[0]),a={},o=[];if(!1!==e.exportHeader){let t=0;for(let n in r){a[r[n]]=e.dataFields[t++].name}for(let e=1;e=0?(e.dataSourceType="csv",new n(e,()=>{e._bindToArray()})):"string"==typeof e.dataSource&&e.dataSource.indexOf(".tsv")>=0?(e.dataSourceType="tsv",new n(e,()=>{})):"array"===e.dataSourceType?(e._bindToArray(),t()):"json"===e.dataSourceType&&(e._bindToJSON(),t())}_onBindingComplete(){const e=this;e._buildHierarchy(),e.onBindingComplete&&e.onBindingComplete({data:e.boundSource}),e._notify&&e._notify({action:"bindingComplete",data:e.boundSource}),e.bindingCompleted=!0}refreshHierarchy(){this._buildHierarchy()}find(){return this.boundSource.find.apply(this.boundSource,arguments)}onVirtualDataSourceRequested(e,t){const n=this;let r=t?t.first:1/0,a=t?t.last:1/0,o=t?t.row:null;if(void 0===r&&(r=1/0),void 0===a&&(a=1/0),n.virtualFirstIndex=r,n.virtualLastIndex=a,n.virtualDataSource){const i=function(i){void 0!==i.virtualDataSourceLength&&(n.virtualDataSourceLength=i.virtualDataSourceLength),new Smart.DataAdapter({dataSource:i.dataSource,dataFields:i.dataFields||n.dataFields,data:t,onBindingComplete(t){if(n.virtualDataSourceOnExpand&&o)return t.data&&t.data.length>0?n.add(t.data,o.$.id):o.leaf=!0,n.onFilter&&n.onFilter(),void e();if(r===1/0)n.add(t.data);else{let e=[],o=[];for(let n=0;n0===Object.entries(e).length&&(e.constructor===Object||e.constructor===Array),c=d(t.sorting)&&d(t.filtering)&&d(t.grouping)&&!t.row&&"filter"!==t.action&&"sort"!==t.action&&"group"!==t.action;if(n.virtualDataSourceCache&&r!==1/0&&c){let e=0;for(let t=r;te&&t-e==1||e===t)return;const n=this,r=n.boundSource.splice(e,1)[0];t>e?(t--,n.boundSource.splice(t,0,r)):n.boundSource.splice(t,0,r),n.refreshIndexes(),n._notify({action:"move",index:t,data:n.boundSource[t]}),n.refreshHierarchy()}indexOf(e){return this.boundSource.indexOf(e)}get length(){const e=this;return void 0!==e.virtualDataSourceLength?e.virtualDataSourceLength:e.dataSourceLength?e.dataSourceLength:"number"==typeof e.dataSource?e.dataSource:e.bindingCompleted?e.boundSource.length:e.dataSource&&"string"!=typeof e.dataSource&&e.dataSource.length?e.dataSource.length:e.boundSource.length}clear(){const e=this;if(!e.isInitialized)return e._cachedValues=[],void(e.dataItemById=[]);for(let t=0;t0&&t.getAttribute){let n=t.getAttribute(e);if(null!==n&&n.toString().length>0)return n.trim().split(" ").join("").replace(/([ #;?%&,.+*~\':'!^$[\]()=>|\/@])/g,"");{let n=e.split(this.mapChar);if(n.length>1){let e=t;for(let t=0;t0)return r;if(e.map)try{let n=t.getAttribute(e.map);if(null!==n&&n.toString().length>0)return n}catch(e){return n}}}_buildHierarchy(){const e=this;if(e.reservedNames){const t=e.reservedNames;t.leaf||(t.leaf="leaf"),t.parent||(t.parent="parent"),t.expanded||(t.expanded="expanded"),t.checked||(t.checked="checked"),t.selected||(t.selected="selected"),t.level||(t.level="level"),t.data||(t.data="data")}else e.reservedNames={leaf:"leaf",parent:"parent",expanded:"expanded",checked:"checked",selected:"selected",level:"level",icon:"icon",data:"data"};const t=e.reservedNames;if(e.childrenDataField){const n=[];for(let r=0;r1){let e=n;for(let t=0;t0&&(e.boundHierarchy=this._getGroupHierarchy(e.groupBy,"children","label",null,"data",null,"parent",e.boundSource)),e.virtualDataSourceOnExpand&&(e.boundHierarchy=this._getHierarchy("id","parentId","children",null,e.boundSource))}_getGroupHierarchy(e,t,n,r,a,o,i,l,d){d||(d=0);let c=this.reservedNames;const s=function(){function e(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}return e()+e()+"-"+e()+"-"+e()+"-"+e()+"-"+e()+e()+e()};let u=new Array;for(let t=0;t0?e(t+1,i):o.virtualDataSourceOnExpand?void 0===a.leaf&&(a.leaf=!1):f?a[f.leaf]=!0:a.leaf=!0}};e(0,i)}return i}summarize(e,t){const n=this;Array.isArray(e)||(e=[e]);let r=[];for(let t=0;t0){let t=o;for(let n=0;n0)for(let t=0;t0)return void r.refreshHierarchy();const a=function(o){r._sort(o,e,n,t);for(let r=0;r":"NOT_EQUAL","<":"LESS_THAN",">":"GREATER_THAN","<=":"LESS_THAN_OR_EQUAL",">=":"GREATER_THAN_OR_EQUAL",equal:"EQUAL","not equal":"NOT_EQUAL","less than":"LESS_THAN","greater than":"GREATER_THAN","greater than or equal":"GREATER_THAN_OR_EQUAL","less than or equal":"LESS_THAN_OR_EQUAL","starts with":"STARTS_WITH","ends with":"ENDS_WITH",null:"null","":"EMPTY",isblank:"EMPTY",isnotblank:"NOT_EMPTY",contains:"CONTAINS",notcontains:"DOES_NOT_CONTAIN",startswith:"STARTS_WITH",endswith:"ENDS_WITH",NULL:"NULL",NOT_NULL:"NOT_NULL"};let r=[];for(let e=0;e1){const t=new Smart.FilterGroup;let r="and",o=0;for(let i=0;i{for(let t=0;ta.evaluate(t[e]))}_filter(e,t="and"){const n=this,r=[],a=[];if(0===e.length)return void n.clearFilter();const o=e=>{for(let t=0;t0&&n.groupBy.length>0&&a?(a.$.filtered=!0,o&&!o.$.filtered&&(o.$.filtered=!0)):i>0&&i!==r.length&&a&&(a.$.filtered=null,o&&!o.$.filtered&&(o.$.filtered=null))};t(n.boundHierarchy,null,null)}else for(let e=0;e0&&a?a(e,t,n,d):e.sort((function(e,n){for(let r=0;rn.$.index?1:0}));for(let t=0;t{let r=o;for(let a=0;a=200&&t<=299?("json"===e.dataSourceType&&(n=JSON.parse(n)),i.ajaxComplete(e,n,t)):e&&e.loadError&&e.loadError(t,n)}},o.onerror=function(){e&&e.loadError&&e.loadError(o.status,o.response)},e&&e.contentType&&o.setRequestHeader("Content-Type",e.contentType),a&&e.timeout&&(o.timeout=e.timeout),e.beforeSend){if(!1===e.beforeSend(o,e))return}o.send(r)}ajaxComplete(e,t,n){if(e){if(e.beforeLoadComplete){const n=e.beforeLoadComplete(t);n&&(t=n)}e.loadComplete&&e.loadComplete(t,n),this.callback&&this.callback(t,n)}}parseXLSXData(e,t){const n=new DOMParser,r=n.parseFromString(t,"text/xml"),a=Array.from(r.getElementsByTagName("si")),o=[],i=n.parseFromString(e,"text/xml"),l=Array.from(i.getElementsByTagName("row")),d=[];return a.forEach((function(e){let t=e.getElementsByTagName("t");if(1===t.length)o.push(t[0].innerHTML);else{let e="";t=Array.from(t),t.forEach((function(t){e+=t.innerHTML})),o.push(e)}})),l.forEach((function(e){const t={};Array.from(e.getElementsByTagName("c")).forEach((function(e){const n=e.getAttribute("r").match(/\D+/)[0],r=e.getAttribute("t"),a=e.getElementsByTagName("v")[0].innerHTML;let i;switch(r){case"s":i=o[parseFloat(a)];break;case"b":i=1===parseFloat(a);break;default:i=parseFloat(a)}t[n]=i})),d.push(t)})),d}}}}); -------------------------------------------------------------------------------- /src/smart.dropdownlist.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v8.0.0 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | !function(e){var t={};function o(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,o),i.l=!0,i.exports}o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)o.d(n,i,function(t){return e[t]}.bind(null,i));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=35)}({35:function(e,t){Smart("smart-drop-down-list",class extends Smart.ContentElement{static get properties(){return{autoCloseDelay:{value:100,type:"number"},dataSource:{value:null,type:"any",reflectToAttribute:!1},displayLoadingIndicator:{value:!1,type:"boolean"},displayMember:{value:"",type:"string"},displayMode:{allowedValues:["outlined","filled","underlined"],value:"outlined",type:"string"},dropDownAppendTo:{value:null,type:"any"},dropDownButtonPosition:{allowedValues:["none","left","right","top","bottom"],value:"right",defaultReflectToAttribute:!0,type:"string"},dropDownMinHeight:{value:"",type:"any",validator:"_propertyValidator"},dropDownHeight:{value:"",type:"any",validator:"_propertyValidator"},dropDownMaxHeight:{value:"",type:"any",validator:"_propertyValidator"},dropDownOpenMode:{allowedValues:["none","default","dropDownButton","auto"],value:"default",type:"string"},dropDownOverlay:{value:!1,type:"boolean"},dropDownPlaceholder:{value:"No Items",type:"string"},dropDownPosition:{allowedValues:["auto","top","bottom","overlay-top","overlay-center","overlay-bottom","center-bottom","center-top"],value:"auto",type:"string"},dropDownMinWidth:{value:"",type:"any",validator:"_propertyValidator"},dropDownWidth:{value:"",type:"any",validator:"_propertyValidator"},dropDownMaxWidth:{value:"",type:"any",validator:"_propertyValidator"},filterable:{value:!1,type:"boolean"},filterInputPlaceholder:{value:"",type:"string"},filterCallback:{value:null,type:"function?"},filterMode:{value:"startsWithIgnoreCase",allowedValues:["contains","containsIgnoreCase","doesNotContain","doesNotContainIgnoreCase","equals","equalsIgnoreCase","startsWith","startsWithIgnoreCase","endsWith","endsWithIgnoreCase","custom"],type:"string"},grouped:{value:!1,type:"boolean"},groupMember:{value:"",type:"string"},hint:{value:"",type:"string"},horizontalScrollBarVisibility:{type:"string",value:"auto",allowedValues:["auto","disabled","hidden","visible"]},incrementalSearchDelay:{value:700,type:"number?"},incrementalSearchMode:{value:"startsWithIgnoreCase",allowedValues:["contains","containsIgnoreCase","doesNotContain","doesNotContainIgnoreCase","equals","equalsIgnoreCase","startsWith","startsWithIgnoreCase","endsWith","endsWithIgnoreCase"],type:"string"},itemMeasureMode:{value:"auto",allowedValues:["auto","precise"],type:"string"},inputMember:{value:"label",type:"string"},itemTemplate:{value:null,type:"any"},itemHeight:{value:null,type:"number?"},label:{value:"",type:"string"},loadingIndicatorPlaceholder:{value:"Loading...",type:"string"},loadingIndicatorPosition:{value:"center",allowedValues:["bottom","center","top"],type:"string"},messages:{extend:!0,value:{en:{invalidNode:'{{elementType}}: Invalid parameter "{{node}}" when calling {{method}}.'}},type:"object"},name:{value:"",type:"string"},opened:{value:!1,type:"boolean"},placeholder:{value:"",type:"string"},resizeMode:{value:"none",allowedValues:["none","horizontal","vertical","both"],type:"string"},resizeIndicator:{value:!1,type:"boolean"},selectionDisplayMode:{value:"plain",allowedValues:["plain","placeholder","tokens"],type:"string"},selectionMode:{value:"one",allowedValues:["none","oneOrManyExtended","zeroOrMany","oneOrMany","zeroOrOne","one","checkBox","radioButton"],type:"string"},selectedIndexes:{value:[],type:"array"},selectedValues:{value:[],type:"array"},sorted:{value:!1,type:"boolean"},sortDirection:{value:"asc",type:"string"},tokenTemplate:{value:null,type:"any"},type:{value:"list",type:"string",defaultReflectToAttribute:!0,readonly:!0},valueMember:{value:"",type:"string"},virtualized:{value:!1,type:"boolean"},verticalScrollBarVisibility:{type:"string",value:"auto",allowedValues:["auto","disabled","hidden","visible"]}}}static get listeners(){return{"actionButton.down":"_buttonsDownHandler","actionButton.mouseenter":"_buttonsMouseEventsHandler","actionButton.mouseleave":"_buttonsMouseEventsHandler","actionButton.focus":"_buttonsFocusHandler","actionButton.blur":"_buttonsFocusHandler","document.selectstart":"_selectStartHandler","document.dragstart":"_dragStartHandler","document.down":"_documentDownHandler","document.up":"_documentUpHandler","document.move":"_documentMoveHandler","dropDownButton.down":"_buttonsDownHandler","dropDownButton.mouseenter":"_buttonsMouseEventsHandler","dropDownButton.mouseleave":"_buttonsMouseEventsHandler",keydown:"_keyDownHandler",keyup:"_keyUpHandler",focus:"_focusEventHandler",blur:"_blurEventHandler","dropDownButton.focus":"_buttonsFocusHandler","dropDownButton.blur":"_buttonsFocusHandler","dropDownContainer.transitionend":"_dropDownTransitionendHandler","listBox.change":"_listBoxChangeHandler","listBox.itemClick":"_listBoxItemClickHandler","listBox.keydown":"_listBoxKeyDownHandler","listBox.bindingComplete":"_bindingCompleteHandler",mouseenter:"_mouseEnterHandler",mouseleave:"_mouseLeaveHandler",resize:"_resizeHandler","resizeBar.move":"_resizeBarMoveHandler",styleChanged:"_styleChangedHandler",wheel:"_mouseWheelHandler"}}template(){return''}static get styleUrls(){return["smart.dropdownlist.css","smart.dropdown.css"]}propertyChangedHandler(e,t,o){super.propertyChangedHandler(e,t,o);const n=this;switch(e){case"animation":n.$.dropDownContainer.setAttribute("animation",n.animation);break;case"disabled":n._setFocusable(),n.close(),n._positionDetection.handleAutoPositioning();break;case"dataSource":case"displayMember":case"inputMember":n.$.actionButton&&(n.$.actionButton.innerHTML=n.placeholder),n._setDropDownSize(),n._positionDetection.checkBrowserBounds("vertically"),n._positionDetection.positionDropDown(),n._positionDetection.checkBrowserBounds("horizontally");break;case"dropDownAppendTo":n._positionDetection.dropDownAppendToChangedHandler();break;case"dropDownOpenMode":n._setFocusable(),n.$dropDownContainer.addClass("smart-visibility-hidden"),n.$.dropDownContainer.setAttribute("drop-down-open-mode",o),n.$.dropDownButton.removeAttribute("selected"),n.removeAttribute("drop-down-button-focus"),n.removeAttribute("action-button-focus"),n.opened=!1,n._ariaButton&&n._ariaButton.setAttribute("aria-expanded",!1),n._setAriaRelations();break;case"dropDownOverlay":o||n._positionDetection.removeOverlay();break;case"dropDownPosition":n._positionDetection.dropDownPositionChangedHandler();break;case"dropDownMinWidth":case"dropDownWidth":case"dropDownMaxWidth":case"dropDownHeight":case"dropDownMinHeight":case"dropDownMaxHeight":n._setDropDownSize();break;case"filterable":n.$.listBox.filterable=o,n._dropDownSize&&"auto"===n._dropDownSize.height&&n._setDropDownSize();break;case"label":if(!n._ariaButton)return;o?n._ariaButton.setAttribute("aria-labelledby",n.$.label.id):"DropDownList"===n.elementName&&n._ariaButton.setAttribute("aria-labelledby",n.$.actionButton.id);break;case"opened":if(n.disabled||n.readonly)return;o?n.open():n.close();break;case"placeholder":n._applySelection();break;case"readonly":n.close();break;case"resizeIndicator":o?n.$.dropDownContainer.setAttribute("resize-indicator",""):n.$.dropDownContainer.removeAttribute("resize-indicator");break;case"resizeMode":n.$.dropDownContainer.setAttribute("resize-mode",n.resizeMode);break;case"selectedValues":case"selectedIndexes":0===o.length?n.$.actionButton.innerHTML=n.placeholder:n._applySelection();break;case"selectionMode":n.$.listBox&&(n.$.listBox[e]=o,"checkBox"!==o&&"radioButton"!==o&&"checkBox"!==t&&"radioButton"!==t||n._setDropDownSize());break;case"selectionDisplayMode":n._applySelection();break;case"tokenTemplate":n._tokenTemplate=n._validateTemplate(n.tokenTemplate),n._applySelection();break;case"unfocusable":n._setFocusable()}}appendChild(e){const t=this;if(!t.isCompleted||e instanceof HTMLElement&&e.classList.contains("smart-resize-trigger-container")){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.appendChild.apply(t,e.concat(Array.prototype.slice.call(arguments)))}e?(t.$.listBox.appendChild(e),t._dropDownSize&&"auto"===t._dropDownSize.height&&t._setDropDownSize()):t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"appendChild",node:"node"}))}attached(){const e=this;super.attached(),e.isCompleted&&e.$.dropDownContainer&&(e._positionDetection.dropDownAttached("_setDropDownSize"),e._positionDetection.checkBrowserBounds(),e.selectedIndexes&&e._applySelection())}detached(){const e=this;super.detached(),e.$.dropDownContainer&&(e.close(),e._positionDetection&&e._positionDetection.dropDownDetached())}clearItems(){this.$.listBox&&(this.$.listBox.clearItems(),this.$.actionButton.innerHTML=this.placeholder)}clearSelection(){this.$.listBox&&(this.$.listBox.clearSelection(),this.$.actionButton.innerHTML=this.placeholder)}close(){const e=this;e.$dropDownContainer.hasClass("smart-visibility-hidden")||e.$.fireEvent("closing").defaultPrevented||(e.$dropDownContainer.addClass("smart-visibility-hidden"),e.$.fireEvent("close"),e.$.dropDownButton&&e.$.dropDownButton.removeAttribute("selected"),e.opened=!1,e._ariaButton&&e._ariaButton.setAttribute("aria-expanded",!1),e._preventDropDownClose=!1,e._positionDetection.removeOverlay(!0),e.$.listBox.removeAttribute("focus"),e._edgeMacFF&&!e.hasAnimation&&e.$.dropDownContainer&&(e.$.dropDownContainer.style.top=e.$.dropDownContainer.style.left="",e.$dropDownContainer.addClass("not-in-view")))}cloneNode(){if(!this.$.listBox)return;let e=HTMLElement.prototype.cloneNode.apply(this,Array.prototype.slice.call(arguments,0,1));return e.dataSource=this.dataSource,e}ensureVisible(e){this.$.listBox&&this.$.listBox.ensureVisible(e)}getItem(e){if(this.$.listBox)return this.$.listBox.getItem(e)}get items(){return this.$&&this.$.listBox?this.$.listBox.items:[]}get _focusedItem(){if(this.$&&this.$.listBox)return this.$.listBox._focusedItem}insert(e,t){const o=this;o.$.listBox&&(o.$.listBox.insert(e,t),o._applySelection(),o._dropDownSize&&"auto"===o._dropDownSize.height&&o._setDropDownSize())}insertBefore(e,t){const o=this;if(!o.isCompleted){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.insertBefore.apply(o,e.concat(Array.prototype.slice.call(arguments)))}e&&t?o.$.listBox&&(o.$.listBox.insertBefore(e,t),o._dropDownSize&&"auto"===o._dropDownSize.height&&o._setDropDownSize()):o.error(o.localize("invalidNode",{elementType:o.nodeName.toLowerCase(),method:"insertBefore",node:"newNode/referenceNode"}))}open(){const e=this,t=function(){for(let t=0;t0){const t=e.getBoundingClientRect();if(e.$.container.contains(e.$.dropDownContainer)){let t=0;const o=setInterval((function(){const n=e.getBoundingClientRect();t++,n.top===e._positionTop&&t<10||(e.open(),clearInterval(o),e._positionTop=n.top)}),100);return}t.top!==e._positionTop&&(e._positionTop=t.top)}e.$.fireEvent("opening").defaultPrevented||(e._shadowDOMStylesDelay&&(e._setDropDownSize(),delete e._shadowDOMStylesDelay),e.opened=!0,e._ariaButton&&e._ariaButton.setAttribute("aria-expanded",!0),e.$.listBox.setAttribute("focus",""),e._positionDetection.placeOverlay(),e._positionDetection.checkBrowserBounds("vertically"),e._positionDetection.positionDropDown(),e._positionDetection.checkBrowserBounds("horizontally"),e.$dropDownContainer.removeClass("smart-visibility-hidden"),e.$.fireEvent("open"),e.$.dropDownButton&&("dropDownButton"===e.dropDownOpenMode?e.$.dropDownButton.setAttribute("selected",""):e.$.dropDownButton.removeAttribute("selected")),(e.$.listBox&&!e._focusedItem||e._focusedItem&&!e._focusedItem._focused)&&(e.selectedIndexes.length>0?e._focus(e.items[e.selectedIndexes[0]]):e._focus(t)),e.$.input&&!Smart.Utilities.Core.isMobile&&e.$.input.focus())}}ready(){super.ready()}render(){const e=this;e.rightToLeft&&(e.dropDownButtonPosition="right"===e.dropDownButtonPosition?"left":"right"),e.classList.add("smart-drop-down-box"),e.$.dropDownContainer&&(e._positionDetection=new Smart.Utilities.PositionDetection(e,e.$.dropDownContainer,e.$.container,"close"),e._positionDetection.getDropDownParent(!0),e._positionDetection.setDropDownPosition(),e._calculateDropDownSize(),e.$.dropDownContainer.setAttribute("resize-mode",e.resizeMode),e.$.dropDownContainer.setAttribute("drop-down-open-mode",e.dropDownOpenMode),e.resizeIndicator&&e.$.dropDownContainer.setAttribute("resize-indicator",""),e._positionDetection.handleAutoPositioning()),e.opened&&e.open(),e._positionTop=e.getBoundingClientRect().top,e._edgeMacFF=Smart.Utilities.Core.Browser.Edge||Smart.Utilities.Core.Browser.Firefox&&-1!==navigator.platform.toLowerCase().indexOf("mac"),e._edgeMacFF&&e.hasAnimation&&e.$.dropDownContainer&&e.$dropDownContainer.addClass("not-in-view"),e.$.label&&!e.$.label.id&&(e.$.label.id=e.id+"Label"),e.$.actionButton&&!e.$.actionButton.id&&(e.$.actionButton.id=e.id+"ActionButton"),e.$.hint&&!e.$.hint.id&&(e.$.hint.id=e.id+"Hint"),e.hint||(e.hint=e.placeholder),e._createElement(),super.render()}removeAt(e){const t=this;t.$.listBox&&(t.$.listBox.removeAt(e),t._applySelection(),t._dropDownSize&&"auto"===t._dropDownSize.height&&t._setDropDownSize())}removeChild(e){const t=this;if(!t.isCompleted||e instanceof HTMLElement&&e.classList.contains("smart-resize-trigger-container")){const e=Array.prototype.slice.call(arguments,2);return HTMLElement.prototype.removeChild.apply(t,e.concat(Array.prototype.slice.call(arguments)))}e&&e instanceof Smart.ListItem?(t.$.listBox.removeChild(e),t._dropDownSize&&"auto"===t._dropDownSize.height&&t._setDropDownSize()):t.error(t.localize("invalidNode",{elementType:t.nodeName.toLowerCase(),method:"removeChild",node:"node"}))}get value(){return this.isRendered&&this.$.listBox?this.$.listBox.value:null}set value(e){return this.isRendered&&this.$.listBox?void(this.$.listBox.value=e):null}select(e){this.$.listBox&&this.$.listBox.select(e)}_setFocusable(){const e=this;if(e.disabled||e.unfocusable)return e.removeAttribute("tabindex"),e.$.actionButton.removeAttribute("tabindex"),void e.$.dropDownButton.removeAttribute("tabindex");let t=e.tabIndex>0?e.tabIndex:0;e.tabIndex=t,"dropDownButton"===e.dropDownOpenMode?(e.removeAttribute("tabindex"),e.$.actionButton.setAttribute("tabindex",t),e.$.dropDownButton.setAttribute("tabindex",t)):(e.$.actionButton.removeAttribute("tabindex"),e.$.dropDownButton.removeAttribute("tabindex"))}static get requires(){return{"Smart.ListBox":"smart.listbox.js"}}unselect(e){this.$.listBox&&this.$.listBox.unselect(e)}update(e,t){this.$.listBox&&(this.$.listBox.update(e,t),this._applySelection())}_resizeBarMoveHandler(e){"touchmove"===e.originalEvent.type&&e.originalEvent.preventDefault()}_createToken(){const e=this;let t,o=!1;const n=document.createDocumentFragment(),i=e.selectedIndexes[e.selectedIndexes.length-1];"plain"!==e.selectionDisplayMode||"one"!==e.selectionMode&&"zeroOrOne"!==e.selectionMode&&"radioButton"!==e.selectionMode?"tokens"===e.selectionDisplayMode?1===e.selectedIndexes.length&&["oneOrManyExtended","oneOrMany","one","radioButton"].indexOf(e.selectionMode)>-1?t="":(t="✖",o=!0):t=1===e.selectedIndexes.length?"":",":t="";const r=e.selectedIndexes,a=e.$.listBox._items;for(let s=0;s${n.join(", ").trim()}`:""}}else e.$.actionButton.innerHTML=e.placeholder}_applyTokenTemplate(e,t,o){const n=this,i=document.createElement("span"),r=function(){return""+e+`${t}`};if(i.classList.add("smart-token"),n._tokenTemplate){let e=document.importNode(n._tokenTemplate.content,!0);const t=e.childNodes.length,o=/{{\w+}}/g;let a;for(let n=0;n{e._setDropDownSize(),e._positionDetection.checkBrowserBounds()})}_buttonsDownHandler(e){const t=this;if(!t.disabled){if(t.hasRippleAnimation)if(t.$.buttonsContainer&&"dropDownButton"!==t.dropDownOpenMode){const o=t.$.buttonsContainer;o.firstElementChild.noRipple=!0,Smart.Utilities.Animation.Ripple.animate(o,e.pageX,e.pageY),o.firstElementChild.noRipple=!1}else Smart.Utilities.Animation.Ripple.animate(e.target,e.pageX,e.pageY);t._preventsSelectStart=!0,t.tagName.toLowerCase().indexOf("smart-drop-down-")>-1&&"dropDownButton"===t.dropDownOpenMode&&e.target===t.$.actionButton&&t.$.actionButton.setAttribute("active",""),t.opened&&(t._preventDropDownClose=!0)}}_buttonsMouseEventsHandler(e){const t=this;t.disabled||("mouseenter"===e.type?(t.setAttribute("hover",""),e.target.setAttribute("hover",""),"dropDownButton"===t.dropDownOpenMode&&e.target===t.$.dropDownButton&&t.setAttribute("drop-down-button-hover","")):(t.removeAttribute("hover"),t.removeAttribute("drop-down-button-hover"),e.target.removeAttribute("hover")))}_calculateDropDownSize(){const e=this;e._dropDownSize={};const t=window.getComputedStyle(e.$.dropDownContainer),o=parseFloat(t.getPropertyValue("border-top-width").trim()),n=parseFloat(t.getPropertyValue("border-bottom-width").trim()),i=parseFloat(t.getPropertyValue("margin-top").trim()),r=parseFloat(t.getPropertyValue("margin-bottom").trim()),a=parseFloat(t.getPropertyValue("padding-top").trim()),s=parseFloat(t.getPropertyValue("padding-bottom").trim());Smart.Utilities.Core.CSSVariablesSupport()&&(e._dropDownSize.width=t.getPropertyValue("--smart-drop-down-list-drop-down-width").trim(),e._dropDownSize.height=t.getPropertyValue("--smart-drop-down-list-drop-down-height").trim()),(!e._dropDownSize.width||e._dropDownSize.width.indexOf("initial")>-1)&&(e._dropDownSize.width=e.offsetWidth),e._dropDownSize.height||(e._dropDownSize.height="auto"),e._dropDownSize.minHeight=parseFloat(t.getPropertyValue("min-height").trim()),e._dropDownSize.maxHeight=parseFloat(t.getPropertyValue("max-height").trim()),e._dropDownSize.borderWidth=(isNaN(o)?0:o)+(isNaN(n)?0:n),e._dropDownSize.paddingWidth=(isNaN(a)?0:a)+(isNaN(s)?0:s),e._dropDownSize.marginWidth=(isNaN(i)?0:i)+(isNaN(r)?0:r)}_createElement(){this._tokenTemplate=this._validateTemplate(this.tokenTemplate),this._applySelection(),this._setDropDownSize(),this._setFocusable(),this.$.arrow.noRipple=!0,this._shadowDOMStylesDelay=this.shadowRoot,this._setAriaRelations(!0)}_documentDownHandler(e){const t=this;if(t.disabled||t.readonly)return;let o=e.originalEvent.target;if(o===t._overlay&&(t._overlayDown=!0),t.shadowRoot){o=e.originalEvent.composedPath()[0];let n=o.getRootNode().host;for(;n;)n.closest(".smart-drop-down-container")===t.$.dropDownContainer&&(t._isDropDownClicked=!0),n=n.getRootNode().host}else t.isInShadowDOM&&(o=e.originalEvent.composedPath()[0]),t._isDropDownClicked=o.closest(".smart-drop-down-container")===t.$.dropDownContainer;if(t._buttonClicked=o.closest(".smart-action-button")||o.closest(".smart-drop-down-button"),t.$.listBox){let n=o.closest("smart-list-item");t.$.listBox.contains(n)||(n=void 0),t.hasRippleAnimation&&n&&Smart.Utilities.Animation.Ripple.animate(n,e.pageX,e.pageY),(n||o===t.$.listBox.$.filterInput||o.closest(".smart-token"))&&(t._preventDropDownClose=!0)}if(t._isDropDownClicked&&(t._preventDropDownClose=!0),o!==t.$.resizeBar||"none"===t.resizeMode)return;t._resizeDetails||(t._resizeDetails={});const n=t.$.dropDownContainer.getBoundingClientRect();t._resizeDetails.started=!0,t._resizeDetails.x=e.pageX,t._resizeDetails.y=e.pageY,t._resizeDetails.width=t.$.dropDownContainer.offsetWidth,t._resizeDetails.height=t.$.dropDownContainer.offsetHeight,t._resizeDetails.offsetXL=e.clientX-n.left,t._resizeDetails.offsetXR=n.left+t.$.dropDownContainer.offsetWidth-e.clientX,t._resizeDetails.offsetY=n.top+t.$.dropDownContainer.offsetHeight-e.clientY,t._resizeDetails.offsetYtop=e.clientY-n.top,t._preventDropDownClose=!0}_documentMoveHandler(e){const t=this,o=t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;if("auto"===t.dropDownOpenMode&&null!==t.dropDownAppendTo&&(t.contains(o)||t.$.dropDownContainer.contains(o)?t._isElementHovered=!0:(t._isElementHovered=!1,t._autoClose())),!t._resizeDetails||t._resizeDetails&&!t._resizeDetails.started)return;t.setAttribute("resizing",""),t._resizeDetails.resizeEventFired||(t.$.fireEvent("resizeStart",{position:{left:e.pageX,top:e.pageY}}),t._resizeDetails.resizeEventFired=!0);const n=document.documentElement,i=t.$.dropDownContainer.getBoundingClientRect(),r=t.getBoundingClientRect(),a=t.$.dropDownContainer.hasAttribute("top")?"top":"bottom";let s;function l(){if(s=e.pageY-t._resizeDetails.y,"bottom"===a)t._resizeDetails.height=Math.min(n.clientHeight-i.top-6,Math.max(0,t._resizeDetails.height+s)),t._resizeDetails.y=Math.max(i.top+n.scrollTop-t._resizeDetails.offsetY,Math.min(n.clientHeight+n.scrollTop-1.5*t._resizeDetails.offsetY,e.pageY));else{if(t._resizeDetails.height=Math.min(t._dropDownSize.maxHeight,Math.max(0,Math.min(r.top,t._resizeDetails.height-s))),s=Math.max(0,i.top+(i.height-Math.max(t._dropDownSize.minHeight,t._resizeDetails.height))),t.dropDownAppendTo&&t.dropDownAppendTo.length>0){const e=Math.abs(parseFloat(getComputedStyle(t.$.dropDownContainer).getPropertyValue("margin-bottom")))||0;t.$.dropDownContainer.style.top=t.dropDownAppendTo&&t.dropDownAppendTo.length>0?e+s+"px":""}const o=r.top+n.scrollTop+t._resizeDetails.offsetYtop;t._resizeDetails.y=Math.max(t._resizeDetails.offsetYtop,Math.min(o,Math.max(o-t._dropDownSize.maxHeight,e.pageY)))}t.$.dropDownContainer.style.height=t._resizeDetails.height+"px"}function d(){s=e.pageX-t._resizeDetails.x,t._resizeDetails.width=Math.min(n.clientWidth-i.left-6,Math.max(0,t._resizeDetails.width+s)),t.$.dropDownContainer.style.width=t._resizeDetails.width+"px",t._resizeDetails.x=Math.max(i.left+n.scrollLeft-t._resizeDetails.offsetXR,Math.min(n.clientWidth+n.scrollLeft-1.5*t._resizeDetails.offsetXR,e.pageX))}switch(t.resizeMode){case"vertical":l();break;case"horizontal":d();break;case"both":d(),l()}}_documentUpHandler(e){const t=this;if(t.$.actionButton.removeAttribute("active"),t._resizeDetails&&t._resizeDetails.started)return t._resizeDetails.started=t._resizeDetails.resizeEventFired=!1,t.removeAttribute("resizing"),t._preventDropDownClose=!1,t.focus(),void t.$.fireEvent("resizeEnd",{position:{left:e.pageX,top:e.pageY}});if(t.disabled||t._isDropDownClicked||t.readonly)return void delete t._isDropDownClicked;if(t._overlayDown)return t.close(),void delete t._overlayDown;let o=e.originalEvent.target,n=o.closest?o.closest("smart-drop-down-list"):void 0;if((t.enableShadowDOM||t.isInShadowDOM)&&(o=e.originalEvent.composedPath()[0],n=o.getRootNode().host),t._preventsSelectStart=!1,void 0===o||o===t.$.resizeBar)return;if("tokens"===t.selectionDisplayMode&&o.classList.contains("smart-drop-down-list-selection-label")&&n===t){"none"!==t.dropDownOpenMode&&t.open();let e=t.$.listBox._items.filter(e=>e[t.inputMember].toString()===o.textContent)[0];return t.$.listBox._scrollView.scrollTop=e.offsetTop,void t._focus(e)}if("tokens"===t.selectionDisplayMode&&o.classList.contains("smart-drop-down-list-unselect-button")&&n===t){if(1===t.selectedIndexes.length&&["zeroOrMany","zeroOrOne","checkBox"].indexOf(t.selectionMode)<0)return;return void t.unselect(t.$.listBox._items.filter(e=>e[t.inputMember].toString()===o.previousElementSibling.textContent)[0])}const i=o.closest(".smart-action-button");let r;if(t._buttonClicked&&("dropDownButton"===t.dropDownOpenMode&&i&&t._buttonClicked===t.$.actionButton?t.$.fireEvent("actionButtonClick"):o.closest(".smart-drop-down-button")!==t._buttonClicked&&i!==t._buttonClicked||(r=!0,t.$.fireEvent("dropDownButtonClick"))),t._buttonClicked=void 0,i===t.$.actionButton||o.closest(".smart-drop-down-button")===t.$.dropDownButton)return"dropDownButton"===t.dropDownOpenMode&&i===t.$.actionButton?void t.close():void(t.$dropDownContainer.hasClass("smart-visibility-hidden")&&"none"!==t.dropDownOpenMode&&r&&"pointercancel"!==e.originalEvent.type?t.open():t.close());o=t._getUpEventTarget(o),void 0!==o&&("dropDownContainer"!==o&&"item"!==o||"item"===o&&"checkBox"!==t.selectionMode&&t.selectionMode.indexOf("Many")<0)&&t.close()}_dragStartHandler(e){this._resizeDetails&&this._resizeDetails.started&&e.preventDefault()}_dropDownTransitionendHandler(){const e=this;e._edgeMacFF&&!e.opened&&e.hasAnimation&&(e.$.dropDownContainer.style.top=e.$.dropDownContainer.style.left="",e.$dropDownContainer.addClass("not-in-view"))}_focus(e){this.$.listBox._focus(e)}_blurEventHandler(){const e=this;e.$.dropDownButton&&(e.removeAttribute("focus"),e.$.dropDownButton.removeAttribute("focus")),e.$.actionButton&&(e.removeAttribute("focus"),e.$.actionButton.removeAttribute("focus")),e.nodeName&&"smart-drop-down-list"===e.nodeName.toLowerCase()&&!e._preventDropDownClose&&e.close()}_focusEventHandler(){const e=this;e.$.dropDownButton&&(e.setAttribute("focus",""),e.$.dropDownButton.setAttribute("focus","")),e.$.actionButton&&(e.setAttribute("focus",""),e.$.actionButton.setAttribute("focus","")),e.removeAttribute("drop-down-button-focus"),e.removeAttribute("action-button-focus")}_buttonsFocusHandler(e){const t=this;e.target===t.$.dropDownButton?"focus"===e.type?t.setAttribute("drop-down-button-focus",""):(t.removeAttribute("drop-down-button-focus"),t.nodeName&&"smart-drop-down-list"===t.nodeName.toLowerCase()&&!t._preventDropDownClose&&t.close()):"focus"===e.type?t.setAttribute("action-button-focus",""):t.removeAttribute("action-button-focus")}_getUpEventTarget(e){const t=this;let o=e;for(o=void 0===o.parentElement?o.getRootNode().host:o.parentElement;o;){if(o===t.$.dropDownContainer){o="dropDownContainer";break}o=void 0===o.parentElement?o.getRootNode().host:o.parentElement}return o}_keyDownHandler(e){const t=this,o=t.enableShadowDOM&&t.shadowRoot.activeElement||document.activeElement,n=t.enableShadowDOM?e.composedPath()[0]:e.target;if(!(t.$.listBox&&n===t.$.listBox.$.filterInput||o!==t&&o!==t.$.dropDownButton&&o!==t.$.actionButton))switch(e.key){case"Enter":case" ":e.preventDefault(),n!==t.$.actionButton&&(t._keyPressed=!0,t.opened?(t._focusedItem&&t.select(t._focusedItem),("Enter"===e.key&&["none"].indexOf(t.selectionMode)<0||" "===e.key&&["none","one","radioButton"].indexOf(t.selectionMode)>-1)&&t.close()):t.opened||t.readonly||"none"===t.dropDownOpenMode||t.open()),"dropDownButton"===t.dropDownOpenMode&&n.setAttribute("active","");break;case"End":case"Home":case"PageUp":case"PageDown":case"ArrowUp":case"ArrowDown":if(t.readonly)return;if(e.altKey)return t._keyPressed=!1,void(t.$dropDownContainer.hasClass("smart-visibility-hidden")?t.open():t.close());e.preventDefault(),t.$.listBox._handleKeyStrokes(e.key);break;case"Escape":e.preventDefault(),t.close();break;default:if(t.readonly)return;"oneOrManyExtended"===t.selectionMode&&(t.$.listBox._keysPressed[e.key]=!0),t.$.listBox._applyIncrementalSearch(e.key)}}_keyUpHandler(e){const t=this,o=t.enableShadowDOM?e.composedPath()[0]:e.target;t.$.listBox&&o===t.$.listBox.$.filterInput||("Enter"!==e.key&&" "!==e.key||(o.removeAttribute("active"),t.$dropDownContainer.hasClass("smart-visibility-hidden")||(t._keyPressed=!1)),t.$.listBox&&"oneOrManyExtended"===t.selectionMode&&(t.$.listBox._keysPressed[e.key]=!1))}_listBoxChangeHandler(e){const t=this;if(e.target===t.$.listBox){if((t.dropDownAppendTo&&t.dropDownAppendTo.length>0||t.enableShadowDOM)&&t.$.fireEvent("change",e.detail),"list"===t.autoComplete&&e.detail){const o=t.$.listBox._items[e.detail.index];t._lastSelectedItem=o&&o.selected?o:void 0}t._applySelection(t.selectionMode,e.detail)}else e.stopPropagation()}_listBoxItemClickHandler(e){const t=this;(t.dropDownAppendTo&&t.dropDownAppendTo.length>0||t.enableShadowDOM)&&t.$.fireEvent(e.type,e.detail),"checkBox"!==t.selectionMode&&t.selectionMode.indexOf("Many")<0&&t.close(),Smart.Utilities.Core.isMobile||t.focus(),delete t._isDropDownClicked}_listBoxKeyDownHandler(e){const t=this;if("Enter"===e.key)return t.close(),"dropDownButton"===t.dropDownOpenMode?t.$.dropDownButton.focus():t.focus(),void e.stopPropagation();"Escape"!==e.key||t.close()}_mouseEnterHandler(){const e=this;e._isElementHovered=!0,e.tagName.toLowerCase().indexOf("smart-drop-down-")>-1&&"auto"===e.dropDownOpenMode&&!e.disabled&&!e.readonly&&e.open()}_mouseLeaveHandler(){const e=this;e.removeAttribute("hover"),e._isElementHovered=!1,"auto"!==e.dropDownOpenMode||e.disabled||e.readonly||e._autoClose()}_mouseWheelHandler(e){const t=this;t.disabled||t.readonly||t.items&&0===t.items.length||t.$dropDownContainer&&!t.$dropDownContainer.hasClass("smart-visibility-hidden")||t.$.listBox&&(e.preventDefault(),t.$.listBox._handleKeyStrokes(e.deltaY>0?"ArrowDown":"ArrowUp"))}_autoClose(){const e=this;e._autoCloseTimeout=setTimeout(function(){e._isElementHovered||e.close(),clearTimeout(e._autoCloseTimeout)}.bind(e),e.autoCloseDelay)}_propertyValidator(e,t){return"number"!=typeof t&&"string"!=typeof t?e:t}_resizeHandler(){const e=this;"none"===e.resizeMode&&(e._calculateDropDownSize(),e._setDropDownSize())}_selectStartHandler(e){this._preventsSelectStart&&e.preventDefault()}_setAriaRelations(e){const t=this;let o,n;"dropDownButton"!==t.dropDownOpenMode?(o=t.$.dropDownButton,o.setAttribute("aria-hidden",!0),n=t,t.$.actionButton.removeAttribute("role")):(o=t,n=t.$.dropDownButton,n.removeAttribute("aria-hidden"),t.$.actionButton.setAttribute("role","button")),t._ariaButton=n,n.setAttribute("role","button"),n.setAttribute("aria-haspopup","listbox"),n.setAttribute("aria-owns",t.$.listBox.id),n.setAttribute("aria-describedby",t.$.hint.id),t.label?n.setAttribute("aria-labelledby",t.$.label.id):"DropDownList"===t.elementName&&n.setAttribute("aria-labelledby",t.$.actionButton.id),o.setAttribute("role","presentation"),o.removeAttribute("aria-owns"),e?n.setAttribute("aria-expanded",t.opened):(o.removeAttribute("aria-describedby"),o.removeAttribute("aria-expanded"),o.removeAttribute("aria-haspopup"),o.removeAttribute("aria-labelledby"))}_setDropDownSize(){const e=this;let t;if(e._dropDownSize||e._calculateDropDownSize(),["dropDownMinWidth","dropDownMaxWidth"].forEach(t=>{e.$.dropDownContainer.style[t.replace("dropDown","").replace(/^./,"m")]="initial"===e[t]?e.offsetWidth+"px":e[t]?parseFloat(e[t])+(e[t].toString().endsWith("%")?"%":"px"):null}),["dropDownMinHeight","dropDownMaxHeight"].forEach(t=>{e.$.dropDownContainer.style[t.replace("dropDown","").replace(/^./,"m")]=e[t]?parseFloat(e[t])+(e[t].toString().endsWith("%")?"%":"px"):null}),e.dropDownWidth?"auto"!==e.dropDownWidth?e.$.dropDownContainer.style.width=("initial"===e.dropDownWidth?e.offsetWidth:parseFloat(e.dropDownWidth))+"px":e.$.dropDownContainer.style.width="auto":e.$.dropDownContainer.style.width="auto"===e._dropDownSize.width?"auto":(parseFloat(e._dropDownSize.width)||0)+"px",e.dropDownHeight&&"auto"!==e.dropDownHeight)e.$.dropDownContainer.style.height=parseFloat(e.dropDownHeight)+((e.dropDownHeight+"").indexOf("%")>-1?"%":"px");else if(!e.$.listBox||"auto"!==e._dropDownSize.height&&"auto"!==e.dropDownHeight)e.$.dropDownContainer.style.height=e._dropDownSize.height;else{e.$.dropDownContainer.style.height="";let o=2*parseInt(window.getComputedStyle(e.$.listBox.$.itemsContainer).getPropertyValue("--smart-list-item-vertical-offset"));if(isNaN(o)&&(o=6),t=o,e.$.listBox.items.length>0?e.$.listBox.items.map(e=>t+=e.height||e.offsetHeight):t=e.$.listBox.$.placeholder.offsetHeight,e.filterable){const o=e.$.listBox.$.filterInputContainer;t+=o.offsetHeight+o.offsetTop}t=t+e._dropDownSize.paddingWidth+e._dropDownSize.borderWidth,e.$.dropDownContainer.style.height=t+"px"}if(e.$.listBox){if(e.$.listBox._refreshLayout(),void 0===t||!e.$.listBox.$)return;const o=Math.max(0,e._dropDownSize.minHeight-(t-e.$.listBox.$.horizontalScrollBar.offsetHeight));o&&(e.$.dropDownContainer.style.height=t+o+"px")}}_styleChangedHandler(e){const t=this;if(t.dropDownAppendTo&&t.dropDownAppendTo.length>0){const o=e.detail.styleProperties,n=["font-size","font-family","font-style","font-weight"];for(let e=0;ethis.filters.length?null:this.logicalOperators[t]}setOperatorAt(t,e){return null==t||t<0||t>this.filters.length?null:void(this.logicalOperators[e]=e)}getFilterAt(t){return null==t||t<0||t>this.filters.length?null:this.filters[t]}setFilterAt(t,e){return null==t||t<0||t>this.filters.length?null:(e.key=this.generateFilterKey(),void(this.filters[t]=e))}clear(){this.filters=new Array,this.logicalOperators=new Array}getUniqueValues(t,e){const r=t.data,n=[],i=[],s="dateFilter"===t.filterType&&"timePicker"===t.displayMode;let l,a=!1;for(let e=0;e=0||r.indexOf(" AND ")>=0||r.indexOf(" OR ")>=0||r.indexOf(" and ")>=0||r.indexOf(" or ")>=0)){const t=s(i,r);if(t)return t;const e=r.indexOf(" and ")>=0?r.split(" and "):new Array,n=r.indexOf(" or ")>=0?r.split(" or "):new Array,a=r.indexOf("|")>=0?r.split("|"):new Array;let o=r.indexOf(" AND ")>=0?r.split(" AND "):new Array,u=r.indexOf(" OR ")>=0?r.split(" OR "):new Array;if(a.length>0)for(let t=0;t=0?r.split(" "):new Array;if(c.length>0)for(let t=0;t0)for(let t=0;t=0&&l.push(o[t]);if(u.length>0)for(let t=0;t=0&&l.push(u[t]);let f=void 0;for(let t=0;te;case"GREATER_THAN_OR_EQUAL":return t>=e;case"LESS_THAN":return t=0||e.indexOf(" AND ")>=0||e.indexOf(" OR ")>=0||e.indexOf(" and ")>=0||e.indexOf(" or ")>=0)){let t=i(n,e);if(t)return t;e=e.toString();const r=e.indexOf(" and ")>=0?e.split(" and "):new Array,l=e.indexOf(" or ")>=0?e.split(" or "):new Array,a=e.indexOf("|")>=0?e.split("|"):new Array;let o=e.indexOf(" AND ")>=0?e.split(" AND "):new Array,u=e.indexOf(" OR ")>=0?e.split(" OR "):new Array;if(o=o.concat(r),u=u.concat(l),a.length>0)for(let t=0;t0)for(let t=0;t=0&&s.push(o[t]);if(u.length>0)for(let t=0;t=0&&s.push(u[t]);let c=void 0;for(let e=0;e=0){const e=r.toString().split("..");2===e.length&&(t=n>=e[0]&&n<=e[1])}else t=i(n,r);const l=e=0&&(s=e.toString().split(".."),2===s.length)?n>=s[0]&&n<=s[1]:i(n,e)}}),Smart.Utilities.Assign("DateFilter",class{constructor(t,e,r,n,i){const s=this,l=new Smart.Utilities.DateTime;if(s.value=t,s.type="dateFilter",void 0!==r){const e=l.parseDate(t,r);if(null!==e)s.filterdate=e;else{const e=l.tryparseDate(t);null!==e&&(s.filterdate=e)}}else{const e=new Date(t);"NaN"===e.toString()||"Invalid Date"===e.toString()?s.filterdate=l.tryparseDate(t):s.filterdate=e}if(!s.filterdate){const e=new Date(t);"NaN"===e.toString()||"Invalid Date"===e.toString()?s.filterdate=l.tryparseDate(t):s.filterdate=e}s.condition=e,s.formatString=r,s.timeOnly=i}evaluate(t){const e=this,r=e.condition,n=e.formatString;let i=e.value;if(e.timeOnly)return e.evaluateTimeOnly(t);if(null==t||""===t){if("NOT_NULL"===r)return!1;if("NULL"===r)return!0;switch(r){case"EQUAL":return t===i;case"NOT_EQUAL":return t!==i}return!1}if("NULL"===r)return!1;if("NOT_NULL"===r)return!0;let s,l=new Date;l.setFullYear(1900,0,1),l.setHours(12,0,0,0);try{const r=new Smart.Utilities.DateTime,a=new Date(t);if(l=t="NaN"===a.toString()||"Invalid Date"===a.toString()?r.tryparseDate(t):a,s=!1,void 0!==n&&(n.indexOf("t")>=0||n.indexOf("T")>=0||n.indexOf(":")>=0||n.indexOf("f")>=0)&&(s=!0,i&&-1===i.toString().indexOf(":"))){const t=r.tryparseDate(i.toString()+":00");null!==t&&(e.filterdate=t)}s||(l.setHours(0),l.setMinutes(0),l.setSeconds(0))}catch(e){if(""!==t.toString())return!1}if(null!==e.filterdate)i=e.filterdate;else if(i&&i.indexOf&&(-1!==i.indexOf(":")||!isNaN(parseInt(i)))){const t=new Date(l);t.setHours(12,0,0,0);const e=i.split(":");for(let r=0;re;case"GREATER_THAN_OR_EQUAL":return t>=e;case"LESS_THAN":return t=0||i.indexOf(" AND ")>=0||i.indexOf(" OR ")>=0||i.indexOf(" and ")>=0||i.indexOf(" or ")>=0)){let t=a(l,i);if(t)return t;const e=i.indexOf(" and ")>=0?i.split(" and "):new Array,r=i.indexOf(" or ")>=0?i.split(" or "):new Array,n=i.indexOf("|")>=0?i.split("|"):new Array;let s=i.indexOf(" AND ")>=0?i.split(" AND "):new Array,u=i.indexOf(" OR ")>=0?i.split(" OR "):new Array;if(s=s.concat(e),u=u.concat(r),n.length>0)for(let t=0;t0)for(let t=0;t=0&&o.push(s[t]);if(u.length>0)for(let t=0;t=0&&o.push(u[t]);let c=void 0;for(let e=0;e=0){const e=r.toString().split("..");2===e.length&&(t=l>=e[0]&&l<=e[1])}else t=a(l,r);const n=e=0&&(o=i.toString().split(".."),2===o.length)?l>=o[0]&&l<=o[1]:a(l,i)}evaluateTimeOnly(t){const e=this.value;return e?!!(t&&t instanceof Date)&&(t.getHours()===e.getHours()&&(t.getMinutes()===e.getMinutes()&&t.getSeconds()===e.getSeconds())):!t}}),Smart.Utilities.Assign("CustomFilter",class{constructor(t,e,r){this.value=t,this.condition=e,this.customfilter=r}evaluate(t){return this.customfilter(this.value,t,this.condition)}}),Smart.FilterGroup=Smart.Utilities.FilterGroup,Smart.StringFilter=Smart.Utilities.StringFilter,Smart.NumericFilter=Smart.Utilities.NumericFilter,Smart.DateFilter=Smart.Utilities.DateFilter,Smart.CustomFilter=Smart.Utilities.CustomFilter}}); -------------------------------------------------------------------------------- /src/smart.input.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v8.0.0 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | !function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=67)}({67:function(e,t){Smart("smart-input",class extends Smart.BaseElement{static get properties(){return{autoCompleteDelay:{value:100,type:"number"},dataSource:{type:"any",value:[],reflectToAttribute:!1},dropDownDataSource:{type:"any",value:[]},dropDownHeight:{type:"any",value:200},dropDownWidth:{type:"any",value:null},dropDownButtonPosition:{allowedValues:["none","left","right"],value:"none",type:"string"},hint:{type:"string",value:""},inputPurpose:{type:"string",value:"off"},items:{type:"number",value:8},minLength:{type:"number",value:1},name:{value:"",type:"string"},opened:{value:!1,type:"boolean"},query:{type:"string",value:""},queryMode:{allowedValues:["contains","containsIgnoreCase","doesNotContain","doesNotContainIgnoreCase","equals","equalsIgnoreCase","startsWith","startsWithIgnoreCase","endsWith","endsWithIgnoreCase"],type:"string",value:"containsIgnoreCase"},placeholder:{value:"",type:"string"},readonly:{type:"boolean",value:!1},sorted:{value:!1,type:"boolean"},sortDirection:{value:"asc",type:"string"},type:{type:"string"},value:{type:"string",value:""}}}static get styleUrls(){return["smart.textbox.css"]}template(){return''}static get listeners(){return{"input.focus":"_focusHandler","input.blur":"_blurHandler","input.keydown":"_keyDownHandler","input.keyup":"_keyUpHandler","input.keypress":"_keyPressHandler","dropDownButton.down":"_dropDownButtonDownHandler","inputContainer.down":"_downHandler","document.up":"_documentUpHandler"}}focus(){this.$.input.focus()}select(){const e=this;e.readonly?e.$.input.focus():e.$.input.select()}_documentUpHandler(e){const t=this,r=t.shadowRoot||t.isInShadowDOM?e.originalEvent.composedPath()[0]:e.originalEvent.target;r!==t&&r!==t.$.dropDownButton&&r!==t.$.input&&r!==t.$.arrow&&(t.$.scrollView.contains(r.shadowParent||r)?t._isPointerDown&&(t._isPointerDown=!1,t.opened&&(t._preventLookup=!0),t.$.input.focus()):(t.opened&&(t._preventLookup=!0),t._isPointerDown||t.close(),t._isPointerDown=!1))}_focusHandler(){const e=this;e.setAttribute("focus",""),e.readonly||0!==e.minLength||0!==e.$.input.value.length||e._preventLookup?(e.$.fireEvent("focus"),delete e._preventLookup):e._lookup()}_blurHandler(){const e=this;e.opened||e.removeAttribute("focus"),e.$.fireEvent("blur"),delete e._preventLookup}_refreshMenu(){const e=this;e.$.menu.classList.remove("scroll"),e.$.scrollView.computedVerticalScrollBarVisibility&&e.$.menu.classList.add("scroll")}_performSelect(){const e=this,t=e.$.menu.querySelector(".active"),r=t.getAttribute("data-label"),n=t.getAttribute("value"),o=e.value,a=e.$.input.dataValue;e.value=r,e.$.input.dataValue=n,e.setAttribute("data-value",e.$.input.dataValue),r===o&&n===a||e.$.fireEvent("change",{value:n,label:r,oldValue:a,oldLabel:o}),e.close()}_open(){const e=this;if(e.opened)return;const t=e.getBoundingClientRect(),r=window.scrollX,n=window.scrollY;let o=0,a=0;if(e.timer&&clearTimeout(e.timer),e.getRootNode()&&e.getRootNode().host?e.getRootNode().host.shadowRoot.appendChild(e.$.scrollView):document.body.appendChild(e.$.scrollView),e.setAttribute("aria-owns",e.$.scrollView.id),e.readonly||e.$.input.setAttribute("aria-controls",e.$.scrollView.id),e.$.scrollView.enableShadowDOM&&!e._importedStyle&&(e.$.scrollView.importStyle(e._getStyleUrl("smart.textbox.css")),e._importedStyle=!0),"static"!==getComputedStyle(document.body).position){const e=document.body.getBoundingClientRect();o=e.left,a=e.top}e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",""),e.$.scrollView.style.left=-3+t.left+r-o+"px",e.$.scrollView.style.top=t.bottom+n-a+1+"px",e.$.scrollView.classList.remove("open"),e.$.scrollView.onpointerdown=function(){e._isPointerDown=!0},requestAnimationFrame((function(){const t=e.dropDownWidth;if(e.$.scrollView.refresh&&e.$.scrollView.refresh(),e._refreshMenu(),e.$.scrollView.setAttribute("open",""),e.setAttribute("open",""),e.$.dropDownButton.setAttribute("open",""),e.$.input.setAttribute("open",""),t&&"string"==typeof t&&-1!==t.indexOf("%")){const r=parseFloat(t)/100;e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",e.offsetWidth*r+"px")}else if("auto"!==t&&t)e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",parseFloat(t)+"px");else if("auto"===t){if(e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",""),e.$.scrollView.$.scrollViewerContainer.classList.contains("vscroll")){const t=e.$.scrollView.offsetWidth+parseFloat(getComputedStyle(e.$.scrollView).getPropertyValue("--smart-scroll-bar-size"));e.$.scrollView.style.setProperty("--smart-input-drop-down-menu-width",t+"px")}}else{e.$.menu.style.width="auto";let t=e.$.menu.offsetWidth;const r=e.$.menu.querySelectorAll("li");for(let t=0;te.$.scrollView._scrollView.vScrollBar.refresh())})),e.$.scrollView.refresh&&e.$.scrollView.refresh(),e._refreshMenu(),this.opened=!0,e.setAttribute("aria-expanded",!0)}close(){const e=this;return!!e.opened&&(e.timer&&clearTimeout(e.timer),e.timer=setTimeout((function(){e.$.scrollView.parentNode&&!e.opened&&(e.$.scrollView.remove(),e.removeAttribute("aria-owns"),e.readonly||e.$.input.removeAttribute("aria-controls"))}),1e3),e.$.scrollView.removeAttribute("open"),e.$.dropDownButton.removeAttribute("open"),e.$.input.removeAttribute("open"),e.removeAttribute("open"),e.opened=!1,e.setAttribute("aria-expanded",!1),e.$.input.focus(),!0)}_lookup(e){const t=this;let r=[];t.query=t.$.input.value,t.$.input.readonly&&(t._incrementalSearchQuery||(t._incrementalSearchQuery=""),t._incrementalSearchQuery+=e.key,t._incrementalSearchTimer&&clearTimeout(t._incrementalSearchTimer),t.query=t._incrementalSearchQuery,t._incrementalSearchTimer=setTimeout((function(){t._incrementalSearchQuery=""}),700)),t.query.lengthvoid 0!==e.label?e.label.localeCompare(t.label):e.localeCompare(t)),"desc"===t.sortDirection&&e.reverse()),!e.length&&t.opened&&t.close(),0!==e.length&&(t.query.length>0?t._render(e.slice(0,t.items)):t._render(e),t._open(),t.$.scrollView.refresh&&t.$.scrollView.refresh(),t._refreshMenu(),t.ensureVisible())}_matcher(e){const t=this.query;switch(e=e.label||e,this.queryMode){case"startsWith":return e.startsWith(t);case"startsWithIgnoreCase":return e.toLowerCase().startsWith(t.toLowerCase());case"doesNotContain":return e.indexOf(t)<0;case"doesNotContainIgnoreCase":return e.toLowerCase().indexOf(t.toLowerCase())<0;case"contains":return e.indexOf(t)>-1;default:case"containsIgnoreCase":return~e.toLowerCase().indexOf(t.toLowerCase());case"equals":return 0===e.localeCompare(t);case"equalsIgnoreCase":return 0===e.toLowerCase().localeCompare(t.toLowerCase());case"endsWith":return e.endsWith(t);case"endsWithIgnoreCase":return e.toLowerCase().endsWith(t.toLowerCase())}}_sorter(e){const t=this;let r,n=[],o=[],a=[];for(;r=e.shift();){const e=r.label||r;e.toLowerCase().indexOf(t.query.toLowerCase())?~e.indexOf(t.query)?o.push(r):a.push(r):n.push(r)}return n.concat(o,a)}_highlighter(e){const t=this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&");return e.replace(new RegExp("("+t+")","ig"),(function(e,t){return""+t+""}))}_render(e){const t=this,r=e.map((function(e){let r=e,n=e;"object"==typeof e&&(r=e.label,n=e.value||r);const o=document.createElement("li"),a=document.createElement("a");return a.href="#",o.id=t.id+"Item"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),o.setAttribute("data-label",r),o.setAttribute("value",n),o.setAttribute("role","option"),o.setAttribute("aria-label",r),a.innerHTML=t.highlighter?t.highlighter(r):t._highlighter(r),a.setAttribute("aria-hidden",!0),e.icon&&(a.classList.add("icon"),a.classList.add(e.icon)),o.appendChild(a),o}));function n(){const e=t.$.menu.getElementsByClassName("active");e[0]&&e[0].classList.remove("active"),this.classList.add("active"),t._setActiveDescendant(this)}r.length>0&&(r[0].classList.add("active"),t._setActiveDescendant(r[0])),t.$.menu.innerHTML="";for(let e=0;e=e.$.scrollView.scrollTop+e.$.scrollView.offsetHeight&&(e.$.scrollView.scrollTop=t.offsetTop+t.offsetHeight),(t.offsetTop<=e.$.scrollView.scrollTop||t.offsetTop>=e.$.scrollView.scrollTop+e.$.scrollView.offsetHeight)&&(e.$.scrollView.scrollTop=t.offsetTop),0===[...e.$.menu.children].indexOf(t)?e.$.scrollView.scrollTop=0:[...e.$.menu.children].indexOf(t)===e.$.menu.children.length-1&&(e.$.scrollView.scrollTop=e.$.scrollView.scrollHeight))}_next(){const e=this,t=e.$.menu.querySelector(".active");if(!t){const t=e.$.menu.firstElementChild;return t.classList.add("active"),void e._setActiveDescendant(t)}t.classList.remove("active");let r=t.nextElementSibling;r||(r=e.$.menu.firstElementChild),r.classList.add("active"),e._setActiveDescendant(r),e.ensureVisible()}_prev(){const e=this,t=e.$.menu.querySelector(".active");if(!t){const t=e.$.menu.firstElementChild;return t.classList.add("active"),void e._setActiveDescendant(t)}t.classList.remove("active");let r=t.previousElementSibling;r||(r=e.$.menu.lastElementChild),r.classList.add("active"),e._setActiveDescendant(r),e.ensureVisible()}_move(e){const t=this;if(t.opened){switch(e.keyCode){case 9:case 13:case 27:e.preventDefault();break;case 38:e.preventDefault(),t._prev();break;case 40:e.preventDefault(),t._next()}e.stopPropagation()}}_keyDownHandler(e){this._suppressKeyPressRepeat=![40,38,9,13,27,16,17,18].includes(e.keyCode),e.shiftKey||e.altKey||e.ctrlKey||this._move(e)}_keyPressHandler(e){this._suppressKeyPressRepeat||e.shiftKey||e.altKey||e.ctrlKey||this._move(e)}_keyUpHandler(e){const t=this;if(!e.shiftKey)switch(e.keyCode){case 40:case 38:case 16:case 17:case 18:40===e.keyCode&&e.altKey&&t.open(),38===e.keyCode&&e.altKey&&t.close();break;case 9:case 13:if(!t.opened)return;t._performSelect(),e.stopPropagation(),e.preventDefault();break;case 27:if(!t.opened)return;t.close(),e.stopPropagation(),e.preventDefault();break;default:t._lookup(e),!t.opened||e.ctrlKey||e.shiftKey||(e.stopPropagation(),e.preventDefault()),t.$.input.dataValue=t.$.input.value,t.setAttribute("data-value",t.$.input.dataValue)}}propertyChangedHandler(e,t,r){super.propertyChangedHandler(e,t,r);const n=this;if("dropDownHeight"===e)"auto"!==n.dropDownHeight?n.$.scrollView.style.setProperty("--smart-input-drop-down-menu-height",n.dropDownHeight+"px"):n.$.scrollView.style.setProperty("--smart-input-drop-down-menu-height","auto");else if("opened"===e)n.opened=t,r?n.open():n.close();else if("placeholder"===e){if(n.readonly){const e=n.getAttribute("aria-label");if(e&&e!==t)return;r?n.setAttribute("aria-label",r):n.removeAttribute("aria-label")}}else"value"===e?n.displayMember!==n.valueMember&&"string"!=typeof r?(n.value=r[n.displayMember],n.$.input.dataValue=r[n.valueMember],n.setAttribute("data-value",n.$.input.dataValue)):n.$.input.value=r:"readonly"===e?(n._setAriaRelations(),n._setInputPurpose()):"theme"===e||"rightToLeft"===e?n.$.scrollView[e]=r:"inputPurpose"===e?n._setInputPurpose():"inverted"===e?r?n.$.scrollView.setAttribute("inverted",""):n.$.scrollView.removeAttribute("inverted"):"disabled"!==e&&"unfocusable"!==e||n._setFocusable()}render(){const e=this;e.hint||(e.hint=e.placeholder),e._createElement&&e._createElement(),e.opened&&(e.opened=!1,e.open());const t=e.$.scrollView,r=e.$.menu;r&&(r.setAttribute("role","presentation"),t.appendChild(r)),"auto"!==e.dropDownHeight?t.style.setProperty("--smart-input-drop-down-menu-height",e.dropDownHeight+"px"):t.style.setProperty("--smart-input-drop-down-menu-height","auto"),t.classList.add("smart-input-drop-down-menu"),t.id=e.id+"_"+e.tagName.toLowerCase()+"_menu_"+Math.floor(65536*(1+Math.random())).toString(16).substring(1),t.ownerElement=e,e._setAriaRelations(),e._setInputPurpose(),super.render()}_createElement(){const e=this,t=document.createElement("ul"),r=document.createElement("smart-scroll-viewer");r.rightToLeft=e.rightToLeft,r.theme=e.theme,r.horizontalScrollBarVisibility="hidden",e.inverted?r.setAttribute("inverted",""):r.removeAttribute("inverted"),e.$.scrollView=r,e.$.menu=t,e._setFocusable(),e.$.menu.onclick=function(t){t.stopPropagation(),t.preventDefault(),e._performSelect(),e.$.input.focus()}}_setAriaRelations(){const e=this,t=e.getAttribute("aria-label");e.readonly?(e.setAttribute("role","button"),!t&&e.placeholder&&e.setAttribute("aria-label",e.placeholder),e.removeAttribute("aria-readonly"),e.$.input.setAttribute("aria-hidden",!0),e.$.input.removeAttribute("aria-activedescendant"),e.$.input.removeAttribute("aria-controls"),e.$.dropDownButton.setAttribute("aria-hidden",!0)):(e.setAttribute("role","combobox"),t&&t===e.placeholder&&e.removeAttribute("aria-label"),e.$.input.setAttribute("role","searchbox"),e.$.input.removeAttribute("aria-hidden",!0),e.$.dropDownButton.removeAttribute("aria-hidden")),e.setAttribute("aria-expanded",e.opened),e.setAttribute("aria-haspopup","listbox"),e.$.scrollView.setAttribute("role","listbox")}_setActiveDescendant(e){const t=this;t.readonly||(e?t.setAttribute("aria-activedescendant",e.id):t.removeAttribute("aria-activedescendant"))}_setInputPurpose(){const e=this;e.readonly?e.$.input.removeAttribute("autocomplete"):e.$.input.setAttribute("autocomplete",e.inputPurpose)}_setFocusable(){const e=this;e.disabled||e.unfocusable?e.$.input.setAttribute("tabindex",-1):e.$.input.removeAttribute("tabindex")}}),Smart("smart-text-area",class extends Smart.Input{template(){return''}render(){super.render(),this.classList.add("smart-input")}}),Smart("smart-number-input",class extends Smart.Input{template(){return''}static get properties(){return{formatSettings:{value:{style:"currency",currencySign:"accounting",currencyDisplay:"code",currency:"USD"},type:"any"},min:{value:0,type:"number"},max:{value:9999999999,type:"number"},step:{value:1,type:"number"},value:{value:0,type:"any"}}}getFormattedValue(e,t){return null===t?parseFloat(e):new Intl.NumberFormat(this.locale,t).format(""+e)}render(){const e=this;super.render(),e.classList.add("smart-input");const t=e.$.input,r=document.createElement("div"),n=document.createElement("div");t.value=e.getFormattedValue(Math.min(Math.max(e.min,e.value),e.max),e.formatSettings),r.tabIndex=n.tabIndex=-1,t.classList.add("smart-input"),r.classList.add("up"),n.classList.add("down");const o=function(r){if("keydown"!==r.type);else{let n=t.value.toString(),o=1.1;o=o.toLocaleString().substring(1,2);const s=n.indexOf(o);if(r.keyCode>=65&&r.keyCode<=90)return r.stopPropagation(),void r.preventDefault();if(" "===r.key)return r.stopPropagation(),void r.preventDefault();if("-"===r.key){const e=a();return i(-e),r.stopPropagation(),void r.preventDefault()}switch(r.key){case"'":case'"':case"/":case"\\":case"`":case"=":case"(":case")":return r.stopPropagation(),void r.preventDefault()}if(","===r.key&&","!==o||"."===r.key&&"."!==o)return r.stopPropagation(),void r.preventDefault();const l=[...n];let u=l[t.selectionStart];if(r.key===o){if(-1===e.getFormattedValue(a(),e.formatSettings).indexOf(o))return r.stopPropagation(),void r.preventDefault();if(s>=0)return r.stopPropagation(),r.preventDefault(),void(t.selectionStart=t.selectionEnd=s+1)}else if(r.keyCode>=48&&r.keyCode<=57&&t.selectionStart=0&&t.selectionStart>s&&r.keyCode>=48&&r.keyCode<=57){const n=t.selectionStart,i=e.getFormattedValue(a(),e.formatSettings);let l=0;if(i&&-1!==i.indexOf(o))for(let e=i.indexOf(o);e=0&&t.selectionStart>s,l=e.getFormattedValue(a(),e.formatSettings);let u=0;if(l&&-1!==l.indexOf(o))for(let e=l.indexOf(o);e=0?(t.selectionStart=t.selectionEnd=n+1,d=!0):i&&e.length<=u&&(t.value=c,t.selectionStart=t.selectionEnd=n+1,d=!0)}else if("Backspace"===r.key){c=c.substring(0,t.selectionStart-1)+"0"+c.substring(t.selectionStart);const e=c.substring(s+1);-1===c.indexOf(o)&&s>=0?(t.selectionStart=t.selectionEnd=n-1,d=!0):i&&e.length<=u&&(t.value=c,t.selectionStart=t.selectionEnd=n-1,d=!0)}return void(d&&(r.stopPropagation(),r.preventDefault()))}}}};e.$.dropDownButton.appendChild(r),e.$.dropDownButton.appendChild(n),e.dropDownButtonPosition="right";const a=function(){let r=t.value.replace("%","").replace("$","").replace("€",""),n=12345.1;n=n.toLocaleString().substring(2,3);const o=new RegExp(n,"g");r=r.replace(o,"");let a=!1;r.indexOf("(")>=0&&(a=!0,r=r.replace("(","").replace(")",""));let i=[...r],s="";for(let e=0;e0?0:1;t.value=n,t.selectionStart=t.selectionEnd=1+o+a}else t.value=n;"number"==typeof r&&(t.selectionStart=0,t.selectionEnd=t.value.length)}};e.setValue=i;this._attach=function(){t.addEventListener("keydown",o),r.onkeydown=o,n.onkeydown=o;const i=t=>{if(e.formatSettings){return e.getFormattedValue(t,e.formatSettings)}return t},s=function(e){e.interval&&clearInterval(e.interval),e.timer&&clearTimeout(e.timer),e.interval=e.timer=null,e.removeAttribute("active")},l=t=>{t.onmouseleave=t.onmouseup=()=>{s(t)},t.onpointerdown=()=>{e._captured=!0,t.timer=setTimeout(()=>{t.interval=setInterval(()=>{t.click(),t.setAttribute("active","")},50)},100)}};r.onclick=function(){const n=a();e._captured||s(r),isNaN(n)||(ne.min||""===e.min)&&(t.value=i(Math.max(e.min,r-e.step)))},l(r),l(n)},e._detach=function(){t.removeEventListener("keydown",o),r.onclick=n.onclick=null,r.onkeydown=n.onkeydown=null}}_blurHandler(){super._blurHandler(),this.value=this.getFormattedValue(this.getValue(),this.formatSettings)}attached(){this._attach()}detached(){this._detach()}_documentUpHandler(e){this._captured=!1,super._documentUpHandler(e)}})}}); -------------------------------------------------------------------------------- /src/smart.pager.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v8.0.0 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | !function(e){var t={};function a(n){if(t[n])return t[n].exports;var s=t[n]={i:n,l:!1,exports:{}};return e[n].call(s.exports,s,s.exports,a),s.l=!0,s.exports}a.m=e,a.c=t,a.d=function(e,t,n){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(a.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)a.d(n,s,function(t){return e[t]}.bind(null,s));return n},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="",a(a.s=83)}({83:function(e,t){Smart("smart-pager",class extends Smart.BaseElement{static get properties(){return{autoEllipsis:{value:"none",type:"string",allowedValues:["none","before","after","both"]},messages:{value:{en:{firstButton:"First",lastButton:"Last",previousButton:"Previous",nextButton:"Next",navigateToLabel:"Go to:",pageSizeLabel:"Show:",navigateToInputPlaceholder:"",ellipsis:"...",summaryString:"of",summaryPrefix:"of",summarySuffix:""}},type:"object",extend:!0},navigationButtonsPosition:{value:"both",allowedValues:["near","far","both"],type:"string"},navigationInputPosition:{value:"far",allowedValues:["near","far"],type:"string"},pageIndex:{value:0,type:"number"},pageIndexSelectors:{value:0,type:"any"},pagesCount:{value:100,type:"number?"},pageSize:{value:10,type:"number"},pageSizeSelectorPosition:{value:"far",allowedValues:["near","far"],type:"string"},pageSizeSelectorDataSource:{value:[10,25,50],type:"array"},showPrevNextNavigationButtons:{value:!1,type:"boolean"},showFirstLastNavigationButtons:{value:!1,type:"boolean"},showNavigationButtonLabels:{value:!1,type:"boolean"},showNavigationInput:{value:!1,type:"boolean"},showSummary:{value:!1,type:"boolean"},showPageSizeSelector:{value:!1,type:"boolean"},showPageIndexSelectors:{value:!1,type:"boolean"},summaryPosition:{value:"far",allowedValues:["near","far"],type:"string"},totalRecords:{value:null,type:"int?"}}}static get listeners(){return{click:"_navigationButtonsClickHandler","nextEllipsisButton.click":"_nextEllipsisButtonClickHandler","previousEllipsisButton.click":"_previousEllipsisButtonClickHandler",down:"_navigationButtonsDownHandler","navigateToInput.change":"_navigateToInputChangeHandler","nextButton.pointerenter":"_updateInBoundsFlag","nextButton.pointerleave":"_updateInBoundsFlag","pageIndexSelectorsContainer.click":"_pageIndexSelectorsContainerClickHandler","pageSizeSelector.change":"_pageSizeSelectorChangeHandler","previousButton.pointerenter":"_updateInBoundsFlag","previousButton.pointerleave":"_updateInBoundsFlag",keydown:"_keyDownHandler",resize:"_resizeHandler","document.up":"_stopRepeat"}}static get requires(){return{"Smart.DropDownList":"smart.dropdownlist.js"}}static get styleUrls(){return["smart.dropdown.css","smart.dropdownlist.css","smart.pager.css"]}template(){return''}ready(){super.ready()}render(){const e=this;e.$.navigateToLabel.id||(e.$.navigateToLabel.id=e.id+"NavigateToLabel"),e.$.pageSizeLabel.id||(e.$.pageSizeLabel.id=e.id+"PageSizeLabel"),e.$.pagerSummaryContainer.id||(e.$.pagerSummaryContainer.id=e.id+"SummaryContainer"),e.setAttribute("role","navigation"),e.setAttribute("aria-labelledby",e.$.pagerSummaryContainer.id),e.$.navigateToInput.setAttribute("aria-labelledby",e.$.navigateToLabel.id),e.$.pageSizeSelector.setAttribute("aria-labelledby",e.$.pageSizeLabel.id),e._render(),super.render()}refresh(){this._render()}propertyChangedHandler(e,t,a){super.propertyChangedHandler(e,t,a);const n=this;switch(e){case"navigationButtonsPosition":return void n._renderButtons();case"navigationInputPosition":case"pageSizeSelectorPosition":case"summaryPosition":case"totalRecords":return void n._renderSettings()}n._render()}next(){this.navigateTo(this.pageIndex+1)}prev(){this.navigateTo(this.pageIndex-1)}beginUpdate(){this._updating=!0}endUpdate(){this._updating=!1,this._render()}_render(){const e=this;if(!e._updating&&(e.$.navigateToInput.value=(1+e.pageIndex).toString(),e._renderButtons(),e._renderPageIndexSelectors(),e._renderSettings(),e._renderVisibility(),e._localize(),e.$.pageSizeSelector&&e.showPageSizeSelector)){const t=e.pageSizeSelectorDataSource.indexOf(e.pageSize);t>=0&&(e.$.pageSizeSelector.selectedIndexes=[t])}}_resizeHandler(){this._renderVisibility()}_renderVisibility(){const e=this,t=e.offsetWidth-20;e._pageIndexSelectorsVisibleCount=e._pageIndexSelectorsCount,e.showSummary?e.$pagerSummaryContainer.removeClass("smart-hidden"):e.$pagerSummaryContainer.addClass("smart-hidden"),e.showPageIndexSelectors?e.$middleButtonsContainer.removeClass("smart-hidden"):e.$middleButtonsContainer.addClass("smart-hidden"),e.showNavigationInput?(e.$navigateToLabel.removeClass("smart-hidden"),e.$navigateToInput.removeClass("smart-hidden")):(e.$navigateToLabel.addClass("smart-hidden"),e.$navigateToInput.addClass("smart-hidden")),e.showPageSizeSelector?(e.$pageSizeLabel.removeClass("smart-hidden"),e.$pageSizeSelector.removeClass("smart-hidden")):(e.$pageSizeLabel.addClass("smart-hidden"),e.$pageSizeSelector.addClass("smart-hidden")),e.showFirstLastNavigationButtons?(e.$firstButton.removeClass("smart-hidden"),e.$lastButton.removeClass("smart-hidden")):(e.$firstButton.addClass("smart-hidden"),e.$lastButton.addClass("smart-hidden")),e.showPrevNextNavigationButtons?(e.$previousButton.removeClass("smart-hidden"),e.$nextButton.removeClass("smart-hidden")):(e.$previousButton.addClass("smart-hidden"),e.$nextButton.addClass("smart-hidden")),e.$previousEllipsisButton.addClass("smart-hidden"),e.$nextEllipsisButton.addClass("smart-hidden"),"after"!==e.autoEllipsis&&"none"!==e.autoEllipsis&&e.pageIndex>=e._pageIndexSelectorsCount&&e.$previousEllipsisButton.removeClass("smart-hidden"),"before"!==e.autoEllipsis&&"none"!==e.autoEllipsis&&e.pageIndex0&&n>t&&(n-=e.$.pagerSummaryContainer.offsetWidth,e.$pagerSummaryContainer.addClass("smart-hidden"),n>t&&(n-=e.$.navigateToLabel.offsetWidth,n-=e.$.navigateToInput.offsetWidth,e.$navigateToLabel.addClass("smart-hidden"),e.$navigateToInput.addClass("smart-hidden"),n>t))){if(n-=e.$.pageSizeLabel.offsetWidth,n-=e.$.pageSizeSelector.offsetWidth,e.$pageSizeLabel.addClass("smart-hidden"),e.$pageSizeSelector.addClass("smart-hidden"),n>t){e.$previousEllipsisButton.addClass("smart-hidden"),e.$nextEllipsisButton.addClass("smart-hidden"),n-=e.$.previousEllipsisButton.offsetWidth,n-=e.$.nextEllipsisButton.offsetWidth;for(let a=e._pageIndexSelectorsCount-1;a>=0;a--){const s=e.$.pageIndexSelectorsContainer.children[a];if(nt&&e.showFirstLastNavigationButtons&&(e.$firstButton.addClass("smart-hidden"),e.$lastButton.addClass("smart-hidden"))}}_renderSettings(){const e=this,t=e.totalRecords;let a=e.pageIndex*e.pageSize,n=(e.pageIndex+1)*e.pageSize,s=e.pagesCount*e.pageSize;null!==t&&(n===s&&(n=t),s=t,0===t&&(a=-1)),e.$pagerSummaryContainer.removeClass("near"),e.$pagerSizeSelectorAndLabelContainer.removeClass("near"),e.$pagerInputAndLabelContainer.removeClass("near"),"near"===e.summaryPosition&&e.$pagerSummaryContainer.addClass("near"),"near"===e.pageSizeSelectorPosition&&e.$pagerSizeSelectorAndLabelContainer.addClass("near"),"near"===e.navigationInputPosition&&e.$pagerInputAndLabelContainer.addClass("near"),e.$.pagerSummaryContainer.innerHTML=''+(1+a)+' - '+n+''+e.localize("summaryPrefix")+' '+s+' '+e.localize("summarySuffix")+""}get _pageIndexSelectorsCount(){const e=this;let t=parseInt(e.pageIndexSelectors);return Array.isArray(e.pageIndexSelectors)&&(t=e.pageIndexSelectors.length),t}_renderPageIndexSelectors(){const e=this;if(e.pageIndex<0||e.pageIndex>=e.pagesCount)return void(e.$.pageIndexSelectorsContainer.innerHTML="");e.$.pageIndexSelectorsContainer.innerHTML="";let t=!1;Array.isArray(e.pageIndexSelectors)&&(t=!0);let a=Math.floor(e.pageIndex/e._pageIndexSelectorsCount)*e._pageIndexSelectorsCount,n=Math.min(e.pagesCount,a+e._pageIndexSelectorsCount),s=0;for(let r=a;r=this.pagesCount||(this.pageIndex=e,this._render(),this.$.fireEvent("change",{oldIndex:t,index:e}))}_localize(){const e=this,t=["firstButton","lastButton","previousButton","nextButton"];for(let a=0;a=2?(n.innerHTML="",2===a?n.classList.add("smart-arrow-left"):n.classList.add("smart-arrow-right")):(n.classList.remove("smart-arrow-left"),n.classList.remove("smart-arrow-right"),n.classList.remove("smart-arrow-left-first"),n.classList.remove("smart-arrow-right-last"),n.innerHTML=e.localize(t[a]))}e.$.pageSizeLabel.innerHTML=e.localize("pageSizeLabel"),e.$.navigateToLabel.innerHTML=e.localize("navigateToLabel"),e.$.previousEllipsisButton.innerHTML=e.localize("ellipsis"),e.$.nextEllipsisButton.innerHTML=e.localize("ellipsis"),e.$.navigateToInput.placeholder=e.localize("navigateToInputPlaceholder")}_nextEllipsisButtonClickHandler(){this.navigateTo(this._pageIndexSelectorsCount+this.pageIndex)}_previousEllipsisButtonClickHandler(){this.navigateTo(-this._pageIndexSelectorsCount+this.pageIndex)}_navigationButtonsClickHandler(e){const t=this;if(!t.disabled)switch(t.enableShadowDOM?e.composedPath()[0].closest(".smart-pager-button"):e.target.closest(".smart-pager-button")){case t.$.firstButton:t._firstButtonClickHandler(e);break;case t.$.lastButton:t._lastButtonClickHandler(e);break;case t.$.previousButton:t._previousButtonClickHandler(e);break;case t.$.nextButton:t._nextButtonClickHandler(e)}}_navigationButtonsDownHandler(e){const t=this,a=t.enableShadowDOM?e.originalEvent.composedPath()[0].closest(".smart-pager-button")||e.originalEvent.composedPath()[0].closest(".smart-pager-page-index-selector"):e.originalEvent.target.closest(".smart-pager-button")||e.originalEvent.target.closest(".smart-pager-page-index-selector");!t.disabled&&a&&(t.hasRippleAnimation&&Smart.Utilities.Animation.Ripple.animate(a,e.pageX,e.pageY),a!==t.$.previousButton&&a!==t.$.nextButton||t._startRepeat(e,a))}_updateInBoundsFlag(e){const t=this,a=t.enableShadowDOM?e.composedPath()[0]:e.target;a._isPointerInBounds=!0,-1!==e.type.indexOf("leave")&&(a._isPointerInBounds=!1),1!==("buttons"in e?e.buttons:e.which)&&t._stopRepeat()}_startRepeat(e,t){const a=this;a._initialTimer||(a._initialTimer=setTimeout((function(){a._repeatTimer=setInterval(()=>{t._isPointerInBounds&&(t===a.$.previousButton?a._previousButtonClickHandler(e):a._nextButtonClickHandler(e))},50)}),150))}_stopRepeat(){const e=this;e._repeatTimer&&(clearInterval(e._repeatTimer),e._repeatTimer=null),e._initialTimer&&(clearTimeout(e._initialTimer),e._initialTimer=null)}})}}); -------------------------------------------------------------------------------- /src/smart.scrollbar.js: -------------------------------------------------------------------------------- 1 | 2 | /* Smart UI v7.7.4 (2020-Aug) 3 | Copyright (c) 2011-2020 jQWidgets. 4 | License: https://htmlelements.com/license/ */ // 5 | 6 | /** 7 | * ScrollBar custom element. 8 | */ 9 | Smart('smart-scroll-bar', class ScrollBar extends Smart.BaseElement { 10 | // ScrollBar's properties. 11 | static get properties() { 12 | return { 13 | 'clickRepeatDelay': { 14 | type: 'integer', 15 | value: 50 16 | }, 17 | 'largeStep': { 18 | type: 'integer', 19 | value: 100 20 | }, 21 | 'min': { 22 | type: 'integer', 23 | value: 0 24 | }, 25 | 'max': { 26 | type: 'integer', 27 | value: 1000 28 | }, 29 | 'mechanicalAction': { 30 | value: 'switchWhileDragging', 31 | allowedValues: ['switchUntilReleased', 'switchWhenReleased', 'switchWhileDragging'], 32 | type: 'string' 33 | }, 34 | 'orientation': { 35 | type: 'string', 36 | value: 'horizontal', 37 | allowedValues: ['horizontal', 'vertical'] 38 | }, 39 | 'step': { 40 | type: 'integer', 41 | value: 10 42 | }, 43 | 'showButtons': { 44 | type: 'boolean', 45 | value: true, 46 | defaultReflectToAttribute: true 47 | }, 48 | 'value': { 49 | type: 'integer', 50 | value: 0 51 | } 52 | }; 53 | } 54 | 55 | static get styleUrls() { 56 | return [ 57 | 'smart.scrollbar.css' 58 | ] 59 | } 60 | 61 | /** ScrollBar's template. */ 62 | template() { 63 | const template = 64 | ``; 71 | 72 | return template; 73 | } 74 | 75 | static get listeners() { 76 | return { 77 | 'nearButton.click': '_nearButtonClickHandler', 78 | 'nearButton.down': '_startRepeat', 79 | 'nearButton.up': '_stopRepeat', 80 | 'nearButton.pointerenter': '_updateInBoundsFlag', 81 | 'nearButton.pointerleave': '_updateInBoundsFlag', 82 | 'farButton.click': '_farButtonClickHandler', 83 | 'farButton.down': '_startRepeat', 84 | 'farButton.up': '_stopRepeat', 85 | 'farButton.pointerenter': '_updateInBoundsFlag', 86 | 'farButton.pointerleave': '_updateInBoundsFlag', 87 | 'track.down': '_trackDownHandler', 88 | 'track.click': '_trackClickHandler', 89 | 'track.move': '_trackMoveHandler', 90 | 'thumb.down': '_dragStartHandler', 91 | 'document.move': '_dragHandler', 92 | 'document.up': '_dragEndHandler', 93 | 'up': '_dragEndHandler', 94 | 'document.selectstart': '_selectStartHandler', 95 | 'resize': '_resizeHandler' 96 | }; 97 | } 98 | 99 | _updateInBoundsFlag(event) { 100 | const that = this; 101 | 102 | const button = event.target; 103 | 104 | button._isPointerInBounds = true; 105 | 106 | if (event.type.indexOf('leave') !== -1) { 107 | button._isPointerInBounds = false; 108 | } 109 | 110 | const buttons = ('buttons' in event) ? event.buttons : event.which; 111 | if (buttons !== 1) { 112 | that._stopRepeat(event); 113 | } 114 | } 115 | 116 | _startRepeat(event) { 117 | const that = this; 118 | 119 | if (that.disabled) { 120 | return; 121 | } 122 | 123 | const button = event.target; 124 | 125 | if (!button._initialTimer) { 126 | button._initialTimer = setTimeout(function () { 127 | button._repeatTimer = setInterval(() => { 128 | if (button._isPointerInBounds) { 129 | const buttons = ('buttons' in event) ? event.buttons : event.which; 130 | 131 | button.$.fireEvent('click', { buttons: buttons, clientX: event.clientX, clientY: event.clientY, pageX: event.pageX, pageY: event.pageY, screenX: event.screenX, screenY: event.screenY }); 132 | } 133 | }, that.clickRepeatDelay); 134 | }, 3 * that.clickRepeatDelay); 135 | } 136 | } 137 | 138 | _stopRepeat(event) { 139 | const that = this; 140 | 141 | if (that.disabled) { 142 | return; 143 | } 144 | 145 | const button = event.target; 146 | 147 | if (button._repeatTimer) { 148 | clearInterval(button._repeatTimer); 149 | button._repeatTimer = null; 150 | } 151 | 152 | if (button._initialTimer) { 153 | clearTimeout(button._initialTimer); 154 | button._initialTimer = null; 155 | } 156 | } 157 | 158 | _calculateThumbSize(scrollAreaSize) { 159 | const that = this; 160 | const positions = that.max - that.min; 161 | const enoughSpace = that.orientation === 'horizontal' ? 162 | that.$.track.offsetWidth > 10 : that.$.track.offsetHeight > 10; 163 | let size = 0; 164 | 165 | if (positions >= 1 && enoughSpace) { 166 | size = (scrollAreaSize / (positions + scrollAreaSize) * scrollAreaSize); 167 | 168 | if (that.$.thumb.className.indexOf('smart-hidden') >= 0) { 169 | that.$thumb.removeClass('smart-hidden'); 170 | } 171 | } 172 | else { 173 | that.$thumb.addClass('smart-hidden'); 174 | } 175 | 176 | return Math.max(10, Math.min(size, scrollAreaSize)); 177 | } 178 | 179 | _dragStartHandler(event) { 180 | const that = this; 181 | 182 | if (that.disabled) { 183 | return; 184 | } 185 | 186 | that.thumbCapture = true; 187 | that.dragStartX = event.clientX; 188 | that.dragStartY = event.clientY; 189 | 190 | that.dragStartValue = that.value; 191 | 192 | event.stopPropagation(); 193 | event.preventDefault(); 194 | } 195 | 196 | _dragHandler(event) { 197 | const that = this; 198 | 199 | if (that.thumbCapture !== true) { 200 | return; 201 | } 202 | 203 | that._isThumbDragged = true; 204 | 205 | const ratio = (that.max - that.min) / (that.scrollBarSize - that.thumbSize); 206 | const offsetValue = that.orientation === 'horizontal' ? (event.clientX - that.dragStartX) * ratio : (event.clientY - that.dragStartY) * ratio; 207 | let step = offsetValue; 208 | 209 | 210 | if (that.rightToLeft && that.orientation === 'horizontal') { 211 | step = -offsetValue; 212 | } 213 | 214 | that._updateValue(that.dragStartValue + step); 215 | 216 | event.stopPropagation(); 217 | event.preventDefault(); 218 | 219 | if (event.originalEvent) { 220 | event.originalEvent.stopPropagation(); 221 | event.originalEvent.preventDefault(); 222 | } 223 | } 224 | 225 | _dragEndHandler(event) { 226 | const that = this; 227 | 228 | if (that._trackDownTimer) { 229 | clearInterval(that._trackDownTimer); 230 | that._trackDownTimer = null; 231 | } 232 | 233 | if (!that.thumbCapture) { 234 | return; 235 | } 236 | 237 | 238 | that.thumbCapture = false; 239 | that._isThumbDragged = false; 240 | 241 | if (that.mechanicalAction === 'switchWhenReleased') { 242 | that._updateValue(that.dragStartValue, that.value); 243 | } 244 | else if (this.mechanicalAction === 'switchUntilReleased') { 245 | that._updateValue(that.dragStartValue); 246 | } 247 | 248 | event.preventDefault(); 249 | event.stopPropagation(); 250 | 251 | event.originalEvent.preventDefault(); 252 | event.originalEvent.stopPropagation(); 253 | } 254 | 255 | _farButtonClickHandler() { 256 | const that = this; 257 | 258 | if (that.disabled) { 259 | return; 260 | } 261 | 262 | const value = that.value; 263 | 264 | that._updateValue(that.value + (that.orientation === 'horizontal' && that.rightToLeft ? -1 : 1) * that.step); 265 | 266 | if (that.mechanicalAction === 'switchUntilReleased') { 267 | that._updateValue(value); 268 | } 269 | } 270 | 271 | _nearButtonClickHandler() { 272 | const that = this; 273 | 274 | if (that.disabled) { 275 | return; 276 | } 277 | 278 | const value = that.value; 279 | 280 | that._updateValue(that.value - (that.orientation === 'horizontal' && that.rightToLeft ? -1 : 1) * that.step); 281 | 282 | if (that.mechanicalAction === 'switchUntilReleased') { 283 | that._updateValue(value); 284 | } 285 | } 286 | 287 | propertyChangedHandler(propertyName, oldValue, newValue) { 288 | super.propertyChangedHandler(propertyName, oldValue, newValue); 289 | 290 | const that = this; 291 | 292 | switch (propertyName) { 293 | case 'min': 294 | case 'max': 295 | case 'orientation': 296 | case 'showButtons': { 297 | that._layout(); 298 | 299 | if (propertyName === 'min') { 300 | that.setAttribute('aria-valuemin', newValue); 301 | } 302 | else if (propertyName === 'max') { 303 | that.setAttribute('aria-valuemax', newValue); 304 | } 305 | else if (propertyName === 'orientation') { 306 | that.setAttribute('aria-orientation', newValue); 307 | } 308 | 309 | break; 310 | } 311 | case 'value': 312 | that._updateValue(oldValue, newValue); 313 | break; 314 | default: { 315 | that._layout(); 316 | } 317 | } 318 | } 319 | 320 | render() { 321 | const that = this; 322 | 323 | that.setAttribute('role', 'scrollbar'); 324 | that.setAttribute('aria-orientation', that.orientation); 325 | that.setAttribute('aria-valuemin', that.min); 326 | that.setAttribute('aria-valuemax', that.max); 327 | that.setAttribute('aria-valuenow', that.value); 328 | 329 | that._layout(); 330 | 331 | super.render(); 332 | } 333 | 334 | _resizeHandler() { 335 | const that = this; 336 | 337 | that._layout(); 338 | } 339 | 340 | refresh() { 341 | const that = this; 342 | 343 | that._layout(); 344 | } 345 | 346 | _layout() { 347 | const that = this; 348 | 349 | that.scrollBarSize = that.orientation === 'horizontal' ? that.$.track.offsetWidth : that.$.track.offsetHeight; 350 | that.thumbSize = that._calculateThumbSize(that.scrollBarSize); 351 | 352 | if (that.orientation === 'horizontal' && (that.$.thumb.style.width !== that.thumbSize + 'px')) { 353 | that.$.thumb.style.width = that.thumbSize + 'px'; 354 | } 355 | else if (that.orientation === 'vertical' && (that.$.thumb.style.height !== that.thumbSize + 'px')) { 356 | that.$.thumb.style.height = that.thumbSize + 'px'; 357 | } 358 | 359 | if (that.orientation === 'horizontal') { 360 | if (that.$.nearButton.classList.contains('smart-arrow-up')) { 361 | that.$.nearButton.classList.remove('smart-arrow-up'); 362 | } 363 | 364 | if (that.$.farButton.classList.contains('smart-arrow-down')) { 365 | that.$.farButton.classList.remove('smart-arrow-down'); 366 | } 367 | 368 | if (!that.$.nearButton.classList.contains('smart-arrow-left')) { 369 | that.$.nearButton.classList.add('smart-arrow-left'); 370 | } 371 | 372 | if (!that.$.farButton.classList.contains('smart-arrow-right')) { 373 | that.$.farButton.classList.add('smart-arrow-right'); 374 | } 375 | } 376 | else { 377 | if (that.$.nearButton.classList.contains('smart-arrow-left')) { 378 | that.$.nearButton.classList.remove('smart-arrow-left'); 379 | } 380 | 381 | if (that.$.farButton.classList.contains('smart-arrow-right')) { 382 | that.$.farButton.classList.remove('smart-arrow-right'); 383 | } 384 | 385 | if (!that.$.nearButton.classList.contains('smart-arrow-up')) { 386 | that.$.nearButton.classList.add('smart-arrow-up'); 387 | } 388 | 389 | if (!that.$.farButton.classList.contains('smart-arrow-down')) { 390 | that.$.farButton.classList.add('smart-arrow-down'); 391 | } 392 | } 393 | 394 | 395 | that._updateThumbPosition(); 396 | 397 | if (that.value > that.max || that.value < that.min) { 398 | that._updateValue(that.value, that.value > that.max ? that.max : that.min); 399 | } 400 | } 401 | 402 | _selectStartHandler(event) { 403 | const that = this; 404 | 405 | if (that.thumbCapture) { 406 | event.preventDefault(); 407 | } 408 | } 409 | 410 | _trackDownHandler(event) { 411 | const that = this; 412 | 413 | if (event.target !== that.$.track) { 414 | return; 415 | } 416 | 417 | if (that._trackDownTimer) { 418 | clearInterval(that._trackDownTimer); 419 | } 420 | 421 | if (that.thumbCapture) { 422 | return; 423 | } 424 | 425 | that._trackDownTimer = setInterval(function () { 426 | that._trackClickHandler(event); 427 | }, that.clickRepeatDelay); 428 | 429 | event.stopPropagation(); 430 | event.preventDefault(); 431 | } 432 | 433 | _trackClickHandler(event) { 434 | const that = this; 435 | 436 | if (that.disabled) { 437 | return; 438 | } 439 | 440 | if (that._isThumbDragged) { 441 | clearInterval(that._trackDownTimer); 442 | that._trackDownTimer = null; 443 | return; 444 | } 445 | 446 | const thumbRect = that.$.thumb.getBoundingClientRect(); 447 | const x = event.pageX - window.pageXOffset; 448 | const y = event.pageY - window.pageYOffset; 449 | 450 | const value = (that.rightToLeft ? -1 : 1) * that.value; 451 | 452 | if (that.orientation === 'horizontal') { 453 | if (x > (that._isThumbDragged ? that.dragStartX : thumbRect.right)) { 454 | that._updateValue(that.value + (that.rightToLeft ? -1 : 1) * that.largeStep); 455 | } 456 | else if (x < (that._isThumbDragged ? that.dragStartX : thumbRect.left)) { 457 | that._updateValue(that.value - (that.rightToLeft ? -1 : 1) * that.largeStep); 458 | } 459 | } 460 | else { 461 | if (y > (that._isThumbDragged ? that.dragStartY : thumbRect.bottom)) { 462 | that._updateValue(that.value + that.largeStep); 463 | } 464 | else if (y < (that._isThumbDragged ? that.dragStartY : thumbRect.top)) { 465 | that._updateValue(that.value - that.largeStep); 466 | } 467 | } 468 | 469 | if (that.mechanicalAction === 'switchUntilReleased') { 470 | that._updateValue(value); 471 | } 472 | } 473 | 474 | /** 475 | * iOS Fix for the lack of support for 'touch-action: none' 476 | */ 477 | _trackMoveHandler(event) { 478 | if (event.originalEvent.type === 'touchmove') { 479 | event.originalEvent.preventDefault(); 480 | } 481 | } 482 | 483 | _updateValue(oldValue, newValue) { 484 | const that = this; 485 | 486 | if (arguments.length === 1) { 487 | newValue = oldValue; 488 | oldValue = that.value; 489 | } 490 | 491 | if (newValue === undefined || isNaN(newValue)) { 492 | newValue = that.min; 493 | } 494 | 495 | if (newValue > that.max) { 496 | newValue = that.max; 497 | } 498 | 499 | if (newValue < that.min) { 500 | newValue = that.min; 501 | } 502 | 503 | that.value = newValue; 504 | 505 | if (oldValue !== newValue) { 506 | that.setAttribute('aria-valuenow', newValue); 507 | 508 | that._updateThumbPosition(); 509 | 510 | if (that.thumbCapture && that.mechanicalAction === 'switchWhenReleased') { 511 | return; 512 | } 513 | 514 | if (that.onChange) { 515 | that.onChange({ 'value': that.value, 'oldValue': oldValue, min: that.min, max: that.max }); 516 | return; 517 | } 518 | 519 | that.$.fireEvent('change', { 'value': that.value, 'oldValue': oldValue, min: that.min, max: that.max }); 520 | } 521 | } 522 | 523 | _updateThumbPosition() { 524 | const that = this; 525 | 526 | const height = that.$.track.offsetHeight; 527 | const width = that.$.track.offsetWidth; 528 | 529 | const scrollBarSize = (that.orientation === 'horizontal') ? width : height; 530 | const thumbSize = that._calculateThumbSize(scrollBarSize); 531 | const maxThumbPosition = (that.orientation === 'horizontal') ? width - thumbSize : height - thumbSize; 532 | 533 | let thumbPosition = (scrollBarSize - thumbSize) / (that.max - that.min) * (that.value - that.min); 534 | 535 | if (that.rightToLeft && that.orientation === 'horizontal') { 536 | thumbPosition = (scrollBarSize - thumbSize) / (that.max - that.min) * (that.max - that.value - that.min); 537 | } 538 | 539 | thumbPosition = Math.min(maxThumbPosition, Math.max(0, thumbPosition)); 540 | 541 | if (that.orientation === 'vertical' && (that.$.thumb.style.top !== thumbPosition + 'px')) { 542 | that.$.thumb.style.top = thumbPosition + 'px'; 543 | } 544 | else if (that.orientation === 'horizontal' && (that.$.thumb.style.left !== thumbPosition + 'px')) { 545 | that.$.thumb.style.left = thumbPosition + 'px'; 546 | } 547 | } 548 | }); 549 | 550 | 551 | -------------------------------------------------------------------------------- /table-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/table-component.png -------------------------------------------------------------------------------- /table-edit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/table-edit.png -------------------------------------------------------------------------------- /table-filter-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/table-filter-row.png -------------------------------------------------------------------------------- /table-filter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/table-filter.png -------------------------------------------------------------------------------- /table-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/table-group.png -------------------------------------------------------------------------------- /tables.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/tables.png -------------------------------------------------------------------------------- /tree-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HTMLElements/smart-table/72720900b59a80a1365c747505bbbd98dcb355ba/tree-table.png --------------------------------------------------------------------------------