├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── bower.json ├── demo ├── .bowerrc ├── .gitignore ├── .jshintrc ├── app │ ├── 404.html │ ├── README.md │ ├── bundle.js │ ├── components │ │ ├── _components.js │ │ ├── animation │ │ │ ├── pageTransitions.scss │ │ │ └── progressSpinner.js │ │ ├── data │ │ │ ├── formData.html │ │ │ └── formData.js │ │ ├── docsModal │ │ │ ├── docsModal.html │ │ │ ├── docsModal.js │ │ │ └── docsModal.scss │ │ ├── jsonFields │ │ │ ├── jsonFields.html │ │ │ ├── jsonFields.js │ │ │ ├── jsonFields.scss │ │ │ ├── prettify.filter.js │ │ │ └── prettify.scss │ │ ├── markdown │ │ │ ├── contents.html │ │ │ ├── contents.js │ │ │ └── contents.scss │ │ ├── mdi │ │ │ ├── .bower.json │ │ │ ├── bower.json │ │ │ ├── css │ │ │ │ ├── materialdesignicons.css │ │ │ │ ├── materialdesignicons.css.map │ │ │ │ ├── materialdesignicons.min.css │ │ │ │ └── materialdesignicons.min.css.map │ │ │ ├── fonts │ │ │ │ ├── materialdesignicons-webfont.eot │ │ │ │ ├── materialdesignicons-webfont.svg │ │ │ │ ├── materialdesignicons-webfont.ttf │ │ │ │ ├── materialdesignicons-webfont.woff │ │ │ │ └── materialdesignicons-webfont.woff2 │ │ │ ├── license.txt │ │ │ ├── package.json │ │ │ ├── preview.html │ │ │ └── scss │ │ │ │ ├── _core.scss │ │ │ │ ├── _icons.scss │ │ │ │ ├── _path.scss │ │ │ │ ├── _variables.scss │ │ │ │ └── materialdesignicons.scss │ │ └── pageStyles │ │ │ ├── container.html │ │ │ ├── container.js │ │ │ ├── divider.js │ │ │ └── divider.scss │ ├── core │ │ ├── layout.js │ │ ├── nav │ │ │ ├── nav.ctrl.js │ │ │ ├── nav.html │ │ │ ├── nav.js │ │ │ └── nav.scss │ │ ├── navMenu.json │ │ ├── sidebar │ │ │ ├── sidebar.html │ │ │ ├── sidebar.js │ │ │ └── sidebar.service.js │ │ └── sidebarMenu.json │ ├── docs │ │ ├── checkbox.md │ │ ├── datePicker.md │ │ ├── error.md │ │ ├── flex.md │ │ ├── inline.md │ │ ├── input.md │ │ ├── notes │ │ │ ├── errorDescription.md │ │ │ ├── flexDescription.md │ │ │ ├── flexNotes.md │ │ │ ├── modelOptionsDescription.md │ │ │ ├── ngModelAttrsDescription.md │ │ │ ├── selectNotes.md │ │ │ └── themeDescription.md │ │ ├── radio.md │ │ ├── select.md │ │ ├── switch.md │ │ ├── textarea.md │ │ └── themes.md │ ├── favicon.ico │ ├── fields │ │ ├── _fields.module.js │ │ ├── advanced │ │ │ ├── _advanced.js │ │ │ ├── file-input.html │ │ │ ├── fileInput.js │ │ │ └── googlePlaces.js │ │ ├── checkbox.js │ │ ├── controllerLink.js │ │ ├── datePicker.js │ │ ├── dropdown.js │ │ ├── error.js │ │ ├── expression.js │ │ ├── flex.js │ │ ├── inline.js │ │ ├── input.js │ │ ├── modelOptions.js │ │ ├── ngModelAttrs.js │ │ ├── radio.js │ │ ├── select.js │ │ ├── switch.js │ │ ├── test.js │ │ ├── themes.js │ │ ├── validators.js │ │ └── watcher.js │ ├── images │ │ └── angular-formly.png │ ├── index.html │ ├── index.js │ ├── index.scss │ ├── main │ │ ├── main.ctrl.js │ │ ├── main.html │ │ ├── main.js │ │ └── main.scss │ ├── res │ │ └── materialdesignicons-webfont.eot │ └── vendor.js ├── bower.json ├── package.json └── webpack.config.js ├── dist ├── formlyLumx.css └── formlyLumx.js ├── docs ├── checkbox.md ├── datePicker.md ├── error.md ├── flex.md ├── inline.md ├── input.md ├── radio.md ├── select.md ├── switch.md ├── textarea.md └── themes.md ├── package.json ├── src ├── fields │ ├── lx-checkbox.html │ ├── lx-date-picker.html │ ├── lx-dropdown.html │ ├── lx-flex.html │ ├── lx-input.html │ ├── lx-radio.html │ ├── lx-select.html │ ├── lx-switch.html │ └── lx-textarea.html ├── index.js └── wrappers │ ├── lx-wrapper-div.html │ ├── lx-wrapper-errors.html │ ├── lx-wrapper-flex.html │ └── lx-wrapper-inline.html └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | npm-debug.log 4 | bower_components/ 5 | node_modules/ 6 | demoOld/ 7 | edits/ 8 | gulpfile.js 9 | demo/node_modules 10 | demo/e2e 11 | demo/app/bower_components 12 | demo/Procfile 13 | demo/server 14 | demo/.editorconfig 15 | demo/.idea 16 | demo2/ 17 | projectFilesBackup/ 18 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | #2.0.4 2 | - working version with new ApiCheck 3 | 4 | #2.0.3 5 | - updated to work with latest version of Angular-Formly (7.1.2) 6 | 7 | #1.5.2 8 | - inline radio buttons 9 | 10 | #1.5.1 11 | - formlyLumx.js re-written in webpack 12 | - you can now more easily edit and customize your own templates. Compile them by running "webpack" in the console. 13 | 14 | #1.4.0 15 | - demo re-written using ES6 & Webpack 16 | - updated advanced form layouts 17 | - new: `lx-wrapper-inline` for inline styles. 18 | 19 | ## Breaking Changes 20 | - rewritten `lx-flex` to handle previous functionality. 21 | - `lx-wrapper-flex` no longer necessary for most cases. Just set the default flex in the `lx-flex` parent 22 | 23 | #1.3.3 24 | - less strict bower dependencies 25 | 26 | #1.3.2 27 | - allow simpler `lx-select` templates. For example: `options: ['a', 'b']` 28 | - files in `dist` folder. Shortened titles to `formlyLumx`. 29 | - removed `lx-title`. Use `template:

Some Title


` or other custom titles instead. 30 | 31 | #1.2.2 32 | #Features 33 | - Improved accessibility with ngAria 34 | 35 | #Fixes 36 | - Dependency issue with apiCheck 37 | 38 | #1.2.0 39 | ##Features 40 | - set default `VALIDATION_MESSAGES` in the module file easily. For example: 41 | ```javascript 42 | /* angular-formly-templates-lumx.js */ 43 | var VALIDATION_MESSAGES = [{ 44 | name: 'required', 45 | message: 'Aren\'t you forgetting something?' 46 | }]; 47 | ``` 48 | - added template validation using [apiCheck.js](https://github.com/kentcdodds/apiCheck.js). Read more about validateOptions [here](https://github.com/formly-js/angular-formly#validateoptions-function). 49 | In other words, if you put invalid data into the template, you get a warning in the console. 50 | - set `USING_TEMPLATE_VALIDATION` to `false` in the src/modules/angular-formly-tempaltes-lumx.js file to skip validation. You may want to do this for deployment. 51 | - updated to `angular-formly@4.0` 52 | 53 | ##Breaking Changes 54 | - No more validation.messages as an array. This parallels a more dynamic way of doing validation.messages in angular-formly. 55 | ```javascript 56 | /* Old */ 57 | validation: { 58 | messages: [{name: 'required', message: 'This field is required.'}] 59 | } 60 | /* New */ 61 | validation: { 62 | required: function(viewValue, modelValue, scope) { 63 | return scope.to.label + ' is required'; 64 | } 65 | } 66 | ``` 67 | - Validators have changed. See the examples in the demo, or view a [validators example](http://formly-js.github.io/angular-formly/#/example/advanced/validators) from the angular-formly docs 68 | 69 | 70 | #1.1.2 71 | - module config/run updated to work with angular-formly@3.2+ 72 | - take advantage of [extends](https://github.com/formly-js/angular-formly#extends-string) 73 | 74 | #1.1.1 75 | - `lx-wrapper-errors` bugfix 76 | - `lx-dropdown` added 77 | - styles fixes 78 | 79 | #1.1.0 80 | - added `styles/angular-formly-templates-lumx.css` for spacing and error styles 81 | - updates for new version of lumx 82 | - `lx-input` now can use `icons` 83 | 84 | #1.0.15 85 | - dropped one-way bindings on `label`s, can now be dynamic 86 | - reduced template/config size with `angular-formly@3.1.5` updates 87 | 88 | #1.0.14 89 | - added `pending` to `lx-wrapper-errors` for use with async validators. See demo for an example. 90 | - `lx-input` `disabled` and `validators` improved 91 | 92 | #1.0.13 93 | - flexbox grid working. 94 | - flexbox still requires style fixes for `lx-select` with flexbox. See example in demo. 95 | 96 | #1.0.10 97 | - errors now handled by new `validation.messages` pipeline in `angular-formly@3.0.9`. See examples in demo under "Errors" 98 | ##Breaking Changes (less of these in the near future!) 99 | - dropped `templateOptions.errors` in `lx-wrapper-errors` 100 | 101 | #1.0.9 102 | - `aria-describedby` & `description` added dynamically with templateManipulators 103 | ##Breaking Changes 104 | - all `help` attributes changed to `description` 105 | 106 | #1.0.7 107 | ##Features 108 | - dynamic error handling with `lx-wrapper-errors` 109 | - fixed issue with wrappers 110 | 111 | #1.0.6 112 | ##Breaking Changes 113 | - removed `lx-subhead` renamed `lx-title` 114 | - `lx-select-multiple` dropped. Now add `templateOptions.multiple: true` to `lx-select` 115 | - `lx-text-field` more accurately renamed `lx-input` 116 | 117 | ##Inner Changes 118 | - template shrunken 119 | 120 | #1.0.0 121 | 122 | ## Breaking Changes 123 | - module name changed from `formly.lumx` to `formlyLumx`. 124 | - new dependency: `angular-formly@3.0.*` 125 | - `` attribute `result` changed to `model`. See example below: 126 | 127 | ```html 128 | 129 | ``` 130 | 131 | - `lx-radio-buttons` shortened to `lx-radio` 132 | - `class` properties renamed `className` to avoid need for quotes 133 | - file structure changed: './src/modules/*' 134 | - demo added './demo/app' 135 | - all template related form-fields put into [templateOptions](https://github.com/formly-js/angular-formly#templateoptions-). See the example below: 136 | 137 | ```javascript 138 | { 139 | 'key': 'someKey', 140 | 'templateOptions': { 141 | 'type': 'text', // html input type values [text, email, password, url, number] 142 | 'label': 'Some Label', // acts as a placeholder & label 143 | 'fixedLabel': false, // [default = false (float label), true = fixed label] 144 | /* all template related fields here */ 145 | }, 146 | validators: {}, 147 | modelOptions: {} 148 | } 149 | ``` 150 | 151 | ## Features 152 | - new [site with improved docs](https://github.com/formly-js/angular-formly-templates-lumx) 153 | - docs folder added './docs' 154 | - see [changes to angular-formly](https://github.com/formly-js/angular-formly/blob/master/CHANGELOG.md) 155 | - add ng-directives using `bound` on [ngModelAttrs](https://github.com/formly-js/angular-formly#ngmodelattrs-object) 156 | - other directives can be added to templates using `unbound` on ngModelAttrs 157 | - ngModelAttrs can be manipulated using `expressionProperties`. See example below: 158 | 159 | ```javascript 160 | { 161 | 'key': 'item1', 162 | 'type': 'lx-checkbox', 163 | 'tempateOptions': { 164 | 'value': false 165 | } 166 | }, 167 | { 168 | 'key': 'item2', 169 | 'type': 'lx-input', 170 | 'ngModelAttrs': { 171 | 'bound': { 172 | /* adds ng-directive to field input */ 173 | 'ng-pattern': /[A-Za-z]/, 174 | 'ng-disabled': false, 175 | 'maxlength': 10, 176 | 'ng-required': true 177 | }, 178 | 'unbound': { 179 | /* add other/custom directives here */ 180 | } 181 | }, 182 | expressionProperties: { 183 | 'ngModelAttrs.bound['ng-disabled']: 'model.item1' 184 | } 185 | } 186 | ``` 187 | 188 | ## Inner changes 189 | - Gulpfile to easily generate templates from fields 190 | - Many ng-directives removed from templates in favor of ngModelAttrs 191 | - Some custom select attributes removed 192 | - `aria-labeledby` changed to `aria-describedby` 193 | - `ngModel[options.key || $index]` simplified to `ngModel[options.key]` 194 | - `formly-dynamic-name` dropped 195 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Questions/Help 4 | 5 | Please join the Angular Formly [mailing list](https://groups.io/org/groupsio/formly-js) and ask/answer questions about how to 6 | use Angular Formly or Formly-Lumx there. Also join us on [gitter](https://gitter.im/formly-js/angular-formly-template-lumx). 7 | 8 | ## Issues 9 | 10 | If you've found an issue, please submit it in [the issues](https://github.com/formly-js/angular-formly-templates-lumx/issues) 11 | with a link to a Plunker that demonstrates the issue (clone [this template](http://plnkr.co/edit/9ITRera58qzCaaaXsKT0)) 12 | 13 | ## Pull Requests 14 | 15 | If you would like to add functionality, please submit [an issue](https://github.com/formly-js/angular-formly-templates-lumx/issues) 16 | first to make sure it's a direction we want to take. 17 | 18 | When submitting a Pull Request please submit it to the `master` branch. -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) {{{year}}} {{{fullname}}} 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | FormlyLumx 2 | ========== 3 | 4 | [![Join the chat at https://gitter.im/formly-js/angular-formly-templates-lumx](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/formly-js/angular-formly-templates-lumx?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 5 | 6 | LumX Templates for Angular-Formly. Modern & flexible forms configured easily in a JSON object. 7 | 8 | - View [demo](https://af-lumx.herokuapp.com/ "Formly-Lumx Demo"). 9 | - See the [docs](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs "Formly-Lumx Documentation") for template APIs. 10 | - See the [changelog](https://github.com/formly-js/angular-formly-templates-lumx/blob/master/CHANGELOG.md "Formly-LumX Changes") for details. 11 | - See [guidelines](https://github.com/formly-js/angular-formly-templates-lumx/blob/master/CONTRIBUTING.md "Formly-Lumx Contributing") about contributing or posting an issue 12 | 13 | 14 | # Setup 15 | 16 | ## Bower 17 | 18 | `bower install angular angular-formly lumx angular-messages angular-aria angular-formly-templates-lumx` 19 | 20 | ## Dependencies 21 | 22 | 1. Angular (@1.3+) 23 | 2. [Angular-Formly](https://github.com/formly-js/angular-formly "Angular-Formly") (@7.1) 24 | 3. [LumX Framework](http://ui.lumapps.com/ "LumX Framework") (@0.3+) 25 | 4. [ngMessages](https://docs.angularjs.org/api/ngMessages/directive/ngMessages "ngMessages Docs") (@1.3+) 26 | 27 | ## Getting Started 28 | 29 | 1. Install dependencies (for example, with Bower (see Bower above) 30 | 2. Add the following dependencies to your Angular module: 31 | 32 | ```javascript 33 | angular.module('myAppName', [ 34 | 'ngMessages', 35 | 'ngAria', 36 | 'formly', 37 | 'lumx', 38 | 'formlyLumx' 39 | ]) 40 | ``` 41 | 42 | It's also recommended to add a link to `./styles/angular-formly-templates-lumx.css`. 43 | 44 | ## Demo 45 | Run the demo locally or view it on the [site](https://formly-lumx.herokuapp.com/ "Angular-Formly-Lumx Demo"). 46 | - clone this github repo 47 | - go into the demo directory `cd demo` 48 | - download packages `bower install && npm install` 49 | - run Webpack `npm start`. On windows: `npm-start-win` 50 | 51 | ## View 52 | 53 | Not much necessary. The form just requires the `` directive tag. For example: 54 | 55 | #####Basic Setup 56 | ```html 57 | 58 | 59 | ``` 60 | 61 | #####With Submit & Options 62 | ```html 63 | 64 |
65 | 66 | 67 | ``` 68 | 69 | ## Controller 70 | 71 | Add your formData & formFields onto a controller. 72 | 73 | ```javascript 74 | angular.module('myAppName').controller('FormCtrl', FormCtrl); 75 | function FormCtrl ($scope) { 76 | $scope.formData = {}; // the data object 77 | $scope.formOptions = {}; // optional form parameters 78 | $scope.formFields = [{ // an array holding all form fields 79 | key: 'email', // ng-model name, saved in formData 80 | type: 'lx-input', // field 81 | templateOptions: { // in this case: 'lx-input' options 82 | type: 'email' 83 | label: 'Email' 84 | } 85 | }]; 86 | } 87 | ``` 88 | 89 | # Components 90 | 91 | ## Fields 92 | 93 | Basic form elements. 94 | 95 | - [lx-input](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/input.md) (text | email | password | number | url) 96 | - [lx-textarea](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/textarea.md) 97 | - [lx-switch](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/switch.md) 98 | - [lx-checkbox](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/checkbox.md) 99 | - [lx-radio](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/radio.md) 100 | - [lx-date-picker](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/datePicker.md) 101 | - [lx-select](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/select.md) 102 | - [lx-flex](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/flex.md) 103 | 104 | ## Wrappers 105 | 106 | Wrap around the form field to add additional functionality. See the [Angular-formly docs on wrappers](https://github.com/formly-js/angular-formly#wrapper-stringarray-of-strings "Wrappers"). 107 | 108 | ### Error Handling 109 | Use ngMessages to dynamically add an array of error messages. 110 | ```javascript 111 | $scope.formFields = { 112 | validation: { 113 | messages: [{ 114 | name: 'required', 115 | message: 'This field is required.' 116 | }] 117 | } 118 | }; 119 | ``` 120 | 121 | Read more about [lx-wrapper-errors](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/errors.md) 122 | 123 | 124 | ### Flex-Box Grids 125 | Use containers & flex-box to arrange your form fields into flexible rows & columns. 126 | See docs on [lx-flex & lx-wrapper-flex-item](https://github.com/formly-js/angular-formly-templates-lumx/tree/master/docs/flex.md). 127 | 128 | # Example: Email & Password 129 | 130 | Create form fields by attaching a JSON-like object in the controller. 131 | 132 | ```javascript 133 | $scope.formFields= [{ 134 | key: 'email', // { 135 | type: 'lx-input', 136 | wrapper: 'lx-wrapper-errors', // error handling with ngMessages 137 | templateOptions: { 138 | type: 'email', // input type: [email | password | text | url | number] 139 | label: 'Email', 140 | required: true 141 | }, 142 | validation: { 143 | messages: { 144 | email: function (viewValue, modelValue, scope) { 145 | return 'That doesn\'t look like a valid email.' 146 | } 147 | } 148 | } 149 | },{ 150 | key: 'password', 151 | type: 'lx-input', 152 | wrapper: 'lx-wrapper-errors', 153 | templateOptions: { 154 | type: 'password', 155 | label: 'Password', 156 | minlength: 4, 157 | maxlength: 16, 158 | required: true 159 | }, 160 | ngModelAttrs: { 161 | minlength: { 162 | bound: 'ng-minlength', 163 | attribute: 'minlength' 164 | }, 165 | maxlength: { 166 | bound: 'ng-maxlength', 167 | attribute: 'maxlength' 168 | } 169 | }, 170 | modelOptions: { 171 | allowInvalid: true, 172 | updateOn: 'default blur keydown', 173 | debounce: { 174 | keydown: 0, 175 | default: 0, 176 | blur: 0 177 | } 178 | } 179 | } 180 | ``` 181 | 182 | ## ApiCheck Validation (new with 1.2) 183 | Formly will now warn you in the console if you enter invalid data into your field options. 184 | Read more about [apiCheck](https://github.com/kentcdodds/apiCheck.js). 185 | 186 | ## Validation Message Defaults (new with 1.2) 187 | Validation messages can be set as defaults in the module file. 188 | 189 | ```javascript 190 | var VALIDATION_MESSAGES = [{ 191 | name: 'required', 192 | message: 'This field is required' 193 | } 194 | ``` 195 | 196 | ## Change / Generate your own templates 197 | 198 | 1. Add or change your file in `src/fields`. 199 | 2. Create a configuration in `src/index.js`. For example: 200 | 201 | 202 | { 203 | name: 'checkbox', 204 | template: require('./fields/lx-checkbox.html'), 205 | apiCheck: function(check) { 206 | return { 207 | templateOptions: { 208 | label: check.string, 209 | description: check.string, 210 | checked: check.boolean, 211 | required: check.boolean 212 | } 213 | }; 214 | } 215 | } 216 | 217 | 3. Compile templates into `/dist`. In the console, in the folder run `npm install` to setup and `webpack` to build. 218 | 219 | ##Roadmap 220 | - more advanced examples 221 | - e2e tests 222 | - Requests (?). Post an issue. 223 | 224 | 225 | ## Known Issues 226 | 227 | LumX has a conflict with a similarly complete framework, Bootstrap, resulting in errors for dropdowns including "lx-select" & "lx-multiple-select". Solution: choose one css framework or the other. 228 | 229 | ## Post an Issue 230 | 231 | Link to this [Plunker](http://plnkr.co/edit/9ITRera58qzCaaaXsKT0). 232 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-formly-templates-lumx", 3 | "version": "2.0.5", 4 | "authors": [ 5 | "ShMcK " 6 | ], 7 | "description": "Angular-Formly templates based on the LumX Framework", 8 | "main": [ 9 | "./dist/formlyLumx.js", 10 | "./dist/formlyLumx.css" 11 | ], 12 | "keywords": [ 13 | "angular-formly", 14 | "angular-formly-templates", 15 | "lumx" 16 | ], 17 | "license": "MIT", 18 | "homepage": "https://github.com/formly-js/angular-formly-templates-lumx", 19 | "ignore": [ 20 | "**/.*", 21 | ".idea", 22 | ".gitignore", 23 | "node_modules", 24 | "bower_components", 25 | "test", 26 | "tests", 27 | "edits", 28 | "demo", 29 | "demo-es6", 30 | "todo.txt" 31 | ], 32 | "dependencies": { 33 | "angular": "^1.3.16", 34 | "angular-messages": "^1.3.16", 35 | "angular-aria": "^1.3.16", 36 | "angular-formly": "^7.1.2", 37 | "lumx": "^0.3.35" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /demo/.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "app/bower_components" 3 | } 4 | -------------------------------------------------------------------------------- /demo/.gitignore: -------------------------------------------------------------------------------- 1 | .editorconfig 2 | node_modules 3 | app/bower_components 4 | npm-debug.log 5 | .tmp 6 | .idea 7 | server 8 | -------------------------------------------------------------------------------- /demo/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "devel": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": false, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "white": true, 22 | "validthis": true, 23 | "globals": { 24 | "angular": true, 25 | // Angular Mocks 26 | "inject": false, 27 | // JASMINE 28 | "describe": false, 29 | "it": false, 30 | "before": false, 31 | "beforeEach": false, 32 | "after": false, 33 | "afterEach": false, 34 | "expect": false 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /demo/app/404.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Page Not Found :( 6 | 141 | 142 | 143 |
144 |

Not found :(

145 |

Sorry, but the page you were trying to view does not exist.

146 |

It looks like this was the result of either:

147 |
    148 |
  • a mistyped address
    • 149 |
  • an out-of-date link
    • 150 |
151 | 154 | 155 |
156 | 157 | 158 | -------------------------------------------------------------------------------- /demo/app/README.md: -------------------------------------------------------------------------------- 1 | # Run Demo App 2 | 3 | bower install && npm install 4 | 5 | npm start 6 | 7 | 8 | -------------------------------------------------------------------------------- /demo/app/bundle.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ exports: {}, 15 | /******/ id: moduleId, 16 | /******/ loaded: false 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.loaded = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // __webpack_public_path__ 37 | /******/ __webpack_require__.p = ""; 38 | /******/ 39 | /******/ // Load entry module and return exports 40 | /******/ return __webpack_require__(0); 41 | /******/ }) 42 | /************************************************************************/ 43 | /******/ ([ 44 | /* 0 */ 45 | /***/ function(module, exports, __webpack_require__) { 46 | 47 | (function webpackMissingModule() { throw new Error("Cannot find module \"bourbon-sass!./index.js\""); }()); 48 | (function webpackMissingModule() { throw new Error("Cannot find module \"start\""); }()); 49 | 50 | 51 | /***/ } 52 | /******/ ]); 53 | //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAgMWEzYjVkZjQwOGVlNDFjNjkxYmMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBLHVCQUFlO0FBQ2Y7QUFDQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7OztBQUdBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0EiLCJmaWxlIjoiYnVuZGxlLmpzIiwic291cmNlc0NvbnRlbnQiOlsiIFx0Ly8gVGhlIG1vZHVsZSBjYWNoZVxuIFx0dmFyIGluc3RhbGxlZE1vZHVsZXMgPSB7fTtcblxuIFx0Ly8gVGhlIHJlcXVpcmUgZnVuY3Rpb25cbiBcdGZ1bmN0aW9uIF9fd2VicGFja19yZXF1aXJlX18obW9kdWxlSWQpIHtcblxuIFx0XHQvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGVcbiBcdFx0aWYoaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0pXG4gXHRcdFx0cmV0dXJuIGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdLmV4cG9ydHM7XG5cbiBcdFx0Ly8gQ3JlYXRlIGEgbmV3IG1vZHVsZSAoYW5kIHB1dCBpdCBpbnRvIHRoZSBjYWNoZSlcbiBcdFx0dmFyIG1vZHVsZSA9IGluc3RhbGxlZE1vZHVsZXNbbW9kdWxlSWRdID0ge1xuIFx0XHRcdGV4cG9ydHM6IHt9LFxuIFx0XHRcdGlkOiBtb2R1bGVJZCxcbiBcdFx0XHRsb2FkZWQ6IGZhbHNlXG4gXHRcdH07XG5cbiBcdFx0Ly8gRXhlY3V0ZSB0aGUgbW9kdWxlIGZ1bmN0aW9uXG4gXHRcdG1vZHVsZXNbbW9kdWxlSWRdLmNhbGwobW9kdWxlLmV4cG9ydHMsIG1vZHVsZSwgbW9kdWxlLmV4cG9ydHMsIF9fd2VicGFja19yZXF1aXJlX18pO1xuXG4gXHRcdC8vIEZsYWcgdGhlIG1vZHVsZSBhcyBsb2FkZWRcbiBcdFx0bW9kdWxlLmxvYWRlZCA9IHRydWU7XG5cbiBcdFx0Ly8gUmV0dXJuIHRoZSBleHBvcnRzIG9mIHRoZSBtb2R1bGVcbiBcdFx0cmV0dXJuIG1vZHVsZS5leHBvcnRzO1xuIFx0fVxuXG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlcyBvYmplY3QgKF9fd2VicGFja19tb2R1bGVzX18pXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm0gPSBtb2R1bGVzO1xuXG4gXHQvLyBleHBvc2UgdGhlIG1vZHVsZSBjYWNoZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5jID0gaW5zdGFsbGVkTW9kdWxlcztcblxuIFx0Ly8gX193ZWJwYWNrX3B1YmxpY19wYXRoX19cbiBcdF9fd2VicGFja19yZXF1aXJlX18ucCA9IFwiXCI7XG5cbiBcdC8vIExvYWQgZW50cnkgbW9kdWxlIGFuZCByZXR1cm4gZXhwb3J0c1xuIFx0cmV0dXJuIF9fd2VicGFja19yZXF1aXJlX18oMCk7XG5cblxuXG4vKiogV0VCUEFDSyBGT09URVIgKipcbiAqKiB3ZWJwYWNrL2Jvb3RzdHJhcCAxYTNiNWRmNDA4ZWU0MWM2OTFiY1xuICoqLyJdLCJzb3VyY2VSb290IjoiIn0= -------------------------------------------------------------------------------- /demo/app/components/_components.js: -------------------------------------------------------------------------------- 1 | export default angular.module('app.components', []) 2 | .directive('shmckProgressSpinner', require('./animation/progressSpinner')) 3 | .directive('shmckFormData', require('./data/formData')) 4 | .directive('shmckDocsModal', require('./docsModal/docsModal')) 5 | .directive('shmckJsonFields', require('./jsonFields/jsonFields')) 6 | .directive('shmckContents', require('./markdown/contents')) 7 | .directive('shmckContainer', require('./pageStyles/container')) 8 | .directive('shmckDivider', require('./pageStyles/divider')) 9 | .filter('prettify', require('./jsonFields/prettify.filter')); 10 | -------------------------------------------------------------------------------- /demo/app/components/animation/pageTransitions.scss: -------------------------------------------------------------------------------- 1 | /* page transitions */ 2 | .form-view.ng-enter { 3 | -webkit-animation: fadeIn 0.7s both ease; 4 | -moz-animation: fadeIn 0.7s both ease; 5 | animation: fadeIn 0.7s both ease; 6 | } 7 | .form-view.ng-leave { 8 | -webkit-animation: fadeOut 0.3s both ease; 9 | -moz-animation: fadeOut 0.3s both ease; 10 | animation: fadeOut 0.3s both ease; 11 | } 12 | 13 | /* ANIMATIONS 14 | ============================================================================= */ 15 | /* slide out to the left */ 16 | @keyframes fadeIn { 17 | 0% { 18 | opacity: 0; 19 | } 20 | 100% { 21 | opacity: 1; 22 | } 23 | } 24 | 25 | @keyframes fadeOut { 26 | 0% { 27 | opacity: 1; 28 | } 29 | 100% { 30 | opacity: 0; 31 | } 32 | } 33 | 34 | @keyframes dropDown { 35 | 0% { 36 | opacity: 1; 37 | top: 0; 38 | height: 30px; 39 | } 40 | 100% { 41 | opacity: 0; 42 | top: -50px; 43 | height: 0; 44 | } 45 | } 46 | 47 | @keyframes dropUp { 48 | 0% { 49 | opacity: 0; 50 | top: -50px; 51 | height: 0; 52 | } 53 | 100% { 54 | opacity: 1; 55 | top: 0; 56 | height: 30px; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /demo/app/components/animation/progressSpinner.js: -------------------------------------------------------------------------------- 1 | class ProgressSpinnerCtrl { 2 | constructor(LxProgressService, $timeout, $scope) { 3 | LxProgressService.circular.show('#5fa2db', '#progress'); 4 | 5 | $scope.$watch('items', function() { 6 | if ($scope.items) { 7 | $timeout(function() { 8 | LxProgressService.circular.hide(); 9 | }, 200); 10 | } 11 | }); 12 | } 13 | } 14 | ProgressSpinnerCtrl.$inject = ['LxProgressService', '$timeout', '$scope']; 15 | 16 | export default () => { 17 | return { 18 | scope: { 19 | items: '=' 20 | }, 21 | template: '
', 22 | controller: ProgressSpinnerCtrl 23 | }; 24 | }; 25 | -------------------------------------------------------------------------------- /demo/app/components/data/formData.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 

4 |   
5 | 
6 | 
7 | 


--------------------------------------------------------------------------------
/demo/app/components/data/formData.js:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   return {
3 |     template: require('./formData.html'),
4 |     scope: {
5 |       formData: '='
6 |     }
7 |   };
8 | };
9 | 


--------------------------------------------------------------------------------
/demo/app/components/docsModal/docsModal.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   

 4 |     

 5 |             
 6 |               {{::vm.contents.title}} Docs
 7 |             
 8 |     

 9 |   

10 | 
11 |   

12 |     

13 |   

14 | 
15 | 
16 | 


--------------------------------------------------------------------------------
/demo/app/components/docsModal/docsModal.js:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   require('./docsModal.scss');
3 |   return {
4 |     template: require('./docsModal.html'),
5 |     bindToController: true
6 |   };
7 | };
8 | 


--------------------------------------------------------------------------------
/demo/app/components/docsModal/docsModal.scss:
--------------------------------------------------------------------------------
1 | .dialog__content {
2 |   padding: 24px;
3 |   font-size: 0.9em;
4 | }
5 | 


--------------------------------------------------------------------------------
/demo/app/components/jsonFields/jsonFields.html:
--------------------------------------------------------------------------------
 1 | 
 2 |   
[

 3 |     
 4 |          
 5 |          
 6 |   

 8 | 
 9 |   
]

10 | 
11 | 
12 | 


--------------------------------------------------------------------------------
/demo/app/components/jsonFields/jsonFields.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |   require('./jsonFields.scss');
 3 |   return {
 4 |     template: require('./jsonFields.html'),
 5 |     scope: {
 6 |       fields: '='
 7 |     }
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/demo/app/components/jsonFields/jsonFields.scss:
--------------------------------------------------------------------------------
 1 | .aftl-json-field-item {
 2 |   margin: 10px;
 3 |   padding: 4px;
 4 |   //font-size: 0.9em;
 5 | }
 6 | 
 7 | .aftl-formdata {
 8 |   padding: 4px;
 9 |   //font-size: 0.9em;
10 | }
11 | 


--------------------------------------------------------------------------------
/demo/app/components/jsonFields/prettify.filter.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |   return (json) => {
 3 |     json = json.replace(/&/g, '&').replace(//g, '>');
 4 |     return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
 5 |       var cls = 'number';
 6 |       if (/^"/.test(match)) {
 7 |         if (/:$/.test(match)) {
 8 |           cls = 'key';
 9 |         } else {
10 |           cls = 'string';
11 |         }
12 |       } else if (/true|false/.test(match)) {
13 |         cls = 'boolean';
14 |       } else if (/null/.test(match)) {
15 |         cls = 'null';
16 |       }
17 |       return '' + match + '';
18 |     });
19 |   };
20 | };
21 | 


--------------------------------------------------------------------------------
/demo/app/components/jsonFields/prettify.scss:
--------------------------------------------------------------------------------
 1 | pre {
 2 |   //outline: 1px solid #ccc;
 3 |   padding: 5px;
 4 |   margin: 5px;
 5 |   font-family: roboto, sans-serif;
 6 |   font-size: 0.9em;
 7 | }
 8 | 
 9 | .string {
10 |   color: rgba(0, 0, 0, 0.5);;
11 | }
12 | 
13 | .number {
14 |   color: rgba(0, 0, 0, 0.5);;
15 | }
16 | 
17 | .boolean {
18 |   color: rgba(0, 0, 0, 0.5);;
19 | }
20 | 
21 | .null {
22 |   color: rgba(0, 0, 0, 0.5);
23 | }
24 | 
25 | .key {
26 |   color: rgba(0, 0, 0, 0.541176);
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/app/components/markdown/contents.html:
--------------------------------------------------------------------------------
1 | 

2 |   

3 |   

4 |   

5 | 

6 | 


--------------------------------------------------------------------------------
/demo/app/components/markdown/contents.js:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   return {
3 |     template: require('./contents.html'),
4 |     scope: {
5 |       content: '='
6 |     }
7 |   };
8 | };
9 | 


--------------------------------------------------------------------------------
/demo/app/components/markdown/contents.scss:
--------------------------------------------------------------------------------
1 | .markdown-description {
2 |   padding: 10px;
3 | }
4 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/.bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdi",
 3 |   "version": "1.0.8-beta",
 4 |   "main": [
 5 |     "fonts/*",
 6 |     "css/*",
 7 |     "scss/*",
 8 |     "package.json",
 9 |     "preview.html"
10 |   ],
11 |   "homepage": "http://materialdesignicons.com",
12 |   "authors": [
13 |     {
14 |       "name": "Austin Andrews",
15 |       "homepage": "http://templarian.com"
16 |     },
17 |     {
18 |       "name": "Google",
19 |       "homepage": "http://www.google.com/design"
20 |     }
21 |   ],
22 |   "license": [
23 |     "OFL-1.1",
24 |     "MIT"
25 |   ],
26 |   "ignore": [
27 |     "*.md",
28 |     "*.json"
29 |   ],
30 |   "keywords": [
31 |     "material",
32 |     "design",
33 |     "icons",
34 |     "webfont"
35 |   ],
36 |   "_release": "1.0.8-beta",
37 |   "_resolution": {
38 |     "type": "version",
39 |     "tag": "v1.0.8-beta",
40 |     "commit": "dd5bf0392bf1b91192977806bfc03964640d7f31"
41 |   },
42 |   "_source": "git://github.com/Templarian/MaterialDesign-Webfont.git",
43 |   "_target": "1.0.8-beta",
44 |   "_originalSource": "mdi"
45 | }


--------------------------------------------------------------------------------
/demo/app/components/mdi/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "mdi",
 3 |     "version": "1.0.8-beta",
 4 |     "main": [
 5 |         "fonts/*",
 6 |         "css/*",
 7 |         "scss/*",
 8 |         "package.json",
 9 |         "preview.html"
10 |     ],
11 |     "homepage": "http://materialdesignicons.com",
12 |     "authors": [
13 |         { "name": "Austin Andrews", "homepage": "http://templarian.com" },
14 |         { "name": "Google", "homepage": "http://www.google.com/design" }
15 |     ],
16 |     "license": ["OFL-1.1", "MIT"],
17 |     "ignore": [
18 |         "*.md",
19 |         "*.json"
20 |     ],
21 |     "keywords": [
22 |         "material",
23 |         "design",
24 |         "icons",
25 |         "webfont"
26 |     ]
27 | }
28 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/fonts/materialdesignicons-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/components/mdi/fonts/materialdesignicons-webfont.eot


--------------------------------------------------------------------------------
/demo/app/components/mdi/fonts/materialdesignicons-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/components/mdi/fonts/materialdesignicons-webfont.ttf


--------------------------------------------------------------------------------
/demo/app/components/mdi/fonts/materialdesignicons-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/components/mdi/fonts/materialdesignicons-webfont.woff


--------------------------------------------------------------------------------
/demo/app/components/mdi/fonts/materialdesignicons-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/components/mdi/fonts/materialdesignicons-webfont.woff2


--------------------------------------------------------------------------------
/demo/app/components/mdi/license.txt:
--------------------------------------------------------------------------------
 1 | Copyright (c) 2014, Austin Andrews (http://materialdesignicons.com/),
 2 | with Reserved Font Name Material Design Icons.
 3 | Copyright (c) 2014, Google (http://www.google.com/design/)
 4 | uses the license at https://github.com/google/material-design-icons/blob/master/LICENSE
 5 | 
 6 | This Font Software is licensed under the SIL Open Font License, Version 1.1.
 7 | This license is copied below, and is also available with a FAQ at:
 8 | http://scripts.sil.org/OFL
 9 | 
10 | 
11 | -----------------------------------------------------------
12 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
13 | -----------------------------------------------------------
14 | 
15 | PREAMBLE
16 | The goals of the Open Font License (OFL) are to stimulate worldwide
17 | development of collaborative font projects, to support the font creation
18 | efforts of academic and linguistic communities, and to provide a free and
19 | open framework in which fonts may be shared and improved in partnership
20 | with others.
21 | 
22 | The OFL allows the licensed fonts to be used, studied, modified and
23 | redistributed freely as long as they are not sold by themselves. The
24 | fonts, including any derivative works, can be bundled, embedded, 
25 | redistributed and/or sold with any software provided that any reserved
26 | names are not used by derivative works. The fonts and derivatives,
27 | however, cannot be released under any other type of license. The
28 | requirement for fonts to remain under this license does not apply
29 | to any document created using the fonts or their derivatives.
30 | 
31 | DEFINITIONS
32 | "Font Software" refers to the set of files released by the Copyright
33 | Holder(s) under this license and clearly marked as such. This may
34 | include source files, build scripts and documentation.
35 | 
36 | "Reserved Font Name" refers to any names specified as such after the
37 | copyright statement(s).
38 | 
39 | "Original Version" refers to the collection of Font Software components as
40 | distributed by the Copyright Holder(s).
41 | 
42 | "Modified Version" refers to any derivative made by adding to, deleting,
43 | or substituting -- in part or in whole -- any of the components of the
44 | Original Version, by changing formats or by porting the Font Software to a
45 | new environment.
46 | 
47 | "Author" refers to any designer, engineer, programmer, technical
48 | writer or other person who contributed to the Font Software.
49 | 
50 | PERMISSION & CONDITIONS
51 | Permission is hereby granted, free of charge, to any person obtaining
52 | a copy of the Font Software, to use, study, copy, merge, embed, modify,
53 | redistribute, and sell modified and unmodified copies of the Font
54 | Software, subject to the following conditions:
55 | 
56 | 1) Neither the Font Software nor any of its individual components,
57 | in Original or Modified Versions, may be sold by itself.
58 | 
59 | 2) Original or Modified Versions of the Font Software may be bundled,
60 | redistributed and/or sold with any software, provided that each copy
61 | contains the above copyright notice and this license. These can be
62 | included either as stand-alone text files, human-readable headers or
63 | in the appropriate machine-readable metadata fields within text or
64 | binary files as long as those fields can be easily viewed by the user.
65 | 
66 | 3) No Modified Version of the Font Software may use the Reserved Font
67 | Name(s) unless explicit written permission is granted by the corresponding
68 | Copyright Holder. This restriction only applies to the primary font name as
69 | presented to the users.
70 | 
71 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
72 | Software shall not be used to promote, endorse or advertise any
73 | Modified Version, except to acknowledge the contribution(s) of the
74 | Copyright Holder(s) and the Author(s) or with their explicit written
75 | permission.
76 | 
77 | 5) The Font Software, modified or unmodified, in part or in whole,
78 | must be distributed entirely under this license, and must not be
79 | distributed under any other license. The requirement for fonts to
80 | remain under this license does not apply to any document created
81 | using the Font Software.
82 | 
83 | TERMINATION
84 | This license becomes null and void if any of the above conditions are
85 | not met.
86 | 
87 | DISCLAIMER
88 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
89 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
90 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
91 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
92 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
93 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
94 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
95 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
96 | OTHER DEALINGS IN THE FONT SOFTWARE.


--------------------------------------------------------------------------------
/demo/app/components/mdi/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdi",
 3 |   "version": "1.0.8-beta",
 4 |   "description": "Dist for Material Design Webfont. This includes the Stock and Community icons in a single webfont collection.",
 5 |   "main": "preview.html",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/Templarian/MaterialDesign-Webfont.git"
12 |   },
13 |   "keywords": [
14 |     "material",
15 |     "design",
16 |     "icons",
17 |     "webfont"
18 |   ],
19 |   "author": {
20 |     "name": "Austin Andrews",
21 |     "web": "http://twitter.com/templarian"
22 |   },
23 |   "licenses": [
24 |     {
25 |       "type": "OFL-1.1",
26 |       "url": "http://scripts.sil.org/OFL"
27 |     },
28 |     {
29 |       "type": "MIT",
30 |       "url": "http://opensource.org/licenses/mit-license.html"
31 |     }
32 |   ],
33 |   "bugs": {
34 |     "url": "https://github.com/Templarian/MaterialDesign/issues"
35 |   },
36 |   "homepage": "http://materialdesignicons.com"
37 | }
38 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/preview.html:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | 
  4 |     
  5 |     Material Design Icons
  6 |     
112 |     
113 | 
114 | 
115 |     

116 |         
117 |             
118 |         
119 |         Material Design Icons
120 |         1.0.8
121 |     

122 | 
123 |     
Usage

124 |     
<i class="mdi mdi-name"></i>

125 | 
126 |     
Icons

127 |     

128 | 
129 |     
130 | 
131 |     
150 | 
151 | 
152 | 
153 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/scss/_core.scss:
--------------------------------------------------------------------------------
1 | .#{$mdi-css-prefix} {
2 |   display: inline-block;
3 |   font: normal normal normal #{$mdi-font-size-base}/1 MaterialDesignIcons; // shortening font declaration
4 |   font-size: inherit; // can't have font-size inherit on line above, so need to override
5 |   text-rendering: auto; // optimizelegibility throws things off #1094
6 |   -webkit-font-smoothing: antialiased;
7 |   -moz-osx-font-smoothing: grayscale;
8 |   transform: translate(0, 0); // ensures no half-pixel rendering in firefox
9 | }


--------------------------------------------------------------------------------
/demo/app/components/mdi/scss/_icons.scss:
--------------------------------------------------------------------------------
 1 | $hexes: 'f101' 'f102' 'f103' 'f104' 'f105' 'f106' 'f107' 'f108' 'f109' 'f10a' 'f10b' 'f10c' 'f10d' 'f10e' 'f10f' 'f110' 'f111' 'f112' 'f113' 'f114' 'f115' 'f116' 'f117' 'f118' 'f119' 'f11a' 'f11b' 'f11c' 'f11d' 'f11e' 'f11f' 'f120' 'f121' 'f122' 'f123' 'f124' 'f125' 'f126' 'f127' 'f128' 'f129' 'f12a' 'f12b' 'f12c' 'f12d' 'f12e' 'f12f' 'f130' 'f131' 'f132' 'f133' 'f134' 'f135' 'f136' 'f137' 'f138' 'f139' 'f13a' 'f13b' 'f13c' 'f13d' 'f13e' 'f13f' 'f140' 'f141' 'f142' 'f143' 'f144' 'f145' 'f146' 'f147' 'f148' 'f149' 'f14a' 'f14b' 'f14c' 'f14d' 'f14e' 'f14f' 'f150' 'f151' 'f152' 'f153' 'f154' 'f155' 'f156' 'f157' 'f158' 'f159' 'f15a' 'f15b' 'f15c' 'f15d' 'f15e' 'f15f' 'f160' 'f161' 'f162' 'f163' 'f164' 'f165' 'f166' 'f167' 'f168' 'f169' 'f16a' 'f16b' 'f16c' 'f16d' 'f16e' 'f16f' 'f170' 'f171' 'f172' 'f173' 'f174' 'f175' 'f176' 'f177' 'f178' 'f179' 'f17a' 'f17b' 'f17c' 'f17d' 'f17e' 'f17f' 'f180' 'f181' 'f182' 'f183' 'f184' 'f185' 'f186' 'f187' 'f188' 'f189' 'f18a' 'f18b' 'f18c' 'f18d' 'f18e' 'f18f' 'f190' 'f191' 'f192' 'f193' 'f194' 'f195' 'f196' 'f197' 'f198' 'f199' 'f19a' 'f19b' 'f19c' 'f19d' 'f19e' 'f19f' 'f1a0' 'f1a1' 'f1a2' 'f1a3' 'f1a4' 'f1a5' 'f1a6' 'f1a7' 'f1a8' 'f1a9' 'f1aa' 'f1ab' 'f1ac' 'f1ad' 'f1ae' 'f1af' 'f1b0' 'f1b1' 'f1b2' 'f1b3' 'f1b4' 'f1b5' 'f1b6' 'f1b7' 'f1b8' 'f1b9' 'f1ba' 'f1bb' 'f1bc' 'f1bd' 'f1be' 'f1bf' 'f1c0' 'f1c1' 'f1c2' 'f1c3' 'f1c4' 'f1c5' 'f1c6' 'f1c7' 'f1c8' 'f1c9' 'f1ca' 'f1cb' 'f1cc' 'f1cd' 'f1ce' 'f1cf' 'f1d0' 'f1d1' 'f1d2' 'f1d3' 'f1d4' 'f1d5' 'f1d6' 'f1d7' 'f1d8' 'f1d9' 'f1da' 'f1db' 'f1dc' 'f1dd' 'f1de' 'f1df' 'f1e0' 'f1e1' 'f1e2' 'f1e3' 'f1e4' 'f1e5' 'f1e6' 'f1e7' 'f1e8' 'f1e9' 'f1ea' 'f1eb' 'f1ec' 'f1ed' 'f1ee' 'f1ef' 'f1f0' 'f1f1' 'f1f2' 'f1f3' 'f1f4' 'f1f5' 'f1f6' 'f1f7' 'f1f8' 'f1f9' 'f1fa' 'f1fb' 'f1fc' 'f1fd' 'f1fe' 'f1ff' 'f200' 'f201' 'f202' 'f203' 'f204' 'f205' 'f206' 'f207' 'f208' 'f209' 'f20a' 'f20b' 'f20c' 'f20d' 'f20e' 'f20f' 'f210' 'f211' 'f212' 'f213' 'f214' 'f215' 'f216' 'f217' 'f218' 'f219' 'f21a' 'f21b' 'f21c' 'f21d' 'f21e' 'f21f' 'f220' 'f221' 'f222' 'f223' 'f224' 'f225' 'f226' 'f227' 'f228' 'f229' 'f22a' 'f22b' 'f22c' 'f22d' 'f22e' 'f22f' 'f230' 'f231' 'f232' 'f233' 'f234' 'f235' 'f236' 'f237' 'f238' 'f239' 'f23a' 'f23b' 'f23c' 'f23d' 'f23e' 'f23f' 'f240' 'f241' 'f242' 'f243' 'f244' 'f245' 'f246' 'f247' 'f248' 'f249' 'f24a' 'f24b' 'f24c' 'f24d' 'f24e' 'f24f' 'f250' 'f251' 'f252' 'f253' 'f254' 'f255' 'f256' 'f257' 'f258' 'f259' 'f25a' 'f25b' 'f25c' 'f25d' 'f25e' 'f25f' 'f260' 'f261' 'f262' 'f263' 'f264' 'f265' 'f266' 'f267' 'f268' 'f269' 'f26a' 'f26b' 'f26c' 'f26d' 'f26e' 'f26f' 'f270' 'f271' 'f272' 'f273' 'f274' 'f275' 'f276' 'f277' 'f278' 'f279' 'f27a' 'f27b' 'f27c' 'f27d' 'f27e' 'f27f' 'f280' 'f281' 'f282' 'f283' 'f284' 'f285' 'f286' 'f287' 'f288' 'f289' 'f28a' 'f28b' 'f28c' 'f28d' 'f28e' 'f28f' 'f290' 'f291' 'f292' 'f293' 'f294' 'f295' 'f296' 'f297' 'f298' 'f299' 'f29a' 'f29b' 'f29c' 'f29d' 'f29e' 'f29f' 'f2a0' 'f2a1' 'f2a2' 'f2a3' 'f2a4' 'f2a5' 'f2a6' 'f2a7' 'f2a8' 'f2a9' 'f2aa' 'f2ab' 'f2ac' 'f2ad' 'f2ae' 'f2af' 'f2b0' 'f2b1' 'f2b2' 'f2b3' 'f2b4' 'f2b5' 'f2b6' 'f2b7' 'f2b8' 'f2b9' 'f2ba' 'f2bb' 'f2bc' 'f2bd' 'f2be' 'f2bf' 'f2c0' 'f2c1' 'f2c2' 'f2c3' 'f2c4' 'f2c5' 'f2c6' 'f2c7' 'f2c8' 'f2c9' 'f2ca' 'f2cb' 'f2cc' 'f2cd' 'f2ce' 'f2cf' 'f2d0' 'f2d1' 'f2d2' 'f2d3' 'f2d4' 'f2d5' 'f2d6' 'f2d7' 'f2d8' 'f2d9' 'f2da' 'f2db' 'f2dc' 'f2dd' 'f2de' 'f2df' 'f2e0' 'f2e1' 'f2e2' 'f2e3' 'f2e4' 'f2e5' 'f2e6' 'f2e7' 'f2e8' 'f2e9' 'f2ea' 'f2eb' 'f2ec' 'f2ed' 'f2ee' 'f2ef' 'f2f0' 'f2f1' 'f2f2' 'f2f3' 'f2f4' 'f2f5' 'f2f6' 'f2f7' 'f2f8' 'f2f9' 'f2fa' 'f2fb' 'f2fc' 'f2fd' 'f2fe' 'f2ff' 'f300' 'f301' 'f302' 'f303' 'f304' 'f305' 'f306' 'f307' 'f308' 'f309' 'f30a' 'f30b' 'f30c' 'f30d' 'f30e' 'f30f' 'f310' 'f311' 'f312' 'f313' 'f314' 'f315' 'f316' 'f317' 'f318' 'f319' 'f31a' 'f31b' 'f31c' 'f31d' 'f31e' 'f31f' 'f320' 'f321' 'f322' 'f323' 'f324' 'f325' 'f326' 'f327' 'f328' 'f329' 'f32a' 'f32b' 'f32c' 'f32d' 'f32e' 'f32f' 'f330' 'f331' 'f332' 'f333' 'f334' 'f335' 'f336' 'f337' 'f338' 'f339' 'f33a' 'f33b' 'f33c' 'f33d' 'f33e' 'f33f' 'f340' 'f341' 'f342' 'f343' 'f344' 'f345' 'f346' 'f347' 'f348' 'f349' 'f34a' 'f34b' 'f34c' 'f34d' 'f34e' 'f34f' 'f350' 'f351' 'f352' 'f353' 'f354' 'f355' 'f356' 'f357' 'f358' 'f359' 'f35a' 'f35b' 'f35c' 'f35d' 'f35e' 'f35f' 'f360' 'f361' 'f362' 'f363' 'f364' 'f365' 'f366' 'f367' 'f368' 'f369' 'f36a' 'f36b' 'f36c' 'f36d' 'f36e' 'f36f' 'f370' 'f371' 'f372' 'f373' 'f374' 'f375' 'f376' 'f377' 'f378' 'f379' 'f37a' 'f37b' 'f37c' 'f37d' 'f37e' 'f37f' 'f380' 'f381' 'f382' 'f383' 'f384' 'f385' 'f386' 'f387' 'f388' 'f389' 'f38a' 'f38b' 'f38c' 'f38d' 'f38e' 'f38f' 'f390' 'f391' 'f392' 'f393' 'f394' 'f395' 'f396' 'f397' 'f398' 'f399' 'f39a' 'f39b' 'f39c' 'f39d' 'f39e' 'f39f' 'f3a0' 'f3a1' 'f3a2' 'f3a3' 'f3a4' 'f3a5' 'f3a6' 'f3a7' 'f3a8' 'f3a9' 'f3aa' 'f3ab' 'f3ac' 'f3ad' 'f3ae' 'f3af' 'f3b0' 'f3b1' 'f3b2' 'f3b3' 'f3b4' 'f3b5' 'f3b6' 'f3b7' 'f3b8' 'f3b9' 'f3ba' 'f3bb' 'f3bc' 'f3bd' 'f3be' 'f3bf' 'f3c0' 'f3c1' 'f3c2' 'f3c3' 'f3c4' 'f3c5' 'f3c6' 'f3c7' 'f3c8' 'f3c9' 'f3ca' 'f3cb' 'f3cc' 'f3cd' 'f3ce' 'f3cf' 'f3d0' 'f3d1' 'f3d2' 'f3d3' 'f3d4' 'f3d5' 'f3d6' 'f3d7' 'f3d8' 'f3d9' 'f3da' 'f3db' 'f3dc' 'f3dd' 'f3de' 'f3df' 'f3e0' 'f3e1' 'f3e2' 'f3e3' 'f3e4' 'f3e5' 'f3e6' 'f3e7' 'f3e8' 'f3e9' 'f3ea' 'f3eb' 'f3ec' 'f3ed' 'f3ee' 'f3ef' 'f3f0' 'f3f1' 'f3f2' 'f3f3' 'f3f4' 'f3f5' 'f3f6' 'f3f7' 'f3f8' 'f3f9' 'f3fa' 'f3fb' 'f3fc' 'f3fd' 'f3fe' 'f3ff' 'f400' 'f401' 'f402' 'f403' 'f404' 'f405' 'f406' 'f407' 'f408' 'f409' 'f40a' 'f40b' 'f40c' 'f40d' 'f40e' 'f40f' 'f410' 'f411' 'f412' 'f413' 'f414' 'f415' 'f416' 'f417' 'f418' 'f419' 'f41a' 'f41b' 'f41c' 'f41d' 'f41e' 'f41f' 'f420' 'f421' 'f422' 'f423' 'f424' 'f425' 'f426' 'f427' 'f428' 'f429' 'f42a' 'f42b' 'f42c' 'f42d' 'f42e' 'f42f' 'f430' 'f431' 'f432' 'f433' 'f434' 'f435' 'f436' 'f437' 'f438' 'f439' 'f43a' 'f43b' 'f43c' 'f43d' 'f43e' 'f43f' 'f440' 'f441' 'f442' 'f443' 'f444' 'f445' 'f446' 'f447' 'f448' 'f449' 'f44a' 'f44b' 'f44c' 'f44d' 'f44e' 'f44f' 'f450' 'f451' 'f452' 'f453' 'f454' 'f455' 'f456' 'f457' 'f458' 'f459' 'f45a' 'f45b' 'f45c' 'f45d' 'f45e' 'f45f' 'f460' 'f461' 'f462' 'f463' 'f464' 'f465' 'f466' 'f467' 'f468' 'f469' 'f46a' 'f46b' 'f46c' 'f46d' 'f46e' 'f46f' 'f470' 'f471' 'f472' 'f473' 'f474' 'f475' 'f476' 'f477' 'f478' 'f479' 'f47a' 'f47b' 'f47c' 'f47d' 'f47e' 'f47f' 'f480' 'f481' 'f482' 'f483' 'f484' 'f485' 'f486' 'f487' 'f488' 'f489' 'f48a' 'f48b' 'f48c' 'f48d' 'f48e' 'f48f' 'f490' 'f491' 'f492' 'f493' 'f494' 'f495' 'f496' 'f497' 'f498' 'f499' 'f49a' 'f49b' 'f49c' 'f49d' 'f49e' 'f49f' 'f4a0' 'f4a1' 'f4a2' 'f4a3' 'f4a4' 'f4a5' 'f4a6' 'f4a7' 'f4a8' 'f4a9' 'f4aa' 'f4ab' 'f4ac' 'f4ad' 'f4ae' 'f4af' 'f4b0' 'f4b1' 'f4b2' 'f4b3' 'f4b4' 'f4b5' 'f4b6' 'f4b7' 'f4b8' 'f4b9' 'f4ba' 'f4bb' 'f4bc' 'f4bd' 'f4be' 'f4bf' 'f4c0' 'f4c1' 'f4c2' 'f4c3' 'f4c4' 'f4c5' 'f4c6' 'f4c7' 'f4c8' 'f4c9' 'f4ca' 'f4cb' 'f4cc' 'f4cd' 'f4ce' 'f4cf' 'f4d0' 'f4d1' 'f4d2' 'f4d3' 'f4d4' 'f4d5' 'f4d6' 'f4d7' 'f4d8' 'f4d9' 'f4da' 'f4db' 'f4dc' 'f4dd' 'f4de' 'f4df' 'f4e0' 'f4e1' 'f4e2' 'f4e3' 'f4e4' 'f4e5' 'f4e6' 'f4e7' 'f4e8' 'f4e9' 'f4ea' 'f4eb' 'f4ec' 'f4ed' 'f4ee' 'f4ef' 'f4f0';
 2 | $names: 'account' 'account-alert' 'account-box' 'account-box-outline' 'account-check' 'account-circle' 'account-key' 'account-location' 'account-minus' 'account-multiple' 'account-multiple-outline' 'account-multiple-plus' 'account-network' 'account-outline' 'account-plus' 'account-remove' 'account-search' 'account-star' 'account-star-variant' 'account-switch' 'airballoon' 'airplane' 'airplane-off' 'alarm' 'alarm-check' 'alarm-multiple' 'alarm-off' 'alarm-plus' 'album' 'alert' 'alert-box' 'alert-circle' 'alert-octagon' 'alpha' 'alphabetical' 'amazon' 'amazon-clouddrive' 'ambulance' 'android' 'android-debug-bridge' 'android-studio' 'apple' 'apple-finder' 'apple-mobileme' 'apple-safari' 'appnet' 'apps' 'arrange-bring-forward' 'arrange-bring-to-front' 'arrange-send-backward' 'arrange-send-to-back' 'arrow-collapse' 'arrow-down' 'arrow-down-bold' 'arrow-down-bold-circle' 'arrow-down-bold-circle-outline' 'arrow-down-bold-hexagon-outline' 'arrow-expand' 'arrow-left' 'arrow-left-bold' 'arrow-left-bold-circle' 'arrow-left-bold-circle-outline' 'arrow-left-bold-hexagon-outline' 'arrow-right' 'arrow-right-bold' 'arrow-right-bold-circle' 'arrow-right-bold-circle-outline' 'arrow-right-bold-hexagon-outline' 'arrow-up' 'arrow-up-bold' 'arrow-up-bold-circle' 'arrow-up-bold-circle-outline' 'arrow-up-bold-hexagon-outline' 'attachment' 'auto-fix' 'auto-upload' 'backup-restore' 'bank' 'barcode' 'barrel' 'basecamp' 'basket' 'basket-fill' 'basket-unfill' 'battery' 'battery-20' 'battery-30' 'battery-40' 'battery-60' 'battery-80' 'battery-90' 'battery-alert' 'battery-charging-100' 'battery-charging-20' 'battery-charging-30' 'battery-charging-40' 'battery-charging-60' 'battery-charging-80' 'battery-charging-90' 'battery-minus' 'battery-negative' 'battery-outline' 'battery-plus' 'battery-positive' 'battery-unknown' 'beaker' 'beaker-empty' 'beaker-empty-outline' 'beaker-outline' 'beats' 'beer' 'behance' 'bell' 'bell-off' 'bell-outline' 'bell-ring' 'bell-ring-outline' 'bell-sleep' 'beta' 'bike' 'bing' 'bio' 'biohazard' 'blackberry' 'blinds' 'block-helper' 'blogger' 'bluetooth' 'bluetooth-audio' 'bluetooth-connect' 'bluetooth-settings' 'blur' 'blur-linear' 'blur-off' 'blur-radial' 'book' 'book-multiple' 'book-multiple-variant' 'book-variant' 'bookmark' 'bookmark-outline' 'border-all' 'border-bottom' 'border-color' 'border-horizontal' 'border-inside' 'border-left' 'border-none' 'border-outside' 'border-right' 'border-top' 'border-vertical' 'bowling' 'box' 'briefcase' 'briefcase-check' 'briefcase-download' 'briefcase-upload' 'brightness-1' 'brightness-2' 'brightness-3' 'brightness-4' 'brightness-5' 'brightness-6' 'brightness-7' 'brightness-auto' 'broom' 'brush' 'bug' 'bus' 'cake' 'cake-variant' 'calculator' 'calendar' 'calendar-check' 'calendar-remove' 'calendar-text' 'calendar-today' 'camcorder' 'camcorder-box' 'camcorder-box-off' 'camcorder-off' 'camera' 'camera-iris' 'camera-party-mode' 'camera-switch' 'camera-timer' 'candycane' 'car' 'car-wash' 'carrot' 'cart' 'cart-outline' 'cash' 'cast' 'cast-connected' 'castle' 'cellphone' 'cellphone-android' 'cellphone-dock' 'cellphone-iphone' 'cellphone-link' 'cellphone-link-off' 'cellphone-settings' 'chair-school' 'chart-bar' 'chart-histogram' 'chart-line' 'check' 'check-all' 'checkbox-blank' 'checkbox-blank-circle' 'checkbox-blank-circle-outline' 'checkbox-blank-outline' 'checkbox-marked' 'checkbox-marked-circle' 'checkbox-marked-circle-outline' 'checkbox-marked-outline' 'checkbox-multiple-blank' 'checkbox-multiple-blank-outline' 'checkbox-multiple-marked' 'checkbox-multiple-marked-outline' 'chevron-double-down' 'chevron-double-left' 'chevron-double-right' 'chevron-double-up' 'chevron-down' 'chevron-left' 'chevron-right' 'chevron-up' 'church' 'city' 'clipboard' 'clipboard-account' 'clipboard-alert' 'clipboard-arrow-down' 'clipboard-arrow-left' 'clipboard-check' 'clipboard-outline' 'clipboard-text' 'clippy' 'clock' 'clock-fast' 'close' 'close-box' 'close-box-outline' 'close-circle' 'close-circle-outline' 'close-network' 'closed-caption' 'cloud' 'cloud-check' 'cloud-circle' 'cloud-download' 'cloud-outline' 'cloud-outline-off' 'cloud-upload' 'code-array' 'code-string' 'coffee' 'coffee-to-go' 'coin' 'color-helper' 'comment' 'comment-account' 'comment-account-outline' 'comment-alert' 'comment-alert-outline' 'comment-check' 'comment-check-outline' 'comment-multipe-outline' 'comment-outline' 'comment-plus-outline' 'comment-processing' 'comment-processing-outline' 'comment-remove-outline' 'comment-text' 'comment-text-outline' 'compare' 'compass' 'compass-outline' 'console' 'content-copy' 'content-cut' 'content-paste' 'content-save' 'content-save-all' 'contrast' 'contrast-box' 'contrast-circle' 'cow' 'credit-card' 'crop' 'crop-free' 'crop-landscape' 'crop-portrait' 'crop-square' 'crosshairs' 'crosshairs-gps' 'cube' 'cube-outline' 'cube-unfolded' 'cup' 'cup-water' 'currency-btc' 'currency-usd' 'cursor-default' 'cursor-default-outline' 'cursor-pointer' 'database' 'database-minus' 'database-outline' 'database-plus' 'debug-step-into' 'debug-step-out' 'debug-step-over' 'delete' 'delete-variant' 'deskphone' 'desktop-mac' 'desktop-tower' 'details' 'deviantart' 'dice' 'dice-1' 'dice-2' 'dice-3' 'dice-4' 'dice-5' 'dice-6' 'directions' 'disk-alert' 'disqus' 'disqus-outline' 'division' 'division-box' 'dns' 'dots-horizontal' 'dots-vertical' 'download' 'drawing' 'drawing-box' 'dribbble' 'dribbble-box' 'drone' 'dropbox' 'duck' 'earth' 'earth-off' 'elevation-decline' 'elevation-rise' 'email' 'email-open' 'email-outline' 'emoticon' 'emoticon-cool' 'emoticon-devil' 'emoticon-happy' 'emoticon-neutral' 'emoticon-poop' 'emoticon-sad' 'emoticon-tongue' 'equal' 'equal-box' 'eraser' 'escalator' 'etsy' 'evernote' 'exit-to-app' 'eye' 'eye-off' 'eyedropper' 'eyedropper-variant' 'facebook' 'facebook-box' 'facebook-messenger' 'factory' 'fast-forward' 'ferry' 'file' 'file-cloud' 'file-delimited' 'file-document' 'file-document-box' 'file-excel' 'file-excel-box' 'file-find' 'file-image' 'file-image-box' 'file-music' 'file-outline' 'file-pdf' 'file-pdf-box' 'file-powerpoint' 'file-powerpoint-box' 'file-presentation-box' 'file-video' 'file-word' 'file-word-box' 'film' 'filmstrip' 'filmstrip-off' 'filter' 'filter-outline' 'filter-remove' 'filter-remove-outline' 'filter-variant' 'fire' 'firefox' 'fish' 'flag' 'flag-checkered' 'flag-outline' 'flag-outline-variant' 'flag-variant' 'flash' 'flash-auto' 'flash-off' 'flashlight' 'flashlight-off' 'flip-to-back' 'flip-to-front' 'floppy' 'flower' 'folder' 'folder-account' 'folder-google-drive' 'folder-image' 'folder-move' 'folder-multiple' 'folder-multiple-image' 'folder-multiple-outline' 'folder-outline' 'folder-plus' 'folder-remove' 'food' 'food-apple' 'food-variant' 'format-align-center' 'format-align-justify' 'format-align-left' 'format-align-right' 'format-bold' 'format-clear' 'format-color-fill' 'format-header-1' 'format-header-2' 'format-header-3' 'format-header-4' 'format-header-5' 'format-header-6' 'format-header-pound' 'format-indent-decrease' 'format-indent-increase' 'format-italic' 'format-line-spacing' 'format-list-bulleted' 'format-list-numbers' 'format-paint' 'format-paragraph' 'format-quote' 'format-size' 'format-strikethrough' 'format-subscript' 'format-superscript' 'format-textdirection-l-to-r' 'format-textdirection-r-to-l' 'format-underline' 'forum' 'forward' 'foursquare' 'fullscreen' 'fullscreen-exit' 'gamepad' 'gamepad-variant' 'gas-station' 'gavel' 'gender-female' 'gender-male' 'gender-transgender' 'gift' 'github-box' 'github-circle' 'gmail' 'google' 'google-chrome' 'google-circles' 'google-circles-communities' 'google-circles-extended' 'google-circles-group' 'google-drive' 'google-earth' 'google-glass' 'google-maps' 'google-pages' 'google-play' 'google-plus' 'google-plus-box' 'guitar-pick' 'guitar-pick-outline' 'hand-pointing-right' 'hanger' 'hangouts' 'harddisk' 'headphones' 'headphones-box' 'headphones-settings' 'headset' 'headset-dock' 'heart' 'heart-box' 'heart-box-outline' 'heart-outline' 'help' 'help-circle' 'hexagon' 'hexagon-outline' 'history' 'home' 'home-modern' 'home-variant' 'hospital' 'hospital-building' 'hospital-marker' 'hotel' 'houzz' 'houzz-box' 'human' 'human-child' 'human-male-female' 'image-album' 'image-area' 'image-area-close' 'image-filter' 'image-filter-black-white' 'image-filter-center-focus' 'image-filter-drama' 'image-filter-frames' 'image-filter-hdr' 'image-filter-none' 'image-filter-tilt-shift' 'image-filter-vintage' 'information' 'information-outline' 'instagram' 'instapaper' 'internet-explorer' 'invert-colors' 'key' 'key-change' 'key-minus' 'key-plus' 'key-remove' 'key-variant' 'keyboard' 'keyboard-backspace' 'keyboard-caps' 'keyboard-close' 'keyboard-off' 'keyboard-return' 'keyboard-tab' 'label' 'label-outline' 'laptop' 'laptop-chromebook' 'laptop-mac' 'laptop-windows' 'lastfm' 'launch' 'layers' 'layers-off' 'leaf' 'library' 'library-books' 'library-music' 'library-plus' 'lightbulb' 'link' 'linkedin' 'linux' 'lock' 'lock-open' 'lock-open-outline' 'lock-outline' 'login' 'logout' 'looks' 'loupe' 'lumx' 'magnify' 'magnify-minus' 'magnify-plus' 'map' 'map-marker' 'map-marker-circle' 'map-marker-multiple' 'map-marker-off' 'map-marker-radius' 'markdown' 'marker-check' 'martini' 'material-ui' 'math-compass' 'memory' 'menu' 'menu-down' 'menu-left' 'menu-right' 'menu-up' 'message' 'message-alert' 'message-draw' 'message-image' 'message-processing' 'message-reply' 'message-video' 'microphone' 'microphone-off' 'microphone-outline' 'microphone-settings' 'microphone-variant' 'microphone-variant-off' 'minus' 'minus-box' 'minus-circle' 'minus-circle-outline' 'minus-network' 'monitor' 'monitor-multiple' 'more' 'motorbike' 'mouse' 'mouse-off' 'mouse-variant' 'mouse-variant-off' 'movie' 'multiplication' 'multiplication-box' 'music-box' 'music-box-outline' 'nature' 'nature-people' 'navigation' 'needle' 'nest-protect' 'nest-thermostat' 'newspaper' 'nfc' 'nfc-tap' 'nfc-variant' 'numeric' 'numeric-0-box' 'numeric-0-box-multiple-outline' 'numeric-0-box-outline' 'numeric-1-box' 'numeric-1-box-multiple-outline' 'numeric-1-box-outline' 'numeric-2-box' 'numeric-2-box-multiple-outline' 'numeric-2-box-outline' 'numeric-3-box' 'numeric-3-box-multiple-outline' 'numeric-3-box-outline' 'numeric-4-box' 'numeric-4-box-multiple-outline' 'numeric-4-box-outline' 'numeric-5-box' 'numeric-5-box-multiple-outline' 'numeric-5-box-outline' 'numeric-6-box' 'numeric-6-box-multiple-outline' 'numeric-6-box-outline' 'numeric-7-box' 'numeric-7-box-multiple-outline' 'numeric-7-box-outline' 'numeric-8-box' 'numeric-8-box-multiple-outline' 'numeric-8-box-outline' 'numeric-9-box' 'numeric-9-box-multiple-outline' 'numeric-9-box-outline' 'numeric-9-plus-box' 'numeric-9-plus-box-multiple-outline' 'numeric-9-plus-box-outline' 'nutriton' 'office' 'oil' 'omega' 'onedrive' 'open-in-app' 'ornament' 'ornament-variant' 'package' 'package-down' 'package-up' 'palette' 'palette-advanced' 'panda' 'pandora' 'panorama' 'panorama-fisheye' 'panorama-horizontal' 'panorama-vertical' 'panorama-wide-angle' 'paper-cut-vertical' 'paperclip' 'parking' 'pause' 'pause-circle' 'pause-circle-outline' 'pause-octagon' 'pause-octagon-outline' 'pencil' 'pencil-box' 'pencil-box-outline' 'pharmacy' 'phone' 'phone-bluetooth' 'phone-forward' 'phone-hangup' 'phone-in-talk' 'phone-locked' 'phone-missed' 'phone-paused' 'phone-settings' 'pig' 'pill' 'pin' 'pin-off' 'pine-tree' 'pine-tree-box' 'pinterest' 'pizza' 'play' 'play-box-outline' 'play-circle' 'play-circle-outline' 'playlist-plus' 'plus' 'plus-box' 'plus-circle' 'plus-circle-outline' 'plus-network' 'plus-one' 'pocket' 'poll' 'poll-box' 'polymer' 'popcorn' 'pound' 'pound-box' 'power' 'power-settings' 'presentation' 'printer' 'puzzle' 'qrcode' 'quadcopter' 'quality-high' 'quicktime' 'radiator' 'radioactive' 'radiobox-blank' 'radiobox-marked' 'rdio' 'read' 'readability' 'receipt' 'recycle' 'redo' 'redo-variant' 'refresh' 'relative-scale' 'reload' 'remote' 'rename-box' 'repeat' 'repeat-off' 'repeat-once' 'replay' 'reply' 'reply-all' 'responsive' 'rewind' 'ribbon' 'rocket' 'rotate-3d' 'rotate-left' 'rotate-left-variant' 'rotate-right' 'rotate-right-variant' 'routes' 'rss' 'rss-box' 'ruler' 'run' 'satellite' 'satellite-variant' 'scale' 'scale-bathroom' 'school' 'screen-rotation' 'screen-rotation-lock' 'script' 'sd' 'security' 'security-network' 'select' 'select-inverse' 'select-off' 'send' 'server' 'server-minus' 'server-network' 'server-network-off' 'server-off' 'server-plus' 'server-remove' 'server-security' 'settings' 'settings-box' 'shape-plus' 'share' 'share-variant' 'shopping' 'shopping-music' 'shuffle' 'sign-caution' 'silverware' 'silverware-fork' 'silverware-spoon' 'silverware-variant' 'sim-alert' 'skip-next' 'skip-previous' 'snowman' 'sort' 'sort-alphabetical' 'sort-ascending' 'sort-descending' 'sort-numeric' 'sort-variant' 'soundcloud' 'source-fork' 'source-pull' 'speaker' 'speaker-off' 'speedometer' 'spellcheck' 'spotify' 'spotlight' 'spotlight-beam' 'star' 'star-circle' 'star-half' 'star-outline' 'stocking' 'stop' 'store' 'store-24-hour' 'stove' 'subway' 'swap-horizontal' 'swap-vertical' 'swim' 'sword' 'sync' 'sync-alert' 'sync-off' 'tab' 'tab-unselected' 'table' 'tablet' 'tablet-android' 'tablet-ipad' 'tag' 'tag-faces' 'tag-outline' 'tag-text-outline' 'taxi' 'television' 'television-guide' 'temperature-celsius' 'temperature-fahrenheit' 'temperature-kelvin' 'tent' 'terrain' 'text-to-speech' 'text-to-speech-off' 'texture' 'theater' 'thermometer' 'thermometer-lines' 'thumb-down' 'thumb-up' 'thumbs-up-down' 'ticket' 'ticket-account' 'tie' 'timelapse' 'timer' 'timer-10' 'timer-3' 'timer-off' 'timer-sand' 'timetable' 'toggle-switch' 'toggle-switch-off' 'tooltip' 'tooltip-edit' 'tooltip-image' 'tooltip-outline' 'tooltip-text' 'tor' 'traffic-light' 'train' 'tram' 'transcribe' 'transcribe-close' 'trending-down' 'trending-neutral' 'trending-up' 'trophy' 'trophy-award' 'trophy-variant' 'truck' 'tshirt-crew' 'tshirt-v' 'tumblr' 'tumblr-reblog' 'twitch' 'twitter' 'twitter-box' 'twitter-retweet' 'ubuntu' 'undo' 'undo-variant' 'unfold-less' 'unfold-more' 'upload' 'usb' 'vector-curve' 'vector-point' 'vector-square' 'verified' 'vibrate' 'video' 'video-off' 'video-switch' 'view-agenda' 'view-array' 'view-carousel' 'view-column' 'view-dashboard' 'view-day' 'view-headline' 'view-list' 'view-module' 'view-quilt' 'view-stream' 'view-week' 'voicemail' 'volume-high' 'volume-low' 'volume-medium' 'volume-off' 'walk' 'wallet' 'wallet-giftcard' 'wallet-membership' 'wallet-travel' 'watch' 'water' 'water-off' 'water-pump' 'weather-cloudy' 'weather-hail' 'weather-lightning' 'weather-night' 'weather-partlycloudy' 'weather-pouring' 'weather-rainy' 'weather-snowy' 'weather-sunny' 'weather-sunset' 'weather-sunset-down' 'weather-sunset-up' 'weather-windy' 'weather-windy-variant' 'web' 'webcam' 'whatsapp' 'wheelchair-accessibility' 'white-balance-auto' 'white-balance-incandescent' 'white-balance-irradescent' 'white-balance-sunny' 'wifi' 'wikipedia' 'window-closed' 'window-open' 'windows' 'wordpress' 'xbox' 'xda' 'xml' 'youtube-play' 'zip-box';
 3 | 
 4 | @function char($character-code) {
 5 |     @if function-exists("selector-append") {
 6 |         @return unquote("\"\\#{$character-code}\"");
 7 |     }
 8 |     @return str-slice("\x", 1, 1) + $character-code;
 9 | }
10 | 
11 | @for $i from 1 through length($hexes) {
12 |     .mdi-#{nth($names, $i)}::before {
13 |         content: char(nth($hexes, $i));
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/scss/_path.scss:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'MaterialDesignIcons';
 3 |   src: url('#{$mdi-font-path}/materialdesignicons-webfont.eot?v=#{$mdi-version}');
 4 |   src: url('#{$mdi-font-path}/materialdesignicons-webfont.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'),
 5 |     url('#{$mdi-font-path}/materialdesignicons-webfont.woff2?v=#{$mdi-version}') format('woff2'),
 6 |     url('#{$mdi-font-path}/materialdesignicons-webfont.woff?v=#{$mdi-version}') format('woff'),
 7 |     url('#{$mdi-font-path}/materialdesignicons-webfont.ttf?v=#{$mdi-version}') format('truetype'),
 8 |     url('#{$mdi-font-path}/materialdesignicons-webfont.svg?v=#{$mdi-version}#materialdesigniconsregular') format('svg');
 9 |   font-weight: normal;
10 |   font-style: normal;
11 | }
12 | 


--------------------------------------------------------------------------------
/demo/app/components/mdi/scss/_variables.scss:
--------------------------------------------------------------------------------
1 | $mdi-font-path:        "../fonts" !default;
2 | $mdi-font-size-base:   24px !default;
3 | $mdi-css-prefix:       mdi !default;
4 | $mdi-version:          "1.0.8" !default;


--------------------------------------------------------------------------------
/demo/app/components/mdi/scss/materialdesignicons.scss:
--------------------------------------------------------------------------------
1 | /* MaterialDesignIcons.com */
2 | @import "variables";
3 | @import "path";
4 | @import "core";
5 | @import "icons";


--------------------------------------------------------------------------------
/demo/app/components/pageStyles/container.html:
--------------------------------------------------------------------------------
1 | 

2 |   
3 |   
{{::title}}

4 | 
5 |   

6 |   

7 | 

8 | 


--------------------------------------------------------------------------------
/demo/app/components/pageStyles/container.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |   return {
 3 |     template: require('./container.html'),
 4 |     scope: {
 5 |       title: '@',
 6 |       bgc: '@'
 7 |     },
 8 |     transclude: true
 9 |   };
10 | };
11 | 


--------------------------------------------------------------------------------
/demo/app/components/pageStyles/divider.js:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   return {
3 |     template: ''
4 |   };
5 | };
6 | 


--------------------------------------------------------------------------------
/demo/app/components/pageStyles/divider.scss:
--------------------------------------------------------------------------------
 1 | .shmck-divider {
 2 |   background-color: rgba(0, 0, 0, 0.117647);
 3 |   display: list-item;
 4 |   height: 0.989583373069763px;
 5 |   margin-bottom: 10px;
 6 |   margin-top: 5px;
 7 |   width: 100%;
 8 |   list-style: none;
 9 | }
10 | 


--------------------------------------------------------------------------------
/demo/app/core/layout.js:
--------------------------------------------------------------------------------
1 | export default angular.module('app.layout', [])
2 |   .service('SidebarService', require('./sidebar/sidebar.service'))
3 |   .directive('shmckNav', require('./nav/nav'))
4 |   .directive('shmckSidebar', require('./sidebar/sidebar'));
5 | 


--------------------------------------------------------------------------------
/demo/app/core/nav/nav.ctrl.js:
--------------------------------------------------------------------------------
 1 | class NavCtrl {
 2 |   constructor(SidebarService, version) {
 3 |     this.sidebar = SidebarService;
 4 |     this.version = version;
 5 |     this.links = require('../navMenu.json');
 6 |   }
 7 | }
 8 | NavCtrl.$inject = ['SidebarService', 'version'];
 9 | 
10 | export default NavCtrl;
11 | 


--------------------------------------------------------------------------------
/demo/app/core/nav/nav.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   

 3 |     
 6 |   

 7 | 
 8 |   

 9 |     
10 |       
11 |       Formly LumX 
12 |       v{{::vm.version}}
13 |     
14 |   

15 | 
16 |   
24 |   
41 | 

42 | 


--------------------------------------------------------------------------------
/demo/app/core/nav/nav.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |   require('./nav.scss');
 3 |   return {
 4 |     restrict: 'E',
 5 |     controller: require('./nav.ctrl'),
 6 |     controllerAs: 'vm',
 7 |     template: require('./nav.html')
 8 |   };
 9 | };
10 | 


--------------------------------------------------------------------------------
/demo/app/core/nav/nav.scss:
--------------------------------------------------------------------------------
  1 | header {
  2 |   position: fixed;
  3 | }
  4 | 
  5 | .main-nav--title {
  6 |   margin-left: 45px;
  7 |   margin-top: 0;
  8 | }
  9 | 
 10 | .main-nav--icon {
 11 |   position: absolute;
 12 |   margin: 5px;
 13 | }
 14 | 
 15 | .main-logo__link {
 16 |   text-decoration: none;
 17 |   color: white;
 18 | }
 19 | 
 20 | .menu-icon {
 21 |   fill: white;
 22 | }
 23 | 
 24 | .main-nav--version {
 25 |   font-size: 0.5em;
 26 |   color: #F4F4F4;
 27 | }
 28 | 
 29 | @media screen and (min-width: 1024px) {
 30 |   .wrapper {
 31 |     width: 960px;
 32 |     margin: 0 auto;
 33 |   }
 34 | }
 35 | 
 36 | @media screen and (max-width: 1023px) {
 37 |   .wrapper {
 38 |     margin: 0 24px;
 39 |   }
 40 | }
 41 | 
 42 | .sidebar-filter {
 43 |   position: fixed;
 44 |   top: 0;
 45 |   right: 0;
 46 |   bottom: 0;
 47 |   left: 0;
 48 |   z-index: 998;
 49 |   background-color: rgba(0, 0, 0, 0.5);
 50 |   opacity: 0;
 51 |   pointer-events: none;
 52 |   -webkit-transition-property: opacity;
 53 |   -moz-transition-property: opacity;
 54 |   transition-property: opacity;
 55 |   -webkit-transition-duration: 0.6s;
 56 |   -moz-transition-duration: 0.6s;
 57 |   transition-duration: 0.6s;
 58 |   -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 59 |   -moz-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 60 |   transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 61 | }
 62 | 
 63 | @media screen and (max-width: 1023px) {
 64 |   .sidebar-filter--is-shown {
 65 |     opacity: 1;
 66 |     pointer-events: auto;
 67 |   }
 68 | }
 69 | 
 70 | .sidebar {
 71 |   z-index: 998;
 72 |   width: 260px;
 73 |   border-right: solid 1px #ddd;
 74 |   background-color: #fff;
 75 |   -webkit-transition-property: box-shadow, -webkit-transform;
 76 |   -moz-transition-property: box-shadow, -moz-transform;
 77 |   transition-property: box-shadow, transform;
 78 |   -webkit-transition-duration: 0.6s;
 79 |   -moz-transition-duration: 0.6s;
 80 |   transition-duration: 0.6s;
 81 |   -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 82 |   -moz-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 83 |   transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
 84 |   overflow: auto;
 85 | }
 86 | 
 87 | @media screen and (min-width: 1024px) {
 88 |   .sidebar {
 89 |     position: fixed;
 90 |     top: 60px;
 91 |     bottom: 0;
 92 |   }
 93 |   .main-section__content {
 94 |     margin-left: 236px;
 95 |   }
 96 | }
 97 | 
 98 | @media screen and (max-width: 1023px) {
 99 |   .sidebar {
100 |     position: fixed;
101 |     top: 60px;
102 |     bottom: 0;
103 |     left: -260px;
104 |   }
105 |   .main-section__content {
106 |     justify-content: center;
107 |   }
108 | }
109 | 
110 | @media screen and (max-width: 1023px) {
111 |   .sidebar--is-shown {
112 |     box-shadow: 3px 0 6px rgba(0, 0, 0, 0.4);
113 |     -webkit-transform: translateX(260px);
114 |     -moz-transform: translateX(260px);
115 |     -ms-transform: translateX(260px);
116 |     -o-transform: translateX(260px);
117 |     transform: translateX(260px);
118 |   }
119 | }
120 | 
121 | .sidebar-menu {
122 |   padding: 8px 0;
123 | }
124 | 
125 | .sidebar-menu__link {
126 |   display: block;
127 |   padding: 0 16px;
128 |   cursor: pointer;
129 |   font-size: 14px;
130 |   font-size: 0.875rem;
131 |   font-weight: 700;
132 |   color: #333;
133 |   line-height: 48px;
134 |   text-decoration: none;
135 | }
136 | 
137 | .sidebar-menu__link:hover {
138 |   background-color: #eee;
139 | }
140 | 
141 | .header {
142 |   position: fixed;
143 |   top: 0;
144 |   right: 0;
145 |   left: 0;
146 |   z-index: 999;
147 |   height: 60px;
148 |   padding: 12px;
149 |   background-color: #4fc1e9;
150 |   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
151 | }
152 | 
153 | .header::after {
154 |   clear: both;
155 |   content: "";
156 |   display: table;
157 | }
158 | 
159 | @media screen and (min-width: 1201px) {
160 |   .menubar {
161 |     display: none;
162 |   }
163 | }
164 | 
165 | @media screen and (max-width: 1200px) {
166 |   .menubar {
167 |     float: left;
168 |   }
169 | }
170 | 
171 | .home .menubar {
172 |   display: none;
173 | }
174 | 
175 | .main-logo {
176 |   float: left;
177 | }
178 | 
179 | .main-logo__link {
180 |   display: block;
181 |   padding: 4px 6px;
182 |   border-radius: 2px;
183 |   font-size: 24px;
184 |   font-size: 1.5rem;
185 | }
186 | 
187 | .main-logo__link img {
188 |   display: block;
189 |   height: 28px;
190 | }
191 | 
192 | .main-nav {
193 |   float: right;
194 | }
195 | 
196 | .main-nav ul li {
197 |   float: left;
198 | }
199 | 
200 | @media screen and (max-width: 630px) {
201 |   .main-nav--title {
202 |     font-size: 0.85em;
203 |   }
204 |   .main-nav--version {
205 |     display: none;
206 |   }
207 |   .main-nav--lap-and-up {
208 |     display: none;
209 |   }
210 |   body {
211 |     font-size: 0.85em;
212 |   }
213 |   .sidebar-menu {
214 |     font-size: 0.85em;
215 |   }
216 | }
217 | 
218 | @media screen and (min-width: 631px) {
219 |   .main-nav--palm {
220 |     display: none;
221 |   }
222 | }
223 | 
224 | .main-nav__link {
225 |   display: block;
226 |   padding: 0 12px;
227 |   border-radius: 2px;
228 |   font-size: 18px;
229 |   font-size: 1.125rem;
230 |   font-weight: 600;
231 |   color: white;
232 |   line-height: 36px;
233 |   text-decoration: none;
234 | }
235 | 
236 | @media screen and (min-width: 481px) and (max-width: 1023px) {
237 |   .main-nav__link {
238 |     font-size: 14px;
239 |     font-size: 0.875rem;
240 |   }
241 | }
242 | 
243 | .main {
244 |   padding: 60px 0 0;
245 | }
246 | 
247 | @media screen and (min-width: 1024px) {
248 |   .main-section {
249 |     margin: 0 0 0 260px;
250 |   }
251 | }
252 | 
253 | .main-section__title {
254 |   display: block;
255 |   height: 64px;
256 |   margin: 0;
257 |   padding: 0 24px;
258 |   border-bottom: 1px solid #ddd;
259 |   font-size: 22px;
260 |   font-size: 1.375rem;
261 |   font-weight: 600;
262 |   line-height: 64px;
263 | }
264 | 
265 | .main-section__intro {
266 |   margin: 0;
267 |   padding: 24px;
268 |   font-size: 22px;
269 |   font-size: 1.375rem;
270 |   font-weight: 300;
271 | }
272 | 
273 | .main-section__intro a {
274 |   color: #2196F3;
275 |   text-decoration: none;
276 | }
277 | 
278 | .main-section__content {
279 |   padding: 24px;
280 | }
281 | 
282 | .main-section__content p > code {
283 |   padding: 2px 4px;
284 |   font-size: 90%;
285 |   color: #2196F3;
286 |   background-color: #e3f2fd;
287 |   border-radius: 4px;
288 | }
289 | 
290 | .main-section__content p > a {
291 |   color: #2196F3;
292 |   text-decoration: none;
293 | }
294 | 
295 | .main-section__content p:last-child,
296 | .main-section__content ul:last-child {
297 |   margin-bottom: 0;
298 | }
299 | 
300 | .main-section__subtitle {
301 |   font-size: 30px;
302 |   font-size: 1.875rem;
303 |   font-weight: 300;
304 |   line-height: 1;
305 | }
306 | 


--------------------------------------------------------------------------------
/demo/app/core/navMenu.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "text": "Angular-Formly",
 4 |     "link": "https://github.com/formly-js/angular-formly"
 5 |   },
 6 |   {
 7 |     "text": "LumX",
 8 |     "link": "http://ui.lumapps.com/"
 9 |   },
10 |   {
11 |     "text": "GitHub",
12 |     "link": "https://github.com/formly-js/angular-formly-templates-lumx"
13 |   }
14 | ]
15 | 


--------------------------------------------------------------------------------
/demo/app/core/sidebar/sidebar.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   

 3 |     
    
 4 |       
  • 
 5 |       
  • {{::key}}
 8 |         
 9 |         
10 |       
    • 
11 |       
    
12 |         
  • {{::item.text}}
17 |         
    • 
18 |       
    
19 |     

20 |   

21 | 

22 | 
23 | 


--------------------------------------------------------------------------------
/demo/app/core/sidebar/sidebar.js:
--------------------------------------------------------------------------------
 1 | class SidebarCtrl {
 2 |   constructor(SidebarService) {
 3 |     this.sidebarLinks = require('../sidebarMenu.json');
 4 |     this.sidebar = SidebarService;
 5 |   }
 6 | }
 7 | SidebarCtrl.$inject = ['SidebarService'];
 8 | 
 9 | export default () => {
10 |   return {
11 |     scope: {
12 |       items: '@'
13 |     },
14 |     template: require('./sidebar.html'),
15 |     controllerAs: 'vm',
16 |     bindToController: true,
17 |     controller: SidebarCtrl
18 |   };
19 | };
20 | 


--------------------------------------------------------------------------------
/demo/app/core/sidebar/sidebar.service.js:
--------------------------------------------------------------------------------
 1 | class SidebarService {
 2 |   constructor() {
 3 |     this.sidebarIsShown = false;
 4 |     this.items = [false, false, true, false];
 5 |   }
 6 | 
 7 |   toggleSidebar() {
 8 |     this.sidebarIsShown = !this.sidebarIsShown;
 9 |   }
10 | 
11 |   isSidebarShown() {
12 |     return this.sidebarIsShown;
13 |   }
14 | 
15 |   toggleSidebarItem(index) {
16 |     this.items[index] = !this.items[index];
17 |   }
18 | }
19 | 
20 | export default SidebarService;
21 | 


--------------------------------------------------------------------------------
/demo/app/core/sidebarMenu.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "TYPES": [
 3 |     {
 4 |       "state": "input",
 5 |       "text": "Inputs"
 6 |     },
 7 |     {
 8 |       "state": "checkbox",
 9 |       "text": "Checkboxes"
10 |     },
11 |     {
12 |       "state": "switch",
13 |       "text": "Switches"
14 |     },
15 |     {
16 |       "state": "radio",
17 |       "text": "Radio Buttons"
18 |     },
19 |     {
20 |       "state": "select",
21 |       "text": "Selectors"
22 |     },
23 |     {
24 |       "state": "dropdown",
25 |       "text": "Dropdowns"
26 |     },
27 |     {
28 |       "state": "datePicker",
29 |       "text": "Date Picker"
30 |     },
31 |     {
32 |       "state": "flex",
33 |       "text": "Flex"
34 |     }
35 |   ],
36 |   "WRAPPERS": [
37 |     {
38 |       "state": "error",
39 |       "text": "Errors"
40 |     },
41 |     {
42 |       "state": "themes",
43 |       "text": "Themes"
44 |     },
45 |     {
46 |       "state": "inline",
47 |       "text": "Inline"
48 |     }
49 |   ],
50 |   "FEATURES": [
51 |     {
52 |       "state": "modelOptions",
53 |       "text": "Model Options"
54 |     },
55 |     {
56 |       "state": "validators",
57 |       "text": "Validators"
58 |     },
59 |     {
60 |       "state": "expression",
61 |       "text": "Expression Properties"
62 |     },
63 |     {
64 |       "state": "ngModelAttrs",
65 |       "text": "ngModel Atributes"
66 |     },
67 |     {
68 |       "state": "ctrlLink",
69 |       "text": "Controller / Link"
70 |     },
71 |     {
72 |       "state": "watcher",
73 |       "text": "Watchers"
74 |     }
75 |   ],
76 |   "ADVANCED": [
77 |     {
78 |       "state": "googlePlaces",
79 |       "text": "Google Places"
80 |     }, {
81 |       "state": "fileInput",
82 |       "text": "File Input"
83 |     }
84 |   ]
85 | }
86 | 


--------------------------------------------------------------------------------
/demo/app/docs/checkbox.md:
--------------------------------------------------------------------------------
 1 | ### lx-checkbox
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-checkbox'
 6 |   'templateOptions': {
 7 |   'label': 'A checkbox label',
 8 |     'description': 'A checkbox help description,
 9 |     'disabled': false, // ng-disabled
10 |     'checked': false // ng-checked
11 |   }
12 | }
13 | ```
14 | Read more about [LumX checkboxes](http://ui.lumapps.com/css/checkboxes).
15 | 


--------------------------------------------------------------------------------
/demo/app/docs/datePicker.md:
--------------------------------------------------------------------------------
 1 | ### lx-date-picker
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-date-picker'
 6 |   'templateOptions': {
 7 |     'label': 'A checkbox label',
 8 |     'description': 'A description',
 9 |     'required': false, // ng-required
10 |     'disabled': false // ng-disabled
11 |   }
12 | }
13 | ```
14 | Read more about [lx-date-picker](http://ui.lumapps.com/directives/date-picker).
15 | 


--------------------------------------------------------------------------------
/demo/app/docs/error.md:
--------------------------------------------------------------------------------
 1 | ###lx-wrapper-errors
 2 | 
 3 | ```javascript
 4 | {
 5 |   key: 'someKey',
 6 |   type: 'lx-input',
 7 |   wrapper: 'lx-wrapper-errors',
 8 |   templateOptions: {
 9 |     pending: 'Checking...',  // pending message for async validators
10 |     required: true
11 |   },
12 |   validation: {
13 |     messages: [{
14 |       name: 'required',
15 |       message: 'This field is required.'
16 |     }]
17 |   }
18 | }
19 | ```
20 | 


--------------------------------------------------------------------------------
/demo/app/docs/flex.md:
--------------------------------------------------------------------------------
 1 | ### lx-wrapper-flex
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-flex',
 7 |   'templateOptions': {
 8 |     'flex': {
 9 |       'container': 'row', // row | column | row-reverse | column-reverse
10 |           'wrap': 'nowrap', // nowrap | wrap | wrap-reverse
11 |           'align': 'space-between', // flex-start | flex-end | center | space-between | space-around | stretch
12 |           'item': 5  // width (between 1 & 12)
13 |     }
14 |     'className': 'bgc-red-500', // ng-class
15 |     'style': 'height: 200px'
16 |      'fields': [{
17 |           'key': 'modelName',
18 |           'type': 'lx-whatever-type',
19 |           'wrapper': 'lx-wrapper-flex',
20 |           'templateOptions': {
21 |               'flex' {
22 |                 item': '1' // 1-12, if different from default
23 |                 'flex-order': '1', // value for ordering boxes
24 |               }
25 |               'label': 'Some Label'
26 |         }
27 |       }]
28 |   },
29 | }
30 | ```
31 | Read more about [LumX flexbox](http://ui.lumapps.com/css/flexbox).


--------------------------------------------------------------------------------
/demo/app/docs/inline.md:
--------------------------------------------------------------------------------
 1 | ###lx-wrapper-inline
 2 | ```javascript
 3 | {
 4 |   key: 'someKey',
 5 |   type: 'lx-input',
 6 |   wrapper: 'lx-wrapper-inline'
 7 |   templateOptions: {
 8 |     label: 'example',
 9 |     inline: {
10 |       before: 'This is an ',
11 |       after: ' of the inline wrapper'
12 |     }
13 |   }
14 | }
15 | ```
16 | 


--------------------------------------------------------------------------------
/demo/app/docs/input.md:
--------------------------------------------------------------------------------
 1 | ### lx-input
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-input'
 7 |   'templateOptions': {
 8 |     'type': 'text', // html input type values [text, email, password, url, number]
 9 |     'label': 'Some Label', // acts as a placeholder & label
10 |     'description': 'A description below',
11 |     /** styles **/
12 |     'fixedLabel': false, // [default = false (float label), true = fixed label]
13 |     'icon': 'account',
14 |     'theme': 'light', // sets text color [default = 'light', 'dark']
15 |     /** fields **/
16 |     'disabled': false, // ng-disabled
17 |     'required': false, // ng-required
18 |   }
19 | }
20 | ```
21 | 
22 | Read more about [lx-text](http://ui.lumapps.com/directives/text-fields).
23 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/errorDescription.md:
--------------------------------------------------------------------------------
1 | `lx-wrapper-errors` adds validation messages to your field. 
2 | 
3 | Use `formlyValidationMessages.addStringMessage(NAME, MESSAGE)` to add custom validation messages.
4 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/flexDescription.md:
--------------------------------------------------------------------------------
1 | Using flex-box grids for form elements is easy:
2 | 
3 | * Start with a field with a type of `lx-flex`. 
4 | * Inside of the `templateOptions`, you can add `fields: [ ... ]`
5 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/flexNotes.md:
--------------------------------------------------------------------------------
 1 | 
 2 | For greater styling control, use `flex.className` to change classes inside of your inner fields.
 3 | 
 4 | Flex-box options include:
 5 | 
 6 | * `flex.container` - row | column
 7 | * `flex.align` - space-between | space-around | center
 8 | * `flex.gutter` - the width in pixels between fields. Default: '24'.
 9 |  
10 | Elements can have their own flex characters
11 | 
12 | * `flex.item` - the size of the element in proportion to others, default is 1.
13 | * `flex.order` - the order in which elements are organized, starting at 1.
14 | 
15 | 
16 | To adjust input width, text input types can also use a `size` property. 
17 | Other inputs can additionally use `templateOptions.className`, set the `width` to match the class. 
18 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/modelOptionsDescription.md:
--------------------------------------------------------------------------------
1 | Default model options are already pretty good. `AllowInvalid: false & updateOn: blur`. Even so, sometimes you may want to adjust your model options.
2 | 
3 | In the example below:
4 | 
5 | * All fields should only validate when all characters are numbers. Just type a non-number to get a validation message.
6 | * Watch the changes in `formData`
7 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/ngModelAttrsDescription.md:
--------------------------------------------------------------------------------
1 | `ngModelAttrs` lets you add attributes to your form fields. They can be:
2 |  
3 |  * ng-directives (eg. ng-pattern, ng-minlength)
4 |  * custom directives
5 |  
6 |  The title you give your `ngModelAttrs` can be used as its `validation.messages` name. 
7 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/selectNotes.md:
--------------------------------------------------------------------------------
1 | Long lists may load slow. See the "Country Select" as an example.
2 | 


--------------------------------------------------------------------------------
/demo/app/docs/notes/themeDescription.md:
--------------------------------------------------------------------------------
 1 | #####Backgrounds
 2 | Theme backgrounds can be set with a `class` in two places:
 3 | 
 4 | * On the root formly-form element as a `class`:
 5 | ```markup
 6 |   <formly-form class="bgc-red-100"></formly-form>
 7 | ```
 8 | * By styling with a `wrapper: lx-div-wrapper`:
 9 | ```javascript
10 |   wrapper: 'lx-div-wrapper',
11 |   templateOptions: {
12 |     div: {
13 |       className: 'bgc-red-100'
14 |     }
15 |   }
16 | ```
17 | 
18 | #####Themes
19 | 
20 | * Themes default to `templateOptions.theme: light`.
21 | * For readability, dark colored backgrounds should set the `templateOptions.theme: dark`.
22 | 
23 | 


--------------------------------------------------------------------------------
/demo/app/docs/radio.md:
--------------------------------------------------------------------------------
 1 | ### lx-radio API
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-radio-buttons'
 6 |   'templateOptions': {
 7 |     'label': 'Choose an item: ',
 8 |     'disabled': false,
 9 |     'required': false,
10 |     'options': [{
11 |       'name': 'item 1',
12 |       'value': '1', // ng-value
13 |       'description': 'item 1 help description',
14 |       'checked': false, // ng-checked
15 |       'disabled': false, // ng-disabled
16 |       'inline': false
17 |     }]
18 |   }
19 | }
20 | ```
21 | Read more about [LumX radio buttons](http://ui.lumapps.com/css/radio-buttons).
22 | 


--------------------------------------------------------------------------------
/demo/app/docs/select.md:
--------------------------------------------------------------------------------
 1 | ### lx-select
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-select' // 'lx-select-multiple'
 6 |   'templateOptions': {
 7 |     'multiple': true, // {{ default: false}}
 8 |     'label': 'The label', // default: 'Select'
 9 |     'placeholder': 'The placeholder',
10 |     'description': 'A description below',
11 |     'required': false, // ng-required
12 |     'disabled': false, // ng-disabled
13 |     'selected': 'A', // displays current selected property as placeholder
14 |     'selected2': 'B', // optional second placeholder display
15 |     'choice': 'A', // dropdown choice display
16 |     'choice2': 'C', // optional second choice display
17 |     'choices': [{
18 |       'A': 1, 'B': 2, 'C': 3
19 |     }, {
20 |       'A': '4', 'B': '5', 'C': '6', 'D': '7'
21 |     }],
22 |     'minLength': 2,
23 |     'allowClear': false
24 |   }
25 | }
26 | ```
27 | Read more about [lx-select](http://ui.lumapps.com/directives/selects).
28 | 


--------------------------------------------------------------------------------
/demo/app/docs/switch.md:
--------------------------------------------------------------------------------
 1 | ### lx-switch
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-switch'
 6 |   'templateOptions': {
 7 |     'label': 'A switch label',
 8 |     'description': 'A switch help description',
 9 |     'disabled': false, // ng-disabled
10 |     'checked': false, // ng-checked
11 |   }
12 | }
13 | ```
14 | Read more about [LumX switches](http://ui.lumapps.com/css/switches).
15 | 


--------------------------------------------------------------------------------
/demo/app/docs/textarea.md:
--------------------------------------------------------------------------------
 1 | ### lx-textarea
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-textarea'
 7 |   'templateOptions': {
 8 |     'type': 'text', // html input type values [text, email, password, url, number]
 9 |     'label': 'Some Label', // acts as a placeholder & label
10 |     'description': 'A description below',
11 |     'theme': 'light', // sets text color [default = 'light', 'dark']
12 |     'fixedLabel': false, // [default = false (float label), true = fixed label]
13 |     'disabled': false, // ng-disabled
14 |     'required': false, // ng-required
15 |   }
16 | }
17 | ```
18 | 
19 | Read more about [lx-text](http://ui.lumapps.com/directives/text-fields).
20 | 


--------------------------------------------------------------------------------
/demo/app/docs/themes.md:
--------------------------------------------------------------------------------
 1 | ### Method 1: Style the `<formly-form>` element
 2 | 
 3 | ```html
 4 | <formly-form model="vm.formData" fields="vm.formFields" class="bgc-blue-grey-500"></formly-form>
 5 | ```
 6 | Read more about [LumX color styles](http://ui.lumapps.com/css/colors).
 7 | 
 8 | ### Method 2: Style the formly-field div with `lx-wrapper-div`
 9 |   
10 | ```javascript
11 | { key: 'key', 
12 |     type: 'lx-text',
13 |     wrapper: 'lx-wrapper-div' // <- div wrapper
14 |     templateOptions: {
15 |       div: {
16 |         className: 'bgc-blue-grey-500' // <- div background color
17 |       },
18 |       type: 'text',
19 |       label: 'Name',
20 |       theme: 'dark' // <- add if background color is dark for lighter text
21 |    }
22 | }
23 | ```
24 | Read more about [stlying LumX text fields](http://ui.lumapps.com/directives/text-fields).
25 | 


--------------------------------------------------------------------------------
/demo/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/favicon.ico


--------------------------------------------------------------------------------
/demo/app/fields/_fields.module.js:
--------------------------------------------------------------------------------
 1 | export default angular.module('shmck.formFields', [
 2 |   /* TYPES */
 3 |   require('./switch').name,
 4 |   require('./radio').name,
 5 |   require('./select').name,
 6 |   require('./datePicker').name,
 7 |   require('./input').name,
 8 |   require('./dropdown').name,
 9 |   require('./flex').name,
10 |   require('./checkbox').name,
11 |   /* WRAPPERS */
12 |   require('./themes').name,
13 |   require('./inline').name,
14 |   require('./error').name,
15 |   /* FEATURES */
16 |   require('./modelOptions').name,
17 |   require('./validators').name,
18 |   require('./expression').name,
19 |   require('./ngModelAttrs').name,
20 |   require('./controllerLink').name,
21 |   require('./watcher').name,
22 |   /* ADVANCED */
23 |   require('./advanced/_advanced').name
24 |   //,require('./test').name
25 | ]);
26 | 
27 | 


--------------------------------------------------------------------------------
/demo/app/fields/advanced/_advanced.js:
--------------------------------------------------------------------------------
1 | export default angular.module('shmck.formFields.advanced', [
2 |   require('./googlePlaces').name,
3 |   require('./fileInput').name
4 | ]);
5 | 


--------------------------------------------------------------------------------
/demo/app/fields/advanced/file-input.html:
--------------------------------------------------------------------------------
 1 | 

 2 |   

 3 |     
 7 |     
 8 |   

 9 |   

10 |   

11 |      {{::to.downloadBtn}} {{::to.label}}
12 |     
13 |   

14 | 

15 | 


--------------------------------------------------------------------------------
/demo/app/fields/advanced/fileInput.js:
--------------------------------------------------------------------------------
  1 | /* jshint ignore:start */
  2 | const name = 'fileInput';
  3 | 
  4 | function fields() {
  5 |   this.contents = {
  6 |     title: 'File Input'
  7 |   };
  8 | 
  9 |   this.formData = {};
 10 | 
 11 |   this.fields = function () {
 12 |     return [{
 13 |       key: 'someFile',
 14 |       type: 'lx-file-input',
 15 |       templateOptions: {
 16 |         controller: 'worker',
 17 |         controllerAs: 'workerCtrl',
 18 |         uploadFunction: 'fileUpload(e, this.options)',
 19 |         downloadBtn: 'Download',
 20 |         replaceBtn: 'Delete/Replace',
 21 |         label: 'This is some file input'
 22 |       }
 23 |     }, {
 24 |       template: '
Special thanks to SagiMedina@Gmail.com for this example!
'
 25 |     }];
 26 |   };
 27 | }
 28 | 
 29 | // add lx-file-input custom template by SagiMedina@Gmail.com
 30 | function fileInputConfig(formlyConfigProvider) {
 31 |   formlyConfigProvider.setType({
 32 |     name: 'lx-file-input',
 33 |     template: require('./file-input.html')
 34 |   });
 35 | }
 36 | // fileUpload directive by SagiMedina@Gmail.com
 37 | function fileInput($compile) {
 38 | 
 39 |   function link(scope, element, attrs) {
 40 |     directive.controller = attrs.controller;
 41 |     directive.controllerAs = attrs.controllerAs;
 42 |     var htmlText = '';
 45 |     element.replaceWith($compile(htmlText)(scope));
 46 |   }
 47 | 
 48 |   var directive = {
 49 |     restrict: 'E',
 50 |     link: link
 51 |   };
 52 |   return directive;
 53 | }
 54 | 
 55 | // example using s3uploadFile, disabled for the sake of my server
 56 | function worker($q, LxProgressService, $scope) { // , s3upload
 57 |   var vm = this;
 58 |   vm.worker = {};
 59 |   vm.formData = {};
 60 |   vm.fileUpload = fileUpload;
 61 | 
 62 |   function activate() {
 63 |     $scope.$on('fileChange', function(event, data){
 64 |       LxProgressService.linear.hide('#'+data.model);
 65 |       vm.worker[data.model] = {};
 66 |       vm.worker[data.model].url = data.value.replace(/%2F/g, '/');
 67 |       vm.worker[data.model].hasFile = true;
 68 |     });
 69 |     activate();
 70 |   }
 71 | 
 72 |   function fileUpload(file, options){
 73 |     var model = options.key;
 74 |     LxProgressService.linear.show('#5fa2db', '#'+model);
 75 |     //$q.when(s3upload.uploadFile(file, vm.worker.id)).then(function(url){
 76 |     //  var data = { model: model, value: url.data};
 77 |     //  $scope.$emit('fileChange', data);
 78 |     //});
 79 |   }
 80 | }
 81 | 
 82 | // routes
 83 | function stateRoutes($stateProvider) {
 84 |   $stateProvider
 85 |     .state(`${name}`, {
 86 |       url: `/${name}`,
 87 |       views: {
 88 |         'form@': {
 89 |           template: require('main/main.html'),
 90 |           controller: 'MainCtrl as vm',
 91 |           resolve: {
 92 |             formFields: function (fileInputFF) {
 93 |               return fileInputFF.fields;
 94 |             },
 95 |             contents: function (fileInputFF) {
 96 |               return fileInputFF.contents;
 97 |             },
 98 |             formData: function (fileInputFF) {
 99 |               return fileInputFF.formData;
100 |             }
101 |           }
102 |         }
103 |       }
104 |     });
105 | }
106 | 
107 | export default angular.module(`shmck.formFields.advanced.${name}`, [])
108 |   .service(`${name}FF`, fields)
109 |   .config(stateRoutes)
110 |   .config(fileInputConfig)
111 |   .directive('fileUpload', fileInput);
112 | /* jshint ignore:end */
113 | 


--------------------------------------------------------------------------------
/demo/app/fields/advanced/googlePlaces.js:
--------------------------------------------------------------------------------
 1 | const name = 'googlePlaces';
 2 | require('bower_components/angular-google-places-autocomplete/dist/autocomplete.min.css');
 3 | require('imports?angular!bower_components/angular-google-places-autocomplete/dist/autocomplete.min.js');
 4 | 
 5 | function fields() {
 6 |   this.contents = {
 7 |     title: 'Google Places',
 8 |     docsLink: 'https://github.com/kuhnza/angular-google-places-autocomplete'
 9 |   };
10 | 
11 |   this.formData = {};
12 | 
13 |   this.fields = function() {
14 |     return [{
15 |       key: 'location',
16 |       type: 'lx-input',
17 |       templateOptions: {
18 |         icon: 'city',
19 |         fixedLabel: true,
20 |         label: 'Location'
21 |       },
22 |       ngModelAttrs: {
23 |         googlePlaces: {
24 |           attribute: 'g-places-autocomplete',
25 |           bound: 'g-places-autocomplete'
26 |         }
27 |       },
28 |       expressionProperties: {
29 |         'templateOptions.googlePlaces': 'model.text'
30 |       }
31 |     }];
32 |   };
33 | }
34 | 
35 | function stateRoutes($stateProvider) {
36 |   $stateProvider
37 |     .state(`${name}`, {
38 |       url: `/${name}`,
39 |       views: {
40 |         'form@': {
41 |           template: require('main/main.html'),
42 |           controller: 'MainCtrl as vm',
43 |           resolve: {
44 |             formFields: function(googlePlacesFF) {
45 |               return googlePlacesFF.fields;
46 |             },
47 |             contents: function(googlePlacesFF) {
48 |               return googlePlacesFF.contents;
49 |             },
50 |             formData: function(googlePlacesFF) {
51 |               return googlePlacesFF.formData;
52 |             }
53 |           }
54 |         }
55 |       }
56 |     });
57 | }
58 | export default angular.module(`shmck.formFields.advanced.${name}`, [
59 |   'google.places'
60 | ])
61 |   .service(`${name}FF`, fields)
62 |   .config(stateRoutes);
63 | 


--------------------------------------------------------------------------------
/demo/app/fields/checkbox.js:
--------------------------------------------------------------------------------
 1 | const name = 'checkbox';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Checkbox',
 6 |     docFile: 'docs/checkbox.md'
 7 |   };
 8 | 
 9 |   this.formData = {
10 |     hiddenBox: '',
11 |     checkedCheckBox: true,
12 |     helperBox: '',
13 |     disabledBox: '',
14 |     checkedDisabledBox: true
15 |   };
16 | 
17 |   this.fields = function() {
18 |     return [{
19 |       key: 'checkBoxExample',
20 |       type: 'lx-checkbox',
21 |       templateOptions: {
22 |         label: 'Basic Checkbox'
23 |       }
24 |     }, {
25 |       key: 'checkedCheckBox',
26 |       type: 'lx-checkbox',
27 |       templateOptions: {
28 |         label: 'Checked Checkbox',
29 |         checked: true
30 |       }
31 |     }, {
32 |       key: 'helperBox',
33 |       type: 'lx-checkbox',
34 |       templateOptions: {
35 |         label: 'Checkbox with Helper',
36 |         description: 'Explaining a little more'
37 |       }
38 |     }, {
39 |       key: 'disabledBox',
40 |       type: 'lx-checkbox',
41 |       templateOptions: {
42 |         label: 'Disabled Box',
43 |         disabled: true
44 |       }
45 |     }, {
46 |       key: 'checkedDisabledBox',
47 |       type: 'lx-checkbox',
48 |       templateOptions: {
49 |         label: 'Checked & Disabled Box',
50 |         disabled: true,
51 |         checked: true
52 |       }
53 |     }];
54 |   };
55 | }
56 | 
57 | function stateRoutes($stateProvider) {
58 |   $stateProvider
59 |     .state(`${name}`, {
60 |       url: `/${name}`,
61 |       views: {
62 |         'form@': {
63 |           template: require('main/main.html'),
64 |           controller: 'MainCtrl as vm',
65 |           resolve: {
66 |             formFields: function(checkboxFF) {
67 |               return checkboxFF.fields;
68 |             },
69 |             contents: function(checkboxFF) {
70 |               return checkboxFF.contents;
71 |             },
72 |             formData: function(checkboxFF) {
73 |               return checkboxFF.formData;
74 |             }
75 |           }
76 |         }
77 |       }
78 |     });
79 | }
80 | export default angular.module(`shmck.formFields.${name}`, [])
81 |   .service(`${name}FF`, fields)
82 |   .config(stateRoutes);
83 | 


--------------------------------------------------------------------------------
/demo/app/fields/controllerLink.js:
--------------------------------------------------------------------------------
 1 | const name = 'ctrlLink';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Controller / Link',
 6 |     docsLink: 'http://formly-js.github.io/angular-formly/#/example/advanced/custom-controller-and-link'
 7 |   };
 8 | 
 9 |   this.formData = {
10 |     logToConsole: false,
11 |     confirmation: false
12 |   };
13 | 
14 |   this.fields = function(window) {
15 |     return [{
16 |       key: 'logToConsole',
17 |       type: 'lx-checkbox',
18 |       templateOptions: {
19 |         label: 'Check the console'
20 |       },
21 |       controller: function() {
22 |         console.log('Hi from controller!');
23 |       },
24 |       link: function() {
25 |         console.log('Hi from link function!');
26 |       }
27 |     }, {
28 |       key: 'confirmation',
29 |       type: 'lx-checkbox',
30 |       templateOptions: {
31 |         label: 'Confirmation Message.'
32 |       },
33 |       link: function(scope, el) {
34 |         el.bind('click', function() {
35 |           var confirmation = confirm('Are you sure?');
36 |           if (confirmation) {
37 |             el.unbind('click');
38 |           } else {
39 |             window.event.preventDefault();
40 |           }
41 |         });
42 |       }
43 |     }];
44 |   };
45 | }
46 | 
47 | function stateRoutes($stateProvider) {
48 |   $stateProvider
49 |     .state(`${name}`, {
50 |       url: `/${name}`,
51 |       views: {
52 |         'form@': {
53 |           template: require('main/main.html'),
54 |           controller: 'MainCtrl as vm',
55 |           resolve: {
56 |             formFields: function(ctrlLinkFF) {
57 |               return ctrlLinkFF.fields;
58 |             },
59 |             contents: function(ctrlLinkFF) {
60 |               return ctrlLinkFF.contents;
61 |             },
62 |             formData: function(ctrlLinkFF) {
63 |               return ctrlLinkFF.formData;
64 |             }
65 |           }
66 |         }
67 |       }
68 |     });
69 | }
70 | export default angular.module(`shmck.formFields.${name}`, [])
71 |   .service(`${name}FF`, fields)
72 |   .config(stateRoutes);
73 | 
74 | 


--------------------------------------------------------------------------------
/demo/app/fields/datePicker.js:
--------------------------------------------------------------------------------
 1 | const name = 'datePicker';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Date Picker',
 6 |     docFile: 'docs/datePicker.md'
 7 |   };
 8 | 
 9 |   this.formData = {};
10 | 
11 |   this.fields = function() {
12 |     return [{
13 |       key: 'datePicker',
14 |       type: 'lx-date-picker',
15 |       templateOptions: {
16 |         label: 'Pick a Date'
17 |       }
18 |     }];
19 |   };
20 | }
21 | function stateRoutes($stateProvider) {
22 |   $stateProvider
23 |     .state(`${name}`, {
24 |       url: `/${name}`,
25 |       views: {
26 |         'form@': {
27 |           template: require('main/main.html'),
28 |           controller: 'MainCtrl as vm',
29 |           resolve: {
30 |             formFields: function(datePickerFF) {
31 |               return datePickerFF.fields;
32 |             },
33 |             contents: function(datePickerFF) {
34 |               return datePickerFF.contents;
35 |             },
36 |             formData: function(datePickerFF) {
37 |               return datePickerFF.formData;
38 |             }
39 |           }
40 |         }
41 |       }
42 |     });
43 | }
44 | export default angular.module(`shmck.formFields.${name}`, [])
45 |   .service(`${name}FF`, fields)
46 |   .config(stateRoutes);
47 | 
48 | 


--------------------------------------------------------------------------------
/demo/app/fields/dropdown.js:
--------------------------------------------------------------------------------
 1 | const name = 'dropdown';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Dropdown'
 6 |     //markdownFile: 'app/docs/dropdown.md'
 7 |   };
 8 | 
 9 |   this.formData = {
10 |     dropdown: ''
11 |   };
12 | 
13 |   this.fields = function() {
14 |     return [{
15 |       key: 'dropdown',
16 |       type: 'lx-dropdown',
17 |       templateOptions: {
18 |         label: 'Select',
19 |         className: 'btn--m btn--black btn--flat',
20 |         options: [{
21 |           text: 'Item 1',
22 |           action: function() {
23 |             alert('item1');
24 |           }
25 |         }, {
26 |           text: 'Item 2',
27 |           action: function() {
28 |             alert('item2');
29 |           }
30 |         }, {
31 |           text: 'Item 3',
32 |           action: function() {
33 |             alert('item3');
34 |           }
35 |         }]
36 |       }
37 |     }, {
38 |       key: 'dropdown',
39 |       type: 'lx-dropdown',
40 |       templateOptions: {
41 |         className: 'btn--m btn--black btn--icon',
42 |         icon: 'dots-vertical',
43 |         options: [{
44 |           text: 'Item 1',
45 |           action: function() {
46 |             alert('item1');
47 |           }
48 |         }, {
49 |           text: 'Item 2',
50 |           action: function() {
51 |             alert('item2');
52 |           }
53 |         }, {
54 |           text: 'Item 3',
55 |           action: function() {
56 |             alert('item3');
57 |           }
58 |         }]
59 |       }
60 |     }];
61 |   };
62 | }
63 | function stateRoutes($stateProvider) {
64 |   $stateProvider
65 |     .state(`${name}`, {
66 |       url: `/${name}`,
67 |       views: {
68 |         'form@': {
69 |           template: require('main/main.html'),
70 |           controller: 'MainCtrl as vm',
71 |           resolve: {
72 |             formFields: function(dropdownFF) {
73 |               return dropdownFF.fields;
74 |             },
75 |             contents: function(dropdownFF) {
76 |               return dropdownFF.contents;
77 |             },
78 |             formData: function(dropdownFF) {
79 |               return dropdownFF.formData;
80 |             }
81 |           }
82 |         }
83 |       }
84 |     });
85 | }
86 | export default angular.module(`shmck.formFields.${name}`, [])
87 |   .service(`${name}FF`, fields)
88 |   .config(stateRoutes);
89 | 


--------------------------------------------------------------------------------
/demo/app/fields/error.js:
--------------------------------------------------------------------------------
  1 | const name = 'error';
  2 | 
  3 | 
  4 | function fields() {
  5 |   this.contents = {
  6 |     title: 'Error Notification',
  7 |     subhead: 'easy validation tools',
  8 |     docFile: 'docs/error.md',
  9 |     description: 'docs/notes/errorDescription.md'
 10 |   };
 11 | 
 12 |   this.formData = {
 13 |     email: '',
 14 |     url: ''
 15 |   };
 16 | 
 17 |   this.fields = function() {
 18 |     return [{
 19 |       key: 'email',
 20 |       type: 'lx-input',
 21 |       wrapper: 'lx-wrapper-errors',
 22 |       templateOptions: {
 23 |         type: 'email',
 24 |         label: 'Email',
 25 |         fixedLabel: true,
 26 |         required: true
 27 |       },
 28 |       validation: {
 29 |         messages: {
 30 |           email: function() {
 31 |             return 'That doesn\'t look like a real email address.';
 32 |           }
 33 |         }
 34 |       },
 35 |       modelOptions: {
 36 |         allowInvalid: false
 37 |       }
 38 |     }, {
 39 |       key: 'url',
 40 |       type: 'lx-input',
 41 |       wrapper: 'lx-wrapper-errors',
 42 |       templateOptions: {
 43 |         type: 'url',
 44 |         fixedLabel: true,
 45 |         label: 'Link to a url'
 46 |       },
 47 |       validation: {
 48 |         messages: {
 49 |           url: function() {
 50 |             return 'For example: http://www.google.com';
 51 |           }
 52 |         }
 53 |       },
 54 |       modelOptions: {
 55 |         allowInvalid: false
 56 |       }
 57 |       //}, {
 58 |       //  key: 'textPattern',
 59 |       //  type: 'lx-input',
 60 |       //  wrapper: 'lx-wrapper-errors',
 61 |       //  templateOptions: {
 62 |       //    type: 'text',
 63 |       //    fixedLabel: true,
 64 |       //    label: 'Four letter word    |  pattern',
 65 |       //    pattern: /^[a-zA-Z]{4}$/,
 66 |       //    required: true
 67 |       //  },
 68 |       //  validation: {
 69 |       //    messages: [{
 70 |       //      name: 'pattern',
 71 |       //      message: 'Must be a four letter word.'
 72 |       //    }]
 73 |       //  },
 74 |       //  ngModelAttrs: {
 75 |       //    pattern: {
 76 |       //      attribute: 'pattern'
 77 |       //    }
 78 |       //  }
 79 |     }];
 80 |   };
 81 | }
 82 | function stateRoutes($stateProvider) {
 83 |   $stateProvider
 84 |     .state(`${name}`, {
 85 |       url: `/${name}`,
 86 |       views: {
 87 |         'form@': {
 88 |           template: require('main/main.html'),
 89 |           controller: 'MainCtrl as vm',
 90 |           resolve: {
 91 |             formFields: function(errorFF) {
 92 |               return errorFF.fields;
 93 |             },
 94 |             contents: function(errorFF) {
 95 |               return errorFF.contents;
 96 |             },
 97 |             formData: function(errorFF) {
 98 |               return errorFF.formData;
 99 |             }
100 |           }
101 |         }
102 |       }
103 |     });
104 | }
105 | 
106 | function iceCream() {
107 |   return {
108 |     restrict: 'A',
109 |     require: '?ngModel',
110 |     link: function(scope, element, attributes, ngModel) {
111 |       ngModel.$validators.iceCream = function(modelValue) {
112 |         var flavors = ['chocolate', 'vanilla', 'strawberry'];
113 |         return flavors.indexOf(modelValue.toLowerCase()) !== -1;
114 |       };
115 |     }
116 |   };
117 | }
118 | 
119 | export default angular.module(`shmck.formFields.${name}`, [])
120 |   .service(`${name}FF`, fields)
121 |   .config(stateRoutes)
122 |   .directive('iceCream', iceCream);
123 | 
124 | 
125 | 


--------------------------------------------------------------------------------
/demo/app/fields/expression.js:
--------------------------------------------------------------------------------
  1 | const name = 'expression';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Expression Properties',
  6 |     docsLink: 'http://formly-js.github.io/angular-formly/#/example/intro/expression-properties'
  7 |   };
  8 | 
  9 |   this.formData = {
 10 |     showHidden: '',
 11 |     disableNextField: '',
 12 |     probablyNotNeeded: '',
 13 |     setMaxLength: 4,
 14 |     textWithSetMaxLength: 'four',
 15 |     editLabel: ''
 16 |   };
 17 | 
 18 |   this.fields = function() {
 19 |     return [{
 20 |       key: 'showHidden',
 21 |       type: 'lx-checkbox',
 22 |       templateOptions: {
 23 |         label: 'Show Hidden Field'
 24 |       }
 25 |     }, {
 26 |       template: '
This was hidden!
',
 27 |       expressionProperties: {
 28 |         hide: '!model.showHidden'
 29 |       }
 30 |     }, {
 31 |       key: 'disableNextField',
 32 |       type: 'lx-checkbox',
 33 |       templateOptions: {
 34 |         label: 'Disable Next Field'
 35 |       }
 36 |     }, {
 37 |       key: 'probablyNotNeeded',
 38 |       type: 'lx-checkbox',
 39 |       templateOptions: {
 40 |         label: 'Can Be Disabled',
 41 |       },
 42 |       expressionProperties: {
 43 |         'templateOptions.disabled': 'model.disableNextField'
 44 |       }
 45 |     }, {
 46 |       key: 'setMaxLength',
 47 |       type: 'lx-input',
 48 |       templateOptions: {
 49 |         type: 'number',
 50 |         label: 'Set next field max length'
 51 |       }
 52 |     }, {
 53 |       key: 'textWithSetMaxLength',
 54 |       type: 'lx-input',
 55 |       templateOptions: {
 56 |         label: 'Text with max length set'
 57 |       },
 58 |       ngModelAttrs: {
 59 |         maxLength: {
 60 |           bound: 'ng-maxlength'
 61 |         }
 62 |       },
 63 |       expressionProperties: {
 64 |         'templateOptions.maxLength': 'model.setMaxLength'
 65 |       }
 66 |     }, {
 67 |       key: 'editLabel',
 68 |       type: 'lx-input',
 69 |       templateOptions: {
 70 |         label: 'Text'
 71 |       },
 72 |       expressionProperties: {
 73 |         'templateOptions.label': '$viewValue || "Edit this label"'
 74 |       }
 75 |     }];
 76 |   };
 77 | }
 78 | 
 79 | function stateRoutes($stateProvider) {
 80 |   $stateProvider
 81 |     .state(`${name}`, {
 82 |       url: `/${name}`,
 83 |       views: {
 84 |         'form@': {
 85 |           template: require('main/main.html'),
 86 |           controller: 'MainCtrl as vm',
 87 |           resolve: {
 88 |             formFields: function(expressionFF) {
 89 |               return expressionFF.fields;
 90 |             },
 91 |             contents: function(expressionFF) {
 92 |               return expressionFF.contents;
 93 |             },
 94 |             formData: function(expressionFF) {
 95 |               return expressionFF.formData;
 96 |             }
 97 |           }
 98 |         }
 99 |       }
100 |     });
101 | }
102 | export default angular.module(`shmck.formFields.${name}`, [])
103 |   .service(`${name}FF`, fields)
104 |   .config(stateRoutes);
105 | 


--------------------------------------------------------------------------------
/demo/app/fields/flex.js:
--------------------------------------------------------------------------------
  1 | const name = 'flex';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'FlexBox Wrappers',
  6 |     subhead: 'lx-flex',
  7 |     description: 'docs/notes/flexDescription.md',
  8 |     docFile: 'docs/flex.md',
  9 |     notes: 'docs/notes/flexNotes.md'
 10 |   };
 11 | 
 12 |   this.formData = {
 13 |     rowItem1: '',
 14 |     rowItem2: '',
 15 |     rowItem3: '',
 16 |     columnItem1: '',
 17 |     columnItem2: '',
 18 |     columnItem3: '',
 19 |     mixedItem1: '',
 20 |     addressStreetNumber: '',
 21 |     addressStreetName: '',
 22 |     addressStreetType: ''
 23 |   };
 24 | 
 25 |   this.fields = function() {
 26 |     return [{
 27 |       template: '
Space-between
'
 28 |     }, {
 29 |       type: 'lx-flex',
 30 |       templateOptions: {
 31 |         flex: {
 32 |           container: 'row',
 33 |           align: 'space-between',
 34 |           item: 5
 35 |         },
 36 | 
 37 |         fields: [
 38 |           {
 39 |             type: 'lx-input',
 40 |             key: 'firstName',
 41 |             templateOptions: {
 42 |               label: 'First Name'
 43 |             }
 44 |           },
 45 |           {
 46 |             type: 'lx-input',
 47 |             key: 'lastName',
 48 |             templateOptions: {
 49 |               label: 'Last Name'
 50 |             }
 51 |           }
 52 |         ]
 53 |       }
 54 |     }, {
 55 |       template: '
Center
'
 56 |     }, {
 57 |       type: 'lx-flex',
 58 |       templateOptions: {
 59 |         flex: {
 60 |           container: 'column',
 61 |           align: 'space-around center',
 62 |           gutter: 24,
 63 |           item: 10
 64 |         },
 65 |         'fields': [{
 66 |           key: 'columnItem1',
 67 |           type: 'lx-input',
 68 |           templateOptions: {
 69 |             type: 'text',
 70 |             fixedLabel: true,
 71 |             label: 'Column'
 72 |           }
 73 |         }, {
 74 |           key: 'columnItem2',
 75 |           type: 'lx-input',
 76 |           templateOptions: {
 77 |             type: 'text',
 78 |             fixedLabel: true,
 79 |             label: 'Column'
 80 |           }
 81 |         }, {
 82 |           key: 'columnItem3',
 83 |           type: 'lx-input',
 84 |           templateOptions: {
 85 |             type: 'text',
 86 |             fixedLabel: true,
 87 |             label: 'Column'
 88 |           }
 89 |         }]
 90 |       }
 91 |     }, {
 92 |       template: '
Center Center
'
 93 |     }, {
 94 |       type: 'lx-flex',
 95 |       templateOptions: {
 96 |         flex: {
 97 |           container: 'row',
 98 |           align: 'center center',
 99 |           gutter: 8,
100 |           item: 3
101 |         },
102 |         'fields': [{
103 |           key: 'addressStreetNumber',
104 |           type: 'lx-input',
105 |           templateOptions: {
106 |             type: 'number',
107 |             fixedLabel: true,
108 |             label: 'Street #'
109 |           }
110 |         }, {
111 |           key: 'addressStreetName',
112 |           type: 'lx-input',
113 |           templateOptions: {
114 |             type: 'text',
115 |             fixedLabel: true,
116 |             label: 'Street'
117 |           }
118 |         }, {
119 |           key: 'addressStreetType',
120 |           type: 'lx-select',
121 |           wrapper: 'lx-wrapper-div',
122 |           templateOptions: {
123 |             div: {
124 |               style: {
125 |                 position: 'relative',
126 |                 top: '-23px'
127 |               }
128 |             },
129 |             placeholder: 'Street Type',
130 |             selected: 'type',
131 |             choice: 'type',
132 |             options: [
133 |               {type: 'St.'},
134 |               {type: 'Ave.'},
135 |               {type: 'Blvd.'},
136 |               {type: 'Cres.'}
137 |             ]
138 |           }
139 |         }]
140 |       }
141 |     }];
142 |   };
143 | }
144 | 
145 | function stateRoutes($stateProvider) {
146 |   $stateProvider
147 |     .state(`${name}`, {
148 |       url: `/${name}`,
149 |       views: {
150 |         'form@': {
151 |           template: require('main/main.html'),
152 |           controller: 'MainCtrl as vm',
153 |           resolve: {
154 |             formFields: function(flexFF) {
155 |               return flexFF.fields;
156 |             },
157 |             contents: function(flexFF) {
158 |               return flexFF.contents;
159 |             },
160 |             formData: function(flexFF) {
161 |               return flexFF.formData;
162 |             }
163 |           }
164 |         }
165 |       }
166 |     });
167 | }
168 | export default angular.module(`shmck.formFields.${name}`, [])
169 |   .service(`${name}FF`, fields)
170 |   .config(stateRoutes);
171 | 
172 | 


--------------------------------------------------------------------------------
/demo/app/fields/inline.js:
--------------------------------------------------------------------------------
 1 | const name = 'inline';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Inline Wrapper',
 6 |     docFile: 'docs/inline.md'
 7 |   };
 8 | 
 9 |   this.formData = {};
10 | 
11 |   this.fields = function() {
12 |     return [{
13 |       key: 'workPlace',
14 |       type: 'lx-input',
15 |       wrapper: 'lx-wrapper-inline',
16 |       templateOptions: {
17 |         inline: {
18 |           before: 'I work at ',
19 |           after: '.'
20 |         },
21 |         fixedLabel: true,
22 |         label: ' workplace'
23 |       },
24 |     }, {
25 |       key: 'experience',
26 |       type: 'lx-input',
27 |       wrapper: 'lx-wrapper-inline',
28 |       templateOptions: {
29 |         inline: {
30 |           before: 'I\'ve been working there for ',
31 |           after: ' years.'
32 |         },
33 |         type: 'number',
34 |         label: ' # years',
35 |         fixedLabel: true
36 |       }
37 |     }, {
38 |       key: 'salaryHope',
39 |       type: 'lx-select',
40 |       wrapper: 'lx-wrapper-inline',
41 |       templateOptions: {
42 |         inline: {
43 |           before: 'I hope to make ',
44 |           after: ' per year.',
45 |           contentStyle: {
46 |             bottom: '-11px'
47 |           }
48 |         },
49 |         placeholder: 'Salary Expectation',
50 |         selected: 'range',
51 |         choice: 'range',
52 |         options: [{
53 |           range: 'under $30,000'
54 |         }, {
55 |           range: 'between $30 & 50,000'
56 |         }, {
57 |           range: 'between $50 & 75,000'
58 |         }, {
59 |           range: 'over $75,000'
60 |         }]
61 |       }
62 |     }];
63 |   };
64 | }
65 | 
66 | function stateRoutes($stateProvider) {
67 |   $stateProvider
68 |     .state(`${name}`, {
69 |       url: `/${name}`,
70 |       views: {
71 |         'form@': {
72 |           template: require('main/main.html'),
73 |           controller: 'MainCtrl as vm',
74 |           resolve: {
75 |             formFields: function(inlineFF) {
76 |               return inlineFF.fields;
77 |             },
78 |             contents: function(inlineFF) {
79 |               return inlineFF.contents;
80 |             },
81 |             formData: function(inlineFF) {
82 |               return inlineFF.formData;
83 |             }
84 |           }
85 |         }
86 |       }
87 |     });
88 | }
89 | export default angular.module(`shmck.formFields.${name}`, [])
90 |   .service(`${name}FF`, fields)
91 |   .config(stateRoutes);
92 | 


--------------------------------------------------------------------------------
/demo/app/fields/input.js:
--------------------------------------------------------------------------------
  1 | const name = 'input';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Input Fields',
  6 |     subhead: 'input & textarea',
  7 |     docFile: 'docs/input.md'
  8 |   };
  9 | 
 10 |   this.formData = {
 11 |     floatLabel: '',
 12 |     fixedLabel: '',
 13 |     fixedIcon: '',
 14 |     disabledText: '',
 15 |     textArea: `Once upon a midnight dreary, while I pondered, weak and weary,
 16 |       Over many a quaint and curious volume of forgotten forms—`,
 17 |     validatedText: ''
 18 |   };
 19 | 
 20 |   this.fields = function() {
 21 |     return [{
 22 |       key: 'floatLabel',
 23 |       type: 'lx-input',
 24 |       templateOptions: {
 25 |         type: 'text',
 26 |         label: 'Float Label'
 27 |       }
 28 |     }, {
 29 |       key: 'fixedLabel',
 30 |       type: 'lx-input',
 31 |       templateOptions: {
 32 |         type: 'text',
 33 |         label: 'Fixed Label',
 34 |         fixedLabel: true
 35 |       }
 36 |     }, {
 37 |       key: 'fixedIcon',
 38 |       type: 'lx-input',
 39 |       templateOptions: {
 40 |         type: 'text',
 41 |         fixedLabel: true,
 42 |         icon: 'account',
 43 |         label: 'With Icon'
 44 |       }
 45 |     }, {
 46 |       key: 'disabledText',
 47 |       type: 'lx-input',
 48 |       templateOptions: {
 49 |         type: 'text',
 50 |         label: 'Disabled',
 51 |         fixedLabel: true,
 52 |         disabled: true
 53 |       }
 54 |     }, {
 55 |       key: 'textArea',
 56 |       type: 'lx-textarea',
 57 |       templateOptions: {
 58 |         label: 'Textarea example'
 59 |       }
 60 |     }, {
 61 |       key: 'validatedText',
 62 |       type: 'lx-input',
 63 |       wrapper: 'lx-wrapper-errors',
 64 |       templateOptions: {
 65 |         type: 'password',
 66 |         label: 'Validation Example',
 67 |         minlength: 4,
 68 |         maxlength: 8,
 69 |         required: true
 70 |       },
 71 |       ngModelAttrs: {
 72 |         minlength: {
 73 |           bound: 'ng-minlength',
 74 |           attribute: 'minlength'
 75 |         },
 76 |         maxlength: {
 77 |           bound: 'ng-maxlength',
 78 |           attribute: 'maxlength'
 79 |         }
 80 | 
 81 |       },
 82 |       modelOptions: {
 83 |         allowInvalid: false,
 84 |         updateOn: 'keydown blur',
 85 |         debounce: {
 86 |           keydown: 100,
 87 |           default: 100,
 88 |           blur: 0
 89 |         }
 90 |       }
 91 |     }];
 92 |   };
 93 | }
 94 | 
 95 | function stateRoutes($stateProvider) {
 96 |   $stateProvider
 97 |     .state(`${name}`, {
 98 |       url: `/${name}`,
 99 |       views: {
100 |         'form@': {
101 |           template: require('main/main.html'),
102 |           controller: 'MainCtrl as vm',
103 |           resolve: {
104 |             formFields: function(inputFF) {
105 |               return inputFF.fields;
106 |             },
107 |             contents: function(inputFF) {
108 |               return inputFF.contents;
109 |             },
110 |             formData: function(inputFF) {
111 |               return inputFF.formData;
112 |             }
113 |           }
114 |         }
115 |       }
116 |     });
117 | }
118 | export default angular.module(`shmck.formFields.${name}`, [])
119 |   .service(`${name}FF`, fields)
120 |   .config(stateRoutes);
121 | 


--------------------------------------------------------------------------------
/demo/app/fields/modelOptions.js:
--------------------------------------------------------------------------------
  1 | const name = 'modelOptions';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Model Options',
  6 |     description: 'docs/notes/modelOptionsDescription.md',
  7 |     docsLink: 'https://docs.angularjs.org/api/ng/directive/ngModelOptions'
  8 |   };
  9 | 
 10 |   this.formData = {
 11 |     defaultOnBlur: '',
 12 |     onKeyUp: '',
 13 |     onlyValid: '',
 14 |     mixed: ''
 15 |   };
 16 | 
 17 |   var numbersRegex = /^\d+$/;
 18 |   var numbersOnlyValidator = {
 19 |     numbersOnly: {
 20 |       expression: function(viewValue, modelValue) {
 21 |         var value = viewValue || modelValue || '';
 22 |         return numbersRegex.test(value);
 23 |       },
 24 |       message: '"Numbers only please."'
 25 |     }
 26 |   };
 27 | 
 28 |   this.fields = function() {
 29 |     return [{
 30 |       key: 'defaultOnBlur',
 31 |       type: 'lx-input',
 32 |       wrapper: 'lx-wrapper-errors',
 33 |       templateOptions: {
 34 |         fixedLabel: true,
 35 |         required: true,
 36 |         label: 'When user changes fields'
 37 |       },
 38 |       modelOptions: {
 39 |         updateOn: 'default blur'
 40 |       },
 41 |       validators: numbersOnlyValidator
 42 |     }, {
 43 |       key: 'onKeyUp',
 44 |       type: 'lx-input',
 45 |       wrapper: 'lx-wrapper-errors',
 46 |       templateOptions: {
 47 |         fixedLabel: true,
 48 |         required: true,
 49 |         label: 'About when user stops typing'
 50 |       },
 51 |       modelOptions: {
 52 |         updateOn: 'keyup',
 53 |         debounce: {
 54 |           keyup: 300
 55 |         }
 56 |       },
 57 |       validators: numbersOnlyValidator
 58 |     }, {
 59 |       key: 'onlyValid',
 60 |       type: 'lx-input',
 61 |       wrapper: 'lx-wrapper-errors',
 62 |       templateOptions: {
 63 |         fixedLabel: true,
 64 |         required: true,
 65 |         label: 'Only saves when data is valid'
 66 |       },
 67 |       modelOptions: {
 68 |         allowInvalid: false
 69 |       },
 70 |       validators: numbersOnlyValidator
 71 |     }, {
 72 |       key: 'mixed',
 73 |       type: 'lx-input',
 74 |       wrapper: 'lx-wrapper-errors',
 75 |       templateOptions: {
 76 |         fixedLabel: true,
 77 |         required: true,
 78 |         label: 'On blur or end of typing, only valid'
 79 |       },
 80 |       modelOptions: {
 81 |         allowInvalid: false,
 82 |         updateOn: 'keyup blur',
 83 |         debounce: {
 84 |           blur: 0,
 85 |           keyUp: 300
 86 |         }
 87 |       },
 88 |       validators: numbersOnlyValidator
 89 |     }];
 90 |   };
 91 | }
 92 | 
 93 | function stateRoutes($stateProvider) {
 94 |   $stateProvider
 95 |     .state(`${name}`, {
 96 |       url: `/${name}`,
 97 |       views: {
 98 |         'form@': {
 99 |           template: require('main/main.html'),
100 |           controller: 'MainCtrl as vm',
101 |           resolve: {
102 |             formFields: function(modelOptionsFF) {
103 |               return modelOptionsFF.fields;
104 |             },
105 |             contents: function(modelOptionsFF) {
106 |               return modelOptionsFF.contents;
107 |             },
108 |             formData: function(modelOptionsFF) {
109 |               return modelOptionsFF.formData;
110 |             }
111 |           }
112 |         }
113 |       }
114 |     });
115 | }
116 | 
117 | export default angular.module(`shmck.formFields.${name}`, [])
118 |   .service(`${name}FF`, fields)
119 |   .config(stateRoutes);
120 | 
121 | 


--------------------------------------------------------------------------------
/demo/app/fields/ngModelAttrs.js:
--------------------------------------------------------------------------------
 1 | const name = 'ngModelAttrs';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'ngModelAttrs',
 6 |     docsLink: 'http://formly-js.github.io/angular-formly/#/example/very-advanced/ngModelAttrs',
 7 |     description: 'docs/notes/ngModelAttrsDescription.md'
 8 |   };
 9 | 
10 |   this.formData = {};
11 | 
12 |   this.fields = function() {
13 |     return [{
14 |       key: 'password',
15 |       type: 'lx-input',
16 |       templateOptions: {
17 |         type: 'password',
18 |         label: 'Password (8 character maximum)',
19 |         maxlength: 8,
20 |         required: true
21 |       },
22 |       ngModelAttrs: {
23 |         maxlength: {
24 |           attribute: 'maxlength'
25 |         }
26 |       }
27 |     }];
28 |   };
29 | }
30 | 
31 | function stateRoutes($stateProvider) {
32 |   $stateProvider
33 |     .state(`${name}`, {
34 |       url: `/${name}`,
35 |       views: {
36 |         'form@': {
37 |           template: require('main/main.html'),
38 |           controller: 'MainCtrl as vm',
39 |           resolve: {
40 |             formFields: function(ngModelAttrsFF) {
41 |               return ngModelAttrsFF.fields;
42 |             },
43 |             contents: function(ngModelAttrsFF) {
44 |               return ngModelAttrsFF.contents;
45 |             },
46 |             formData: function(ngModelAttrsFF) {
47 |               return ngModelAttrsFF.formData;
48 |             }
49 |           }
50 |         }
51 |       }
52 |     });
53 | }
54 | 
55 | export default angular.module(`shmck.formFields.${name}`, [])
56 |   .service(`${name}FF`, fields)
57 |   .config(stateRoutes);
58 | 
59 | 


--------------------------------------------------------------------------------
/demo/app/fields/radio.js:
--------------------------------------------------------------------------------
  1 | const name = 'radio';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Radio',
  6 |     docFile: 'docs/radio.md'
  7 |   };
  8 | 
  9 |   this.formData = {
 10 |     radio: '',
 11 |     radioWithDescription: '',
 12 |     radioInline: ''
 13 |   };
 14 | 
 15 |   this.fields = function() {
 16 |     return [{
 17 |       key: 'radio',
 18 |       type: 'lx-radio',
 19 |       templateOptions: {
 20 |         label: 'What\'s your favorite number?',
 21 |         options: [{
 22 |           name: 'One',
 23 |           value: 1
 24 |         }, {
 25 |           name: 'Seven',
 26 |           value: 7
 27 |         }, {
 28 |           name: 'Thirteen',
 29 |           value: 13,
 30 |           disabled: true
 31 |         }]
 32 |       }
 33 |     }, {
 34 |       key: 'radioWithDescription',
 35 |       type: 'lx-radio',
 36 |       templateOptions: {
 37 |         label: 'What\'s your least favorite number?',
 38 |         options: [{
 39 |           name: 'One',
 40 |           value: 1,
 41 |           description: 'The First'
 42 |         }, {
 43 |           name: 'Seven',
 44 |           value: 7,
 45 |           description: 'The Lucky One'
 46 |         }, {
 47 |           name: 'Thirteen',
 48 |           value: 13,
 49 |           description: 'The Unlucky One',
 50 |           disabled: true
 51 |         }]
 52 |       }
 53 |     }, {
 54 |       key: 'radioInline',
 55 |       type: 'lx-radio',
 56 |       templateOptions: {
 57 |         label: 'What\'s your least favorite number?',
 58 |         inline: true,
 59 |         options: [{
 60 |           name: 'One',
 61 |           value: 1
 62 |         }, {
 63 |           name: 'Seven',
 64 |           value: 7
 65 |         }, {
 66 |           name: 'Thirteen',
 67 |           value: 13,
 68 |           disabled: true
 69 |         }]
 70 |       }
 71 |     }];
 72 |   };
 73 | }
 74 | 
 75 | 
 76 | function stateRoutes($stateProvider) {
 77 |   $stateProvider
 78 |     .state(`${name}`, {
 79 |       url: `/${name}`,
 80 |       views: {
 81 |         'form@': {
 82 |           template: require('main/main.html'),
 83 |           controller: 'MainCtrl as vm',
 84 |           resolve: {
 85 |             formFields: function(radioFF) {
 86 |               return radioFF.fields;
 87 |             },
 88 |             contents: function(radioFF) {
 89 |               return radioFF.contents;
 90 |             },
 91 |             formData: function(radioFF) {
 92 |               return radioFF.formData;
 93 |             }
 94 |           }
 95 |         }
 96 |       }
 97 |     });
 98 | }
 99 | export default angular.module(`shmck.formFields.${name}`, [])
100 |   .service(`${name}FF`, fields)
101 |   .config(stateRoutes);
102 | 


--------------------------------------------------------------------------------
/demo/app/fields/select.js:
--------------------------------------------------------------------------------
  1 | const name = 'select';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Selectors',
  6 |     subhead: 'select, multiple-select',
  7 |     docFile: 'docs/select.md'
  8 |   };
  9 | 
 10 |   this.formData = {
 11 |     singleSelect: '',
 12 |     singleSelectTwo: '',
 13 |     multipleSelect: ''
 14 |   };
 15 | 
 16 |   this.fields = function() {
 17 |     return [{
 18 |       key: 'singleSelect',
 19 |       type: 'lx-select',
 20 |       templateOptions: {
 21 |         label: 'Basic Single Select',
 22 |         placeholder: 'Choose a Person',
 23 |         selected: 'name',
 24 |         choice: 'name',
 25 |         options: [{
 26 |           name: 'Adam'
 27 |         }, {
 28 |           name: 'Amalie'
 29 |         }, {
 30 |           name: 'Wladimir'
 31 |         }, {
 32 |           name: 'Samantha'
 33 |         }, {
 34 |           name: 'Estefania'
 35 |         }]
 36 |       }
 37 |     }, {
 38 |       template: '
'
 39 |     }, {
 40 |       key: 'singleSelectTwo',
 41 |       type: 'lx-select',
 42 |       templateOptions: {
 43 |         space: true,
 44 |         label: 'Advanced Single Select',
 45 |         placeholder: 'Choose an Email',
 46 |         allowClear: true,
 47 |         selected: 'name',
 48 |         selected2: 'age',
 49 |         choice: 'email',
 50 |         choice2: 'age',
 51 |         options: [
 52 |           {name: 'Adam', email: 'adam@email.com', age: 10},
 53 |           {name: 'Amalie', email: 'amalie@email.com', age: 12},
 54 |           {name: 'Wladimir', email: 'wladimir@email.com', age: 30},
 55 |           {name: 'Samantha', email: 'samantha@email.com', age: 31},
 56 |           {name: 'Estefanía', email: 'estefanía@email.com', age: 16},
 57 |           {name: 'Natasha', email: 'natasha@email.com', age: 54},
 58 |           {name: 'Nicole', email: 'nicole@email.com', age: 43},
 59 |           {name: 'Adrian', email: 'adrian@email.com', age: 21}
 60 |         ]
 61 |       }
 62 |     }, {
 63 |       template: '
'
 64 |     }, {
 65 |       key: 'multipleSelect',
 66 |       type: 'lx-select',
 67 |       templateOptions: {
 68 |         space: true,
 69 |         multiple: true,
 70 |         label: 'Multiple Select',
 71 |         placeholder: 'Choose an Email',
 72 |         selected: 'name',
 73 |         choice: 'email',
 74 |         options: [
 75 |           {name: 'Adam', email: 'adam@email.com', age: 10},
 76 |           {name: 'Amalie', email: 'amalie@email.com', age: 12},
 77 |           {name: 'Wladimir', email: 'wladimir@email.com', age: 30},
 78 |           {name: 'Samantha', email: 'samantha@email.com', age: 31},
 79 |           {name: 'Estefanía', email: 'estefanía@email.com', age: 16},
 80 |           {name: 'Natasha', email: 'natasha@email.com', age: 54},
 81 |           {name: 'Nicole', email: 'nicole@email.com', age: 43},
 82 |           {name: 'Adrian', email: 'adrian@email.com', age: 21}
 83 |         ]
 84 |       }
 85 |     }, {
 86 |       key: 'sectionSelect',
 87 |       type: 'lx-select',
 88 |       templateOptions: {
 89 |         space: true,
 90 |         multiple: true,
 91 |         label: 'Section Select',
 92 |         placeholder: 'Choose a Person',
 93 |         selected: 'name',
 94 |         choice: 'name',
 95 |         options: {
 96 |           'Sub header 1': [
 97 |             {uid: '1', name: 'Adam'},
 98 |             {uid: '2', name: 'Amalie'},
 99 |             {uid: '3', name: 'Wladimir'},
100 |             {uid: '4', name: 'Samantha'}
101 |           ],
102 |           ' Sub header 2': [
103 |             {uid: '5', name: 'Estefanía'},
104 |             {uid: '6', name: 'Natasha'},
105 |             {uid: '7', name: 'Nicole'}
106 |           ]
107 |         }
108 |       }
109 |     }, {
110 |       key: 'countrySelect',
111 |       type: 'lx-select',
112 |       templateOptions: {
113 |         label: 'Country',
114 |         placeholder: 'Select a Country',
115 |         selected: 'name',
116 |         choice: 'name',
117 |         options: [ // Taken from https://gist.github.com/unceus/6501985
118 |           {name: 'Afghanistan', code: 'AF'},
119 |           {name: 'Åland Islands', code: 'AX'},
120 |           {name: 'Albania', code: 'AL'},
121 |           {name: 'Algeria', code: 'DZ'},
122 |           {name: 'American Samoa', code: 'AS'},
123 |           {name: 'Andorra', code: 'AD'},
124 |           {name: 'Angola', code: 'AO'},
125 |           {name: 'Anguilla', code: 'AI'},
126 |           {name: 'Antarctica', code: 'AQ'},
127 |           {name: 'Antigua and Barbuda', code: 'AG'},
128 |           {name: 'Argentina', code: 'AR'},
129 |           {name: 'Armenia', code: 'AM'},
130 |           {name: 'Aruba', code: 'AW'},
131 |           {name: 'Australia', code: 'AU'},
132 |           {name: 'Austria', code: 'AT'},
133 |           {name: 'Azerbaijan', code: 'AZ'},
134 |           {name: 'Bahamas', code: 'BS'},
135 |           {name: 'Bahrain', code: 'BH'},
136 |           {name: 'Bangladesh', code: 'BD'},
137 |           {name: 'Barbados', code: 'BB'},
138 |           {name: 'Belarus', code: 'BY'},
139 |           {name: 'Belgium', code: 'BE'},
140 |           {name: 'Belize', code: 'BZ'},
141 |           {name: 'Benin', code: 'BJ'},
142 |           {name: 'Bermuda', code: 'BM'},
143 |           {name: 'Bhutan', code: 'BT'},
144 |           {name: 'Bolivia', code: 'BO'},
145 |           {name: 'Bosnia and Herzegovina', code: 'BA'},
146 |           {name: 'Botswana', code: 'BW'},
147 |           {name: 'Bouvet Island', code: 'BV'},
148 |           {name: 'Brazil', code: 'BR'},
149 |           {name: 'British Indian Ocean Territory', code: 'IO'},
150 |           {name: 'Brunei Darussalam', code: 'BN'},
151 |           {name: 'Bulgaria', code: 'BG'},
152 |           {name: 'Burkina Faso', code: 'BF'},
153 |           {name: 'Burundi', code: 'BI'},
154 |           {name: 'Cambodia', code: 'KH'},
155 |           {name: 'Cameroon', code: 'CM'},
156 |           {name: 'Canada', code: 'CA'},
157 |           {name: 'Cape Verde', code: 'CV'},
158 |           {name: 'Cayman Islands', code: 'KY'},
159 |           {name: 'Central African Republic', code: 'CF'},
160 |           {name: 'Chad', code: 'TD'},
161 |           {name: 'Chile', code: 'CL'},
162 |           {name: 'China', code: 'CN'},
163 |           {name: 'Christmas Island', code: 'CX'},
164 |           {name: 'Cocos (Keeling) Islands', code: 'CC'},
165 |           {name: 'Colombia', code: 'CO'},
166 |           {name: 'Comoros', code: 'KM'},
167 |           {name: 'Congo', code: 'CG'},
168 |           {name: 'Congo, The Democratic Republic of the', code: 'CD'},
169 |           {name: 'Cook Islands', code: 'CK'},
170 |           {name: 'Costa Rica', code: 'CR'},
171 |           {name: 'Cote D\'Ivoire', code: 'CI'},
172 |           {name: 'Croatia', code: 'HR'},
173 |           {name: 'Cuba', code: 'CU'},
174 |           {name: 'Cyprus', code: 'CY'},
175 |           {name: 'Czech Republic', code: 'CZ'},
176 |           {name: 'Denmark', code: 'DK'},
177 |           {name: 'Djibouti', code: 'DJ'},
178 |           {name: 'Dominica', code: 'DM'},
179 |           {name: 'Dominican Republic', code: 'DO'},
180 |           {name: 'Ecuador', code: 'EC'},
181 |           {name: 'Egypt', code: 'EG'},
182 |           {name: 'El Salvador', code: 'SV'},
183 |           {name: 'Equatorial Guinea', code: 'GQ'},
184 |           {name: 'Eritrea', code: 'ER'},
185 |           {name: 'Estonia', code: 'EE'},
186 |           {name: 'Ethiopia', code: 'ET'},
187 |           {name: 'Falkland Islands (Malvinas)', code: 'FK'},
188 |           {name: 'Faroe Islands', code: 'FO'},
189 |           {name: 'Fiji', code: 'FJ'},
190 |           {name: 'Finland', code: 'FI'},
191 |           {name: 'France', code: 'FR'},
192 |           {name: 'French Guiana', code: 'GF'},
193 |           {name: 'French Polynesia', code: 'PF'},
194 |           {name: 'French Southern Territories', code: 'TF'},
195 |           {name: 'Gabon', code: 'GA'},
196 |           {name: 'Gambia', code: 'GM'},
197 |           {name: 'Georgia', code: 'GE'},
198 |           {name: 'Germany', code: 'DE'},
199 |           {name: 'Ghana', code: 'GH'},
200 |           {name: 'Gibraltar', code: 'GI'},
201 |           {name: 'Greece', code: 'GR'},
202 |           {name: 'Greenland', code: 'GL'},
203 |           {name: 'Grenada', code: 'GD'},
204 |           {name: 'Guadeloupe', code: 'GP'},
205 |           {name: 'Guam', code: 'GU'},
206 |           {name: 'Guatemala', code: 'GT'},
207 |           {name: 'Guernsey', code: 'GG'},
208 |           {name: 'Guinea', code: 'GN'},
209 |           {name: 'Guinea-Bissau', code: 'GW'},
210 |           {name: 'Guyana', code: 'GY'},
211 |           {name: 'Haiti', code: 'HT'},
212 |           {name: 'Heard Island and Mcdonald Islands', code: 'HM'},
213 |           {name: 'Holy See (Vatican City State)', code: 'VA'},
214 |           {name: 'Honduras', code: 'HN'},
215 |           {name: 'Hong Kong', code: 'HK'},
216 |           {name: 'Hungary', code: 'HU'},
217 |           {name: 'Iceland', code: 'IS'},
218 |           {name: 'India', code: 'IN'},
219 |           {name: 'Indonesia', code: 'ID'},
220 |           {name: 'Iran, Islamic Republic Of', code: 'IR'},
221 |           {name: 'Iraq', code: 'IQ'},
222 |           {name: 'Ireland', code: 'IE'},
223 |           {name: 'Isle of Man', code: 'IM'},
224 |           {name: 'Israel', code: 'IL'},
225 |           {name: 'Italy', code: 'IT'},
226 |           {name: 'Jamaica', code: 'JM'},
227 |           {name: 'Japan', code: 'JP'},
228 |           {name: 'Jersey', code: 'JE'},
229 |           {name: 'Jordan', code: 'JO'},
230 |           {name: 'Kazakhstan', code: 'KZ'},
231 |           {name: 'Kenya', code: 'KE'},
232 |           {name: 'Kiribati', code: 'KI'},
233 |           {name: 'Korea, Democratic People\'s Republic of', code: 'KP'},
234 |           {name: 'Korea, Republic of', code: 'KR'},
235 |           {name: 'Kuwait', code: 'KW'},
236 |           {name: 'Kyrgyzstan', code: 'KG'},
237 |           {name: 'Lao People\'s Democratic Republic', code: 'LA'},
238 |           {name: 'Latvia', code: 'LV'},
239 |           {name: 'Lebanon', code: 'LB'},
240 |           {name: 'Lesotho', code: 'LS'},
241 |           {name: 'Liberia', code: 'LR'},
242 |           {name: 'Libyan Arab Jamahiriya', code: 'LY'},
243 |           {name: 'Liechtenstein', code: 'LI'},
244 |           {name: 'Lithuania', code: 'LT'},
245 |           {name: 'Luxembourg', code: 'LU'},
246 |           {name: 'Macao', code: 'MO'},
247 |           {name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK'},
248 |           {name: 'Madagascar', code: 'MG'},
249 |           {name: 'Malawi', code: 'MW'},
250 |           {name: 'Malaysia', code: 'MY'},
251 |           {name: 'Maldives', code: 'MV'},
252 |           {name: 'Mali', code: 'ML'},
253 |           {name: 'Malta', code: 'MT'},
254 |           {name: 'Marshall Islands', code: 'MH'},
255 |           {name: 'Martinique', code: 'MQ'},
256 |           {name: 'Mauritania', code: 'MR'},
257 |           {name: 'Mauritius', code: 'MU'},
258 |           {name: 'Mayotte', code: 'YT'},
259 |           {name: 'Mexico', code: 'MX'},
260 |           {name: 'Micronesia, Federated States of', code: 'FM'},
261 |           {name: 'Moldova, Republic of', code: 'MD'},
262 |           {name: 'Monaco', code: 'MC'},
263 |           {name: 'Mongolia', code: 'MN'},
264 |           {name: 'Montserrat', code: 'MS'},
265 |           {name: 'Morocco', code: 'MA'},
266 |           {name: 'Mozambique', code: 'MZ'},
267 |           {name: 'Myanmar', code: 'MM'},
268 |           {name: 'Namibia', code: 'NA'},
269 |           {name: 'Nauru', code: 'NR'},
270 |           {name: 'Nepal', code: 'NP'},
271 |           {name: 'Netherlands', code: 'NL'},
272 |           {name: 'Netherlands Antilles', code: 'AN'},
273 |           {name: 'New Caledonia', code: 'NC'},
274 |           {name: 'New Zealand', code: 'NZ'},
275 |           {name: 'Nicaragua', code: 'NI'},
276 |           {name: 'Niger', code: 'NE'},
277 |           {name: 'Nigeria', code: 'NG'},
278 |           {name: 'Niue', code: 'NU'},
279 |           {name: 'Norfolk Island', code: 'NF'},
280 |           {name: 'Northern Mariana Islands', code: 'MP'},
281 |           {name: 'Norway', code: 'NO'},
282 |           {name: 'Oman', code: 'OM'},
283 |           {name: 'Pakistan', code: 'PK'},
284 |           {name: 'Palau', code: 'PW'},
285 |           {name: 'Palestinian Territory, Occupied', code: 'PS'},
286 |           {name: 'Panama', code: 'PA'},
287 |           {name: 'Papua New Guinea', code: 'PG'},
288 |           {name: 'Paraguay', code: 'PY'},
289 |           {name: 'Peru', code: 'PE'},
290 |           {name: 'Philippines', code: 'PH'},
291 |           {name: 'Pitcairn', code: 'PN'},
292 |           {name: 'Poland', code: 'PL'},
293 |           {name: 'Portugal', code: 'PT'},
294 |           {name: 'Puerto Rico', code: 'PR'},
295 |           {name: 'Qatar', code: 'QA'},
296 |           {name: 'Reunion', code: 'RE'},
297 |           {name: 'Romania', code: 'RO'},
298 |           {name: 'Russian Federation', code: 'RU'},
299 |           {name: 'Rwanda', code: 'RW'},
300 |           {name: 'Saint Helena', code: 'SH'},
301 |           {name: 'Saint Kitts and Nevis', code: 'KN'},
302 |           {name: 'Saint Lucia', code: 'LC'},
303 |           {name: 'Saint Pierre and Miquelon', code: 'PM'},
304 |           {name: 'Saint Vincent and the Grenadines', code: 'VC'},
305 |           {name: 'Samoa', code: 'WS'},
306 |           {name: 'San Marino', code: 'SM'},
307 |           {name: 'Sao Tome and Principe', code: 'ST'},
308 |           {name: 'Saudi Arabia', code: 'SA'},
309 |           {name: 'Senegal', code: 'SN'},
310 |           {name: 'Serbia and Montenegro', code: 'CS'},
311 |           {name: 'Seychelles', code: 'SC'},
312 |           {name: 'Sierra Leone', code: 'SL'},
313 |           {name: 'Singapore', code: 'SG'},
314 |           {name: 'Slovakia', code: 'SK'},
315 |           {name: 'Slovenia', code: 'SI'},
316 |           {name: 'Solomon Islands', code: 'SB'},
317 |           {name: 'Somalia', code: 'SO'},
318 |           {name: 'South Africa', code: 'ZA'},
319 |           {name: 'South Georgia and the South Sandwich Islands', code: 'GS'},
320 |           {name: 'Spain', code: 'ES'},
321 |           {name: 'Sri Lanka', code: 'LK'},
322 |           {name: 'Sudan', code: 'SD'},
323 |           {name: 'Suriname', code: 'SR'},
324 |           {name: 'Svalbard and Jan Mayen', code: 'SJ'},
325 |           {name: 'Swaziland', code: 'SZ'},
326 |           {name: 'Sweden', code: 'SE'},
327 |           {name: 'Switzerland', code: 'CH'},
328 |           {name: 'Syrian Arab Republic', code: 'SY'},
329 |           {name: 'Taiwan, Province of China', code: 'TW'},
330 |           {name: 'Tajikistan', code: 'TJ'},
331 |           {name: 'Tanzania, United Republic of', code: 'TZ'},
332 |           {name: 'Thailand', code: 'TH'},
333 |           {name: 'Timor-Leste', code: 'TL'},
334 |           {name: 'Togo', code: 'TG'},
335 |           {name: 'Tokelau', code: 'TK'},
336 |           {name: 'Tonga', code: 'TO'},
337 |           {name: 'Trinidad and Tobago', code: 'TT'},
338 |           {name: 'Tunisia', code: 'TN'},
339 |           {name: 'Turkey', code: 'TR'},
340 |           {name: 'Turkmenistan', code: 'TM'},
341 |           {name: 'Turks and Caicos Islands', code: 'TC'},
342 |           {name: 'Tuvalu', code: 'TV'},
343 |           {name: 'Uganda', code: 'UG'},
344 |           {name: 'Ukraine', code: 'UA'},
345 |           {name: 'United Arab Emirates', code: 'AE'},
346 |           {name: 'United Kingdom', code: 'GB'},
347 |           {name: 'United States', code: 'US'},
348 |           {name: 'United States Minor Outlying Islands', code: 'UM'},
349 |           {name: 'Uruguay', code: 'UY'},
350 |           {name: 'Uzbekistan', code: 'UZ'},
351 |           {name: 'Vanuatu', code: 'VU'},
352 |           {name: 'Venezuela', code: 'VE'},
353 |           {name: 'Vietnam', code: 'VN'},
354 |           {name: 'Virgin Islands, British', code: 'VG'},
355 |           {name: 'Virgin Islands, U.S.', code: 'VI'},
356 |           {name: 'Wallis and Futuna', code: 'WF'},
357 |           {name: 'Western Sahara', code: 'EH'},
358 |           {name: 'Yemen', code: 'YE'},
359 |           {name: 'Zambia', code: 'ZM'},
360 |           {name: 'Zimbabwe', code: 'ZW'}
361 |         ]
362 |       }
363 |       //}, {
364 |       //  key: 'subFileInput',
365 |       //  type: 'lx-subhead',
366 |       //  templateOptions: {
367 |       //    subhead: 'File Input',
368 |       //    style: {'text-decoration': 'underline'}
369 |       //  }
370 |       //}, {
371 |       //key: 'fileInput0',
372 |       //type: 'lx-file-input',
373 |       //templateOptions: {
374 |       //  fileLabel: 'Input a file...',
375 |       //  label: 'Filename'
376 |       //}
377 |     }, {
378 |       template: '
Long lists may load slow and cause lag.
'
379 |     }];
380 |   };
381 | }
382 | 
383 | function stateRoutes($stateProvider) {
384 |   $stateProvider
385 |     .state(`${name}`, {
386 |       url: `/${name}`,
387 |       views: {
388 |         'form@': {
389 |           template: require('main/main.html'),
390 |           controller: 'MainCtrl as vm',
391 |           resolve: {
392 |             formFields: function(selectFF) {
393 |               return selectFF.fields;
394 |             },
395 |             contents: function(selectFF) {
396 |               return selectFF.contents;
397 |             },
398 |             formData: function(selectFF) {
399 |               return selectFF.formData;
400 |             }
401 |           }
402 |         }
403 |       }
404 |     });
405 | }
406 | export default angular.module(`shmck.formFields.${name}`, [])
407 |   .service(`${name}FF`, fields)
408 |   .config(stateRoutes);
409 | 


--------------------------------------------------------------------------------
/demo/app/fields/switch.js:
--------------------------------------------------------------------------------
 1 | const name = 'switch';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Switch',
 6 |     docFile: 'docs/switch.md'
 7 |   };
 8 | 
 9 |   this.formData = {
10 |     regularSwitch: '',
11 |     hiddenSwitch: '',
12 |     checkedSwitch: true,
13 |     helperSwitch: '',
14 |     disabledSwitch: '',
15 |     disabledCheckedSwitch: true
16 |   };
17 | 
18 |   this.fields = function() {
19 |     return [{
20 |       key: 'regularSwitch',
21 |       type: 'lx-switch',
22 |       templateOptions: {
23 |         label: 'Regular switch'
24 |       }
25 |     }, {
26 |       key: 'checkedSwitch',
27 |       type: 'lx-switch',
28 |       templateOptions: {
29 |         label: 'Switched Switch',
30 |         checked: true
31 |       }
32 |     }, {
33 |       key: 'helperSwitch',
34 |       type: 'lx-switch',
35 |       templateOptions: {
36 |         label: 'Switch with Helper',
37 |         description: 'Explaining a little more'
38 |       }
39 |     }, {
40 |       key: 'disabledSwitch',
41 |       type: 'lx-switch',
42 |       templateOptions: {
43 |         label: 'Disabled Switch',
44 |         disabled: true
45 |       }
46 |     }, {
47 |       key: 'disabledCheckedSwitch',
48 |       type: 'lx-switch',
49 |       templateOptions: {
50 |         label: 'Disabled & Checked Switch',
51 |         disabled: true,
52 |         checked: true
53 |       }
54 |     }];
55 |   };
56 | }
57 | 
58 | function stateRoutes($stateProvider) {
59 |   $stateProvider
60 |     .state(`${name}`, {
61 |       url: `/${name}`,
62 |       views: {
63 |         'form@': {
64 |           template: require('main/main.html'),
65 |           controller: 'MainCtrl as vm',
66 |           resolve: {
67 |             formFields: function(switchFF) {
68 |               return switchFF.fields;
69 |             },
70 |             contents: function(switchFF) {
71 |               return switchFF.contents;
72 |             },
73 |             formData: function(switchFF) {
74 |               return switchFF.formData;
75 |             }
76 |           }
77 |         }
78 |       }
79 |     });
80 | }
81 | export default angular.module(`shmck.formFields.${name}`, [])
82 |   .service(`${name}FF`, fields)
83 |   .config(stateRoutes);
84 | 


--------------------------------------------------------------------------------
/demo/app/fields/test.js:
--------------------------------------------------------------------------------
 1 | // for testing purposes
 2 | const name = 'test';
 3 | 
 4 | function fields() {
 5 |   this.contents = {
 6 |     title: 'test'
 7 |   };
 8 | 
 9 |   this.formData = {};
10 | 
11 |   this.fields = function () {
12 |     return [{
13 |       "key": "row",
14 |       "type": "lx-flex",
15 |       "templateOptions": {
16 |         "flex": {
17 |           "container": "row",
18 |           "item": 6
19 |         },
20 |         "fields": [
21 |           {
22 |             key: 'text',
23 |             type: 'lx-input',
24 |             templateOptions: {
25 |               type: 'number',
26 |               label: 'Text'
27 |             },
28 |             "watcher": {
29 |               "listener": function(field, newValue, oldValue, scope, stopWatching) {
30 |                 console.log("watcher");
31 |                 if (newValue) {
32 |                   console.log(newValue);
33 |                 }
34 |               }
35 |             }
36 |           }
37 |         ]
38 |       }
39 |     }];
40 |   };
41 | }
42 | 
43 | function stateRoutes($stateProvider) {
44 |   $stateProvider
45 |     .state(`${name}`, {
46 |       url: `/${name}`,
47 |       views: {
48 |         'form@': {
49 |           template: require('main/main.html'),
50 |           controller: 'MainCtrl as vm',
51 |           resolve: {
52 |             formFields: function (testFF) {
53 |               return testFF.fields;
54 |             },
55 |             contents: function (testFF) {
56 |               return testFF.contents;
57 |             },
58 |             formData: function (testFF) {
59 |               return testFF.formData;
60 |             }
61 |           }
62 |         }
63 |       }
64 |     });
65 | }
66 | export default angular.module(`shmck.formFields.${name}`, [])
67 |   .service(`${name}FF`, fields)
68 |   .config(stateRoutes);
69 | 


--------------------------------------------------------------------------------
/demo/app/fields/themes.js:
--------------------------------------------------------------------------------
  1 | const name = 'themes';
  2 | 
  3 | function fields() {
  4 |   this.contents = {
  5 |     title: 'Themes',
  6 |     subhead: 'backgrounds + dark/light font themes',
  7 |     docFile: 'docs/themes.md',
  8 |     description: 'docs/notes/themeDescription.md',
  9 |     formFieldsClass: 'bgc-blue-grey-500 addPadding'
 10 |   };
 11 | 
 12 |   this.formData = {
 13 |     dark1: '',
 14 |     dark2: '',
 15 |     light1: '',
 16 |     light2: ''
 17 |   };
 18 | 
 19 |   this.fields = function() {
 20 |     return [{
 21 |       template: '
Dark Theme
'
 22 |     }, {
 23 |       key: 'dark1',
 24 |       type: 'lx-input',
 25 |       templateOptions: {
 26 |         fixedLabel: true,
 27 |         type: 'text',
 28 |         icon: 'account-outline',
 29 |         label: 'Name',
 30 |         theme: 'dark'
 31 |       }
 32 |     }, {
 33 |       key: 'dark2',
 34 |       type: 'lx-input',
 35 |       templateOptions: {
 36 |         type: 'email',
 37 |         icon: 'email-outline',
 38 |         label: 'Email',
 39 |         fixedLabel: true,
 40 |         theme: 'dark'
 41 |       }
 42 |     }, {
 43 |       template: '
Light Theme
'
 44 |     }, {
 45 |       key: 'light1',
 46 |       type: 'lx-input',
 47 |       wrapper: 'lx-wrapper-div',
 48 |       templateOptions: {
 49 |         div: {
 50 |           className: 'bgc-yellow-500'
 51 |         },
 52 |         fixedLabel: true,
 53 |         type: 'text',
 54 |         label: 'Name',
 55 |         icon: 'account',
 56 |         theme: 'light'
 57 |       }
 58 |     }, {
 59 |       key: 'light2',
 60 |       type: 'lx-input',
 61 |       wrapper: 'lx-wrapper-div',
 62 |       templateOptions: {
 63 |         div: {
 64 |           className: 'bgc-yellow-500'
 65 |         },
 66 |         type: 'email',
 67 |         label: 'Email',
 68 |         icon: 'email',
 69 |         fixedLabel: true,
 70 |         theme: 'light'
 71 |       }
 72 |     }];
 73 |   };
 74 | }
 75 | 
 76 | function stateRoutes($stateProvider) {
 77 |   $stateProvider
 78 |     .state(`${name}`, {
 79 |       url: `/${name}`,
 80 |       views: {
 81 |         'form@': {
 82 |           template: require('main/main.html'),
 83 |           controller: 'MainCtrl as vm',
 84 |           resolve: {
 85 |             formFields: function(themesFF) {
 86 |               return themesFF.fields;
 87 |             },
 88 |             contents: function(themesFF) {
 89 |               return themesFF.contents;
 90 |             },
 91 |             formData: function(themesFF) {
 92 |               return themesFF.formData;
 93 |             }
 94 |           }
 95 |         }
 96 |       }
 97 |     });
 98 | }
 99 | export default angular.module(`shmck.formFields.${name}`, [])
100 |   .service(`${name}FF`, fields)
101 |   .config(stateRoutes);
102 | 


--------------------------------------------------------------------------------
/demo/app/fields/validators.js:
--------------------------------------------------------------------------------
 1 | const name = 'validators';
 2 | 
 3 | /*@ngInject*/
 4 | function fields($timeout, $q) {
 5 |   this.contents = {
 6 |     title: 'Validators',
 7 |     subhead: 'sync & async, pending',
 8 |     docsLink: 'http://formly-js.github.io/angular-formly/#/example/advanced/validators'
 9 |   };
10 | 
11 |   this.formData = {
12 |     iceCreamFlavor: '',
13 |     iceCreamFlavor2: ''
14 |   };
15 | 
16 |   function flavorInStock(viewValue, modelValue) {
17 |     return $timeout(function() {
18 |       var value = modelValue || viewValue || '';
19 |       var flavors = ['chocolate', 'vanilla', 'strawberry'];
20 |       var fn = (flavors.indexOf(value.toLowerCase()) !== -1) ? $q.when : $q.reject;
21 |       return fn();
22 |     }, 800);
23 |   }
24 | 
25 |   var flavorInStockValidator = {
26 |     flavorInStock: {
27 |       expression: flavorInStock,
28 |       //message: '"View Value: " + $viewValue'
29 |       message: '"Sorry, we don\'t have that flavor in stock. How about chocolate?"'
30 |     }
31 |   };
32 | 
33 |   this.fields = function() {
34 |     return [{
35 |       key: 'iceCreamFlavor',
36 |       type: 'lx-input',
37 |       wrapper: 'lx-wrapper-errors',
38 |       validators: flavorInStockValidator,
39 |       templateOptions: {
40 |         label: 'What\'s your favorite ice cream?'
41 |       },
42 |       modelOptions: {
43 |         updateOn: 'keyup blur'
44 |       }
45 |     }, {
46 |       key: 'iceCreamFlavor2',
47 |       type: 'lx-input',
48 |       wrapper: 'lx-wrapper-errors',
49 |       validators: flavorInStockValidator,
50 |       templateOptions: {
51 |         label: 'What\'s your favorite ice cream? (pending)',
52 |         pending: 'Checking for ice cream flavor...'
53 |       },
54 |       modelOptions: {
55 |         updateOn: 'keyup'
56 |       }
57 |     }];
58 |   };
59 | }
60 | 
61 | function stateRoutes($stateProvider) {
62 |   $stateProvider
63 |     .state(`${name}`, {
64 |       url: `/${name}`,
65 |       views: {
66 |         'form@': {
67 |           template: require('main/main.html'),
68 |           controller: 'MainCtrl as vm',
69 |           resolve: {
70 |             formFields: function(validatorsFF) {
71 |               return validatorsFF.fields;
72 |             },
73 |             contents: function(validatorsFF) {
74 |               return validatorsFF.contents;
75 |             },
76 |             formData: function(validatorsFF) {
77 |               return validatorsFF.formData;
78 |             }
79 |           }
80 |         }
81 |       }
82 |     });
83 | }
84 | export default angular.module(`shmck.formFields.${name}`, [])
85 |   .service(`${name}FF`, fields)
86 |   .config(stateRoutes);
87 | 


--------------------------------------------------------------------------------
/demo/app/fields/watcher.js:
--------------------------------------------------------------------------------
 1 | const name = 'watcher';
 2 | 
 3 | function fields() {
 4 |   this.contents = {
 5 |     title: 'Watcher'
 6 |   };
 7 | 
 8 |   this.formData = {};
 9 | 
10 |   this.fields = function() {
11 |     return [{
12 |       key: 'watcher',
13 |       type: 'lx-select',
14 |       templateOptions: {
15 |         label: 'Select a Number',
16 |         placeholder: 'select',
17 |         choice: 'value',
18 |         selected: 'value',
19 |         options: [{
20 |           value: 1
21 |         }, {
22 |           value: 2
23 |         }, {
24 |           value: 3
25 |         }]
26 |       },
27 |       watcher: {
28 |         listener: function(field, newValue) { //, oldValue, scope, stopWatching
29 |           console.log(newValue);
30 |         }
31 |       }
32 |     }];
33 |   };
34 | }
35 | 
36 | function stateRoutes($stateProvider) {
37 |   $stateProvider
38 |     .state(`${name}`, {
39 |       url: `/${name}`,
40 |       views: {
41 |         'form@': {
42 |           template: require('main/main.html'),
43 |           controller: 'MainCtrl as vm',
44 |           resolve: {
45 |             formFields: function(watcherFF) {
46 |               return watcherFF.fields;
47 |             },
48 |             contents: function(watcherFF) {
49 |               return watcherFF.contents;
50 |             },
51 |             formData: function(watcherFF) {
52 |               return watcherFF.formData;
53 |             }
54 |           }
55 |         }
56 |       }
57 |     });
58 | }
59 | export default angular.module(`shmck.formFields.${name}`, [])
60 |   .service(`${name}FF`, fields)
61 |   .config(stateRoutes);
62 | 
63 | 


--------------------------------------------------------------------------------
/demo/app/images/angular-formly.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/images/angular-formly.png


--------------------------------------------------------------------------------
/demo/app/index.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | 
 4 |   
 5 |   Formly LumX
 6 |   
 7 |   
 8 |   
 9 |   
10 |   
11 | 
12 | 
13 | 
17 | 
18 | 

19 |   
20 |   
21 |   

22 | 

23 | 
24 | 
40 | 
41 | 
42 | 
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/demo/app/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | require('./vendor')();
 3 | 
 4 | angular.module('app', [
 5 |   /* angular-formly-templates-lumx dependencies */
 6 |   'ngMessages',
 7 |   'formly',
 8 |   'lumx',
 9 |   'formlyLumx',
10 |   /* angular & 3rd party */
11 |   'ngSanitize',
12 |   'ngAnimate',
13 |   'ngTouch',
14 |   'ui.router',
15 |   'btford.markdown',
16 |   /* modules */
17 |   require('./core/layout').name,
18 |   require('./components/_components').name,
19 |   require('./main/main').name,
20 |   require('./fields/_fields.module').name
21 | ])
22 |   .constant('version', '2.0.5')
23 |   .config(function routerSetup($urlRouterProvider) {
24 |     $urlRouterProvider
25 |       .otherwise('/input');
26 |   });
27 | 
28 | 


--------------------------------------------------------------------------------
/demo/app/index.scss:
--------------------------------------------------------------------------------
 1 | //@import "./bower_components/bourbon/app/assets/stylesheets/bourbon";
 2 | @import './bower_components/lumx/dist/lumx.css';
 3 | @import './bower_components/angular-formly-templates-lumx/dist/formlyLumx.css';
 4 | @import './main/main.scss';
 5 | @import './core/nav/nav.scss';
 6 | @import './components/animation/pageTransitions.scss';
 7 | 
 8 | 
 9 | .browsehappy {
10 |   margin: 0.2em 0;
11 |   background: #ccc;
12 |   color: #000;
13 |   padding: 0.2em 0;
14 | }
15 | 
16 | body {
17 |   padding: 0 !important;
18 |   background-color: #EEEEEE;
19 | }
20 | 
21 | a {
22 |   text-decoration: none;
23 | }
24 | 


--------------------------------------------------------------------------------
/demo/app/main/main.ctrl.js:
--------------------------------------------------------------------------------
 1 | class FormCtrl {
 2 |   constructor(formFields, contents, formData, LxDialogService) {
 3 |   //constructor(LxDialogService) {
 4 |     this.contents = contents;
 5 |     this.formData = formData || {};
 6 |     this.formFields = formFields();
 7 |     this.jsonFields = formFields();
 8 |     this.currentItem = 0;
 9 |     this.LxDialogService = LxDialogService;
10 |   }
11 | 
12 |   submit() {
13 |     alert(JSON.stringify(this.formData));
14 |   }
15 | 
16 |   openDialog() {
17 |     this.LxDialogService.open('docsModal');
18 |   }
19 | }
20 | 
21 | //FormCtrl.$inject = ['LxDialogService'];
22 | FormCtrl.$inject = ['formFields', 'contents', 'formData', 'LxDialogService'];
23 | 
24 | export default FormCtrl;
25 | 


--------------------------------------------------------------------------------
/demo/app/main/main.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 

 3 | 
 4 |   
 5 |   

 6 |     

 7 |       
 8 |       Docs 
10 |       Docs 
11 | 
12 | 
13 |       
{{::vm.contents.title}}

14 |       {{::vm.contents.subhead}}
15 |       

16 | 
17 |       
18 | 
19 |       
20 |         

21 |           
22 |             

23 |             
26 |           
27 |         

28 |       
29 | 
30 |       
31 | 
32 |       
33 |     

34 | 
35 |   

36 | 
37 |   
38 |   

39 |     
40 |   

41 | 
42 | 
43 | 

44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/demo/app/main/main.js:
--------------------------------------------------------------------------------
1 | export default angular.module('app.main', [])
2 |   .controller('MainCtrl', require('./main.ctrl'));
3 | 


--------------------------------------------------------------------------------
/demo/app/main/main.scss:
--------------------------------------------------------------------------------
 1 | .main-section__content {
 2 |   margin-top: 36px;
 3 |   flex-wrap: wrap;
 4 |   flex-direction: row;
 5 | }
 6 | .content {
 7 |   padding-left: 10px;
 8 |   max-width: 700px;
 9 | }
10 | .content-fields {
11 |   min-width: 100px;
12 |   flex-grow: 4;
13 | }
14 | .content-json {
15 |   min-width: 200px;
16 |   flex-grow: 6;
17 | }
18 | div.card {
19 |   padding: 14px !important;
20 | }
21 | .docs-icon {
22 |   float: right;
23 |   opacity: 0.5;
24 |   margin-right: 10px;
25 | }
26 | 


--------------------------------------------------------------------------------
/demo/app/res/materialdesignicons-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/formly-js/angular-formly-templates-lumx/d1d2efa5600044af44c306d0361983f5ac5d8644/demo/app/res/materialdesignicons-webfont.eot


--------------------------------------------------------------------------------
/demo/app/vendor.js:
--------------------------------------------------------------------------------
 1 | export default () => {
 2 |   /**
 3 |    *  Styles, fonts & icons
 4 |    */
 5 |   //require('node-bourbon');
 6 |   //require('node-mdi');
 7 |   require('./index.scss');
 8 | 
 9 |   /**
10 |    *  JS
11 |    */
12 |   global.$ = global.jQuery = require('jquery');
13 |   require('jquery.transit');
14 |   require('velocity-animate');
15 |   require('angular');
16 |   require('angular-messages');
17 |   require('angular-animate');
18 |   require('angular-touch');
19 |   require('angular-sanitize');
20 |   require('angular-ui-router');
21 |   require('angular-formly');
22 |   global.moment = require('moment');
23 |   //require('../node_modules/node-mdi/materialdesignicons.min.css');
24 |   require('imports?angular!./bower_components/lumx/dist/lumx.js');
25 |   require('imports?angular!./bower_components/angular-formly-templates-lumx/dist/formlyLumx.js');
26 |   require('imports?angular!./bower_components/angular-markdown-directive/markdown.js');
27 | };
28 | 


--------------------------------------------------------------------------------
/demo/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FormlyLumxDemo",
 3 |   "version": "2.0.0",
 4 |   "repository": {
 5 |     "type": "git",
 6 |     "url": "github.com/formlyjs/angular-formly-templates-lumx"
 7 |   },
 8 |   "authors": [
 9 |     "ShMcK "
10 |   ],
11 |   "dependencies": {
12 |     "lumx": "~0.3.96",
13 |     "angular-formly-templates-lumx": "~2.0.5",
14 |     "angular-markdown-directive": "~0.3.1",
15 |     "mdi": "~1.0.8-beta",
16 |     "showdown": "~0.4.0",
17 |     "angular-google-places-autocomplete": "~0.2.5",
18 |     "bourbon": "~4.2.6"
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FormlyLumxDemo",
 3 |   "version": "2.0.1",
 4 |   "description": "LumX Templates for Angular-Formly",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "github.com/formlyjs/angular-formly-templates-lumx"
 8 |   },
 9 |   "author": "ShMcK ",
10 |   "license": "ISC",
11 |   "private": true,
12 |   "main": "app/index.js",
13 |   "scripts": {
14 |     "start": "node node_modules/.bin/webpack-dev-server --content-base app",
15 |     "server": "node server/app.js",
16 |     "start-win": "node_modules\\.bin\\webpack-dev-server.cmd -—content-base app",
17 |     "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html app/index.html",
18 |     "prestart": "npm install && bower install"
19 |   },
20 |   "dependencies": {
21 |     "angular": "~1.4.7",
22 |     "angular-animate": "~1.4.7",
23 |     "angular-aria": "~1.4.7",
24 |     "angular-formly": "~7.1.2",
25 |     "angular-messages": "~1.4.7",
26 |     "angular-mocks": "~1.4.7",
27 |     "angular-sanitize": "~1.4.7",
28 |     "angular-touch": "~1.4.7",
29 |     "angular-ui-router": "~0.2.15",
30 |     "angularfire": "~1.1.3",
31 |     "api-check": "~7.5.3",
32 |     "body-parser": "~1.14.1",
33 |     "bower": "~1.5.3",
34 |     "composable-middleware": "~0.3.0",
35 |     "compression": "~1.6.0",
36 |     "connect-livereload": "~0.5.3",
37 |     "connect-mongo": "~0.8.2",
38 |     "cookie-parser": "~1.4.0",
39 |     "ejs": "~2.3.4",
40 |     "errorhandler": "~1.4.2",
41 |     "express": "~4.13.3",
42 |     "express-session": "~1.11.3",
43 |     "jquery": "~2.1.4",
44 |     "jquery.transit": "^0.9.12",
45 |     "lodash": "~3.10.1",
46 |     "method-override": "~2.3.5",
47 |     "moment": "^2.10.6",
48 |     "morgan": "~1.6.1",
49 |     "node-bourbon": "^4.2.3",
50 |     "node-mdi": "^1.0.0",
51 |     "serve-favicon": "~2.3.0",
52 |     "showdown": "~1.2.3",
53 |     "velocity-animate": "~1.2.3"
54 |   },
55 |   "devDependencies": {
56 |     "autoprefixer-core": "~6.0.1",
57 |     "babel-core": "~5.8.25",
58 |     "babel-loader": "~5.3.2",
59 |     "bower-webpack-plugin": "^0.1.9",
60 |     "css-loader": "~0.19.0",
61 |     "csswring": "~4.0.0",
62 |     "file-loader": "~0.8.4",
63 |     "imports-loader": "~0.6.4",
64 |     "jscs": "~2.2.1",
65 |     "jscs-loader": "~0.2.0",
66 |     "jshint": "~2.8.0",
67 |     "jshint-loader": "~0.8.3",
68 |     "json-loader": "~0.5.3",
69 |     "markdown-loader": "~0.1.7",
70 |     "ng-annotate": "~1.0.2",
71 |     "ng-annotate-loader": "~0.0.10",
72 |     "node-sass": "^3.3.3",
73 |     "postcss": "~5.0.8",
74 |     "postcss-loader": "~0.6.0",
75 |     "postcss-nested": "~1.0.0",
76 |     "raw-loader": "~0.5.1",
77 |     "sass-loader": "~3.0.0",
78 |     "script-loader": "~0.6.1",
79 |     "style-loader": "~0.12.4",
80 |     "url-loader": "~0.5.6",
81 |     "webpack": "~1.12.2",
82 |     "webpack-core": "~0.6.7",
83 |     "webpack-dev-server": "~1.12.0"
84 |   },
85 |   "engines": {
86 |     "node": ">=0.12",
87 |     "npm": ">=2.0.0"
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/demo/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var webpack = require('webpack'),
 4 |   path = require('path'),
 5 |   bowerRoot = __dirname + '/app/bower_components',
 6 |   //BowerWebpackPlugin = require("bower-webpack-plugin")
 7 |   bourbon = require('node-bourbon').includePaths;
 8 |   //mdi = require('node-mdi').includePaths;
 9 | 
10 | module.exports = {
11 |   context: __dirname + '/app',
12 |   entry: './index.js',
13 |   output: {
14 |     path: __dirname + '/app',
15 |     filename: 'bundle.js'
16 |   },
17 |   //stats: {
18 |   //	colors: true,
19 |   //	reasons: true
20 |   //},
21 |   devtool: '#inline-source-maps',
22 |   cache: true,
23 |   debug: true,
24 | 
25 |   resolve: {
26 |     extensions: ['', '.js'],
27 |     modulesDirectories: ['node_modules', 'bower_components'],
28 |     root: [__dirname + '/app']
29 |   },
30 | 
31 |   module: {
32 |     loaders: [
33 |       {
34 |         test: /\.js$/,
35 |         loader: 'ng-annotate!babel!jshint',
36 |         exclude: /node_modules|dist|bower_components/
37 |       }, {
38 |         test: /\.json$/,
39 |         loader: 'json'
40 |       }, {
41 |         test: /\.md$/,
42 |         loader: 'html!markdown'
43 |       }, {
44 |         test: /\.html$/,
45 |         loader: 'raw'
46 |       }, {
47 |         test: /\.scss$/,
48 |         //loader: "style!css!sass"
49 |         loader: "style!css!sass?includePaths[]=" + bourbon
50 |       }, {
51 |         test: /\.css$/,
52 |         loader: 'style!css!postcss'
53 |       }, {
54 |         test: /\.jpe?g$|\.gif$|\.png$|\.svg$/,
55 |         loader: "file"
56 |       }, {
57 |         test: /\.(woff|woff2|ttf|eot|svg)(\?]?.*)?$/,
58 |         loader : 'file-loader?name=res/[name].[ext]?[hash]'
59 |       }
60 |     ]
61 |   },
62 |   /* speed up the build */
63 |   noParse: [
64 |     bowerRoot
65 |   ],
66 | 
67 |   postcss: [
68 |     require('postcss-nested'),
69 |     require('autoprefixer-core'),
70 |     require('csswring')
71 |   ]
72 |   //plugins: [
73 |   //  new webpack.ResolverPlugin(
74 |   //    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
75 |   //  )
76 |   //]
77 | };
78 | 


--------------------------------------------------------------------------------
/dist/formlyLumx.css:
--------------------------------------------------------------------------------
 1 | /* styles */
 2 | .form-pending {
 3 |   color: rgba(0, 0, 0, 0.541176);
 4 |   font-size: 0.85em;
 5 |   list-style: none;
 6 | }
 7 | 
 8 | .form-error {
 9 |   color: #F44336;
10 |   font-size: 0.85em;
11 |   list-style: none;
12 | }
13 | 
14 | /* spacing fixes */
15 | .aftl-select {
16 |   position: relative;
17 | }
18 | 
19 | .aftl-select-lower {
20 |   bottom: -11px;
21 | }
22 | 
23 | .aftl-select-higher {
24 |   bottom: 11px;
25 | }
26 | 
27 | /* inline styles */
28 | .inline-wrapper {
29 |   display: inline;
30 | }
31 | 
32 | .inline--before {
33 |   display: inline-block;
34 | }
35 | 
36 | .inline--content {
37 |   display: inline-block;
38 | }
39 | 
40 | .inline--after {
41 |   display: inline-block;
42 | }
43 | 
44 | .radio-button__inline {
45 |   display: inline-block;
46 |   margin-right: 10px;
47 | }
48 | 
49 | 


--------------------------------------------------------------------------------
/docs/checkbox.md:
--------------------------------------------------------------------------------
 1 | ### lx-checkbox
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-checkbox',
 6 |   'templateOptions': {
 7 |   'label': 'A checkbox label',
 8 |     'description': 'A checkbox help description',
 9 |     'disabled': false, // ng-disabled
10 |     'checked': false // ng-checked
11 |   }
12 | }
13 | ```
14 | Read more about [LumX checkboxes](http://ui.lumapps.com/css/checkboxes).
15 | 


--------------------------------------------------------------------------------
/docs/datePicker.md:
--------------------------------------------------------------------------------
 1 | ### lx-date-picker
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-date-picker',
 6 |   'templateOptions': {
 7 |     'label': 'A checkbox label',
 8 |     'description': 'A description',
 9 |     'required': false, // ng-required
10 |     'disabled': false // ng-disabled
11 |   }
12 | }
13 | ```
14 | Read more about [lx-date-picker](http://ui.lumapps.com/directives/date-picker).
15 | 


--------------------------------------------------------------------------------
/docs/error.md:
--------------------------------------------------------------------------------
 1 | ###lx-wrapper-errors
 2 | 
 3 | ```javascript
 4 | {
 5 |   key: 'someKey',
 6 |   type: 'lx-input',
 7 |   wrapper: 'lx-wrapper-errors',
 8 |   templateOptions: {
 9 |     pending: 'Checking...',  // pending message for async validators
10 |     required: true
11 |   },
12 |   validation: {
13 |     messages: [{
14 |       name: 'required',
15 |       message: 'This field is required.'
16 |     }]
17 |   }
18 | }
19 | ```
20 | 


--------------------------------------------------------------------------------
/docs/flex.md:
--------------------------------------------------------------------------------
 1 | ### lx-wrapper-flex
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-flex',
 7 |   'templateOptions': {
 8 |     'flex': {
 9 |       'container': 'row', // row | column | row-reverse | column-reverse
10 |           'wrap': 'nowrap', // nowrap | wrap | wrap-reverse
11 |           'align': 'space-between', // flex-start | flex-end | center | space-between | space-around | stretch
12 |           'item': 5  // width (between 1 & 12)
13 |     },
14 |     'className': 'bgc-red-500', // ng-class
15 |     'style': 'height: 200px'
16 |      'fields': [{
17 |           'key': 'modelName',
18 |           'type': 'lx-whatever-type',
19 |           'wrapper': 'lx-wrapper-flex',
20 |           'templateOptions': {
21 |               'flex' {
22 |                 item': '1' // 1-12, if different from default
23 |                 'flex-order': '1', // value for ordering boxes
24 |               }
25 |               'label': 'Some Label'
26 |         }
27 |       }]
28 |   },
29 | }
30 | ```
31 | Read more about [LumX flexbox](http://ui.lumapps.com/css/flexbox).


--------------------------------------------------------------------------------
/docs/inline.md:
--------------------------------------------------------------------------------
 1 | ###lx-wrapper-inline
 2 | ```javascript
 3 | {
 4 |   key: 'someKey',
 5 |   type: 'lx-input',
 6 |   wrapper: 'lx-wrapper-inline',
 7 |   templateOptions: {
 8 |     label: 'example',
 9 |     inline: {
10 |       before: 'This is an ',
11 |       after: ' of the inline wrapper'
12 |     }
13 |   }
14 | }
15 | ```
16 | 


--------------------------------------------------------------------------------
/docs/input.md:
--------------------------------------------------------------------------------
 1 | ### lx-input
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-input',
 7 |   'templateOptions': {
 8 |     'type': 'text', // html input type values [text, email, password, url, number]
 9 |     'label': 'Some Label', // acts as a placeholder & label
10 |     'description': 'A description below',
11 |     /** styles **/
12 |     'fixedLabel': false, // [default = false (float label), true = fixed label]
13 |     'icon': 'account',
14 |     'theme': 'light', // sets text color [default = 'light', 'dark']
15 |     /** fields **/
16 |     'disabled': false, // ng-disabled
17 |     'required': false, // ng-required
18 |   }
19 | }
20 | ```
21 | 
22 | Read more about [lx-text](http://ui.lumapps.com/directives/text-fields).
23 | 


--------------------------------------------------------------------------------
/docs/radio.md:
--------------------------------------------------------------------------------
 1 | ### lx-radio API
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-radio-buttons',
 6 |   'templateOptions': {
 7 |     'label': 'Choose an item: ',
 8 |     'disabled': false,
 9 |     'required': false,
10 |     'options': [{
11 |       'name': 'item 1',
12 |       'value': '1', // ng-value
13 |       'description': 'item 1 help description',
14 |       'checked': false, // ng-checked
15 |       'disabled': false, // ng-disabled
16 |       'inline': false
17 |     }]
18 |   }
19 | }
20 | ```
21 | Read more about [LumX radio buttons](http://ui.lumapps.com/css/radio-buttons).
22 | 


--------------------------------------------------------------------------------
/docs/select.md:
--------------------------------------------------------------------------------
 1 | ### lx-select
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-select', // 'lx-select-multiple'
 6 |   'templateOptions': {
 7 |     'multiple': true, // {{ default: false}}
 8 |     'label': 'The label', // default: 'Select'
 9 |     'placeholder': 'The placeholder',
10 |     'description': 'A description below',
11 |     'required': false, // ng-required
12 |     'disabled': false, // ng-disabled
13 |     'selected': 'A', // displays current selected property as placeholder
14 |     'selected2': 'B', // optional second placeholder display
15 |     'choice': 'A', // dropdown choice display
16 |     'choice2': 'C', // optional second choice display
17 |     'choices': [{
18 |       'A': 1, 'B': 2, 'C': 3
19 |     }, {
20 |       'A': '4', 'B': '5', 'C': '6', 'D': '7'
21 |     }],
22 |     'minLength': 2,
23 |     'allowClear': false
24 |   }
25 | }
26 | ```
27 | Read more about [lx-select](http://ui.lumapps.com/directives/selects).
28 | 


--------------------------------------------------------------------------------
/docs/switch.md:
--------------------------------------------------------------------------------
 1 | ### lx-switch
 2 | ```javascript
 3 | {
 4 |   'key': 'modelName',
 5 |   'type': 'lx-switch',
 6 |   'templateOptions': {
 7 |     'label': 'A switch label',
 8 |     'description': 'A switch help description',
 9 |     'disabled': false, // ng-disabled
10 |     'checked': false, // ng-checked
11 |   }
12 | }
13 | ```
14 | Read more about [LumX switches](http://ui.lumapps.com/css/switches).
15 | 


--------------------------------------------------------------------------------
/docs/textarea.md:
--------------------------------------------------------------------------------
 1 | ### lx-textarea
 2 | 
 3 | ```javascript
 4 | {
 5 |   'key': 'modelName',
 6 |   'type': 'lx-textarea',
 7 |   'templateOptions': {
 8 |     'type': 'text', // html input type values [text, email, password, url, number]
 9 |     'label': 'Some Label', // acts as a placeholder & label
10 |     'description': 'A description below',
11 |     'theme': 'light', // sets text color [default = 'light', 'dark']
12 |     'fixedLabel': false, // [default = false (float label), true = fixed label]
13 |     'disabled': false, // ng-disabled
14 |     'required': false, // ng-required
15 |   }
16 | }
17 | ```
18 | 
19 | Read more about [lx-text](http://ui.lumapps.com/directives/text-fields).
20 | 


--------------------------------------------------------------------------------
/docs/themes.md:
--------------------------------------------------------------------------------
 1 | ### Method 1: Style the `<formly-form>` element
 2 | 
 3 | ```html
 4 | <formly-form model="vm.formData" fields="vm.formFields" class="bgc-blue-grey-500"></formly-form>
 5 | ```
 6 | Read more about [LumX color styles](http://ui.lumapps.com/css/colors).
 7 | 
 8 | ### Method 2: Style the formly-field div with `lx-wrapper-div`
 9 |   
10 | ```javascript
11 | { key: 'key', 
12 |     type: 'lx-text',
13 |     wrapper: 'lx-wrapper-div', // <- div wrapper
14 |     templateOptions: {
15 |       div: {
16 |         className: 'bgc-blue-grey-500' // <- div background color
17 |       },
18 |       type: 'text',
19 |       label: 'Name',
20 |       theme: 'dark' // <- add if background color is dark for lighter text
21 |    }
22 | }
23 | ```
24 | Read more about [stlying LumX text fields](http://ui.lumapps.com/directives/text-fields).
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FormlyLumX",
 3 |   "version": "2.0.5",
 4 |   "description": "Angular-Formly templates based on the LumX Framework",
 5 |   "devDependencies": {
 6 |     "autoprefixer": "~6.0.3",
 7 |     "babel-loader": "~5.3.2",
 8 |     "css-loader": "~0.20.1",
 9 |     "csswring": "~4.0.0",
10 |     "jshint": "~2.8.0",
11 |     "jshint-loader": "~0.8.3",
12 |     "ng-annotate": "~1.0.2",
13 |     "ng-annotate-loader": "~0.0.10",
14 |     "postcss": "~5.0.10",
15 |     "postcss-loader": "~0.7.0",
16 |     "postcss-nested": "~1.0.0",
17 |     "raw-loader": "~0.5.1",
18 |     "sass-loader": "~3.0.0",
19 |     "webpack": "~1.12.2",
20 |     "node-sass": "~3.3.3"
21 |   },
22 |   "scripts": {
23 |     "test": "echo \"Error: no test specified\" && exit 1"
24 |   },
25 |   "repository": {
26 |     "type": "git",
27 |     "url": "https://github.com/formly-js/angular-formly-templates-lumx.git"
28 |   },
29 |   "author": "ShMcK ",
30 |   "license": "ISC",
31 |   "bugs": {
32 |     "url": "https://github.com/formly-js/angular-formly-templates-lumx/issues"
33 |   },
34 |   "homepage": "https://github.com/formly-js/angular-formly-templates-lumx"
35 | }
36 | 


--------------------------------------------------------------------------------
/src/fields/lx-checkbox.html:
--------------------------------------------------------------------------------
1 | 

2 | 	
6 | 	
7 | 	{{::to.description}}
9 | 



--------------------------------------------------------------------------------
/src/fields/lx-date-picker.html:
--------------------------------------------------------------------------------
1 | 
4 | 
5 | 


--------------------------------------------------------------------------------
/src/fields/lx-dropdown.html:
--------------------------------------------------------------------------------
 1 | 
 2 | 	
 6 | 	
 7 | 		
12 | 	
13 | 


--------------------------------------------------------------------------------
/src/fields/lx-flex.html:
--------------------------------------------------------------------------------
 1 | 

 6 | 	

20 | 	

21 | 



--------------------------------------------------------------------------------
/src/fields/lx-input.html:
--------------------------------------------------------------------------------
 1 | 
 9 | 	
13 | 


--------------------------------------------------------------------------------
/src/fields/lx-radio.html:
--------------------------------------------------------------------------------
 1 | 

 2 | 	

 3 | 
 4 | 	

 7 | 		
14 | 		
16 |       {{::o.description}}
17 |       
18 | 	

19 | 

20 | 


--------------------------------------------------------------------------------
/src/fields/lx-select.html:
--------------------------------------------------------------------------------
 1 | 

 2 | 	

 5 | 	
11 | 
12 | 		
13 | 			{{$selected[to.selected] || $selected}} {{::to.selected2 ? ' - ' +
14 | 			$selected[to.selected2] : ''}}
15 | 		
16 | 
17 | 		
18 | 			{{$choice[to.choice] || $choice}} {{::to.choice2 ? ' - ' +
19 | 			$choice[to.choice2] : ''}}
20 | 		
21 | 
22 | 	
23 | 

24 | 


--------------------------------------------------------------------------------
/src/fields/lx-switch.html:
--------------------------------------------------------------------------------
 1 | 

 2 | 	
 6 | 	
 7 | 	{{::to.description}}
 9 | 

10 | 
11 | 


--------------------------------------------------------------------------------
/src/fields/lx-textarea.html:
--------------------------------------------------------------------------------
 1 | 
 8 |     
12 | 
13 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | (function () {
  2 |   'use strict';
  3 |   var USING_TEMPLATES = true;
  4 |   /* Custom validation message defaults here */
  5 |   var VALIDATION_MESSAGES = [{
  6 |     name: 'required', message: 'This field is required'
  7 |   }, {
  8 |     name: 'maxlength', message: 'This field is too long.'
  9 |   }, {
 10 |     name: 'minlength', message: 'This field is too short.'
 11 |   }];
 12 |   /* Module Templates + Data */
 13 |   var MODULE_NAME = 'formlyLumx';
 14 |   var PREFIX = 'lx';
 15 |   var FIELDS = [{
 16 |     name: 'checkbox',
 17 |     template: require('./fields/lx-checkbox.html'),
 18 |     apiCheck: function(check) {
 19 |       return {
 20 |         templateOptions: {
 21 |           label: check.string,
 22 |           description: check.string,
 23 |           checked: check.boolean,
 24 |           required: check.boolean
 25 |         }
 26 |       };
 27 |     }
 28 |   }, {
 29 |     name: 'date-picker',
 30 |     template: require('./fields/lx-date-picker.html'),
 31 |     apiCheck: function(check) {
 32 |       return {
 33 |         templateOptions: {
 34 |           'label': check.string,
 35 |           'required': check.boolean
 36 |         }
 37 |       };
 38 |     }
 39 |   //}, {
 40 |   //  name: 'dropdown',
 41 |   //  template: require('./fields/lx-dropdown.html')
 42 |   }, {
 43 |     name: 'flex',
 44 |     template: require('./fields/lx-flex.html'),
 45 |     apiCheck: function(check) {
 46 |       return {};
 47 |     }
 48 |   }, {
 49 |     name: 'input',
 50 |     template: require('./fields/lx-input.html'),
 51 |     apiCheck: function(check) {
 52 |       return {
 53 |         templateOptions: {
 54 |           label: check.string,
 55 |           icon: check.string,
 56 |           fixedLabel: check.boolean,
 57 |           disabled: check.boolean,
 58 |           className: check.string,
 59 |           theme: check.oneOf(['light', 'dark']),
 60 |           type: check.oneOf(['text', 'number', 'email', 'password', 'url', 'tel']),
 61 |           required: check.boolean
 62 |         }
 63 |       };
 64 |     }
 65 |   }, {
 66 |     name: 'radio',
 67 |     template: require('./fields/lx-radio.html'),
 68 |     apiCheck: function (check) {
 69 |       return {
 70 |         templateOptions: {
 71 |           label: check.string,
 72 |           description: check.string,
 73 |           options: check.arrayOf({
 74 |             name: check.string,
 75 |             value: check.oneOfType([check.string, check.number]),
 76 |             disabled: check.boolean
 77 |           }),
 78 |           inline: check.boolean,
 79 |           required: check.boolean
 80 |         }
 81 |       };
 82 |     }
 83 |   }, {
 84 |     name: 'select',
 85 |     template: require('./fields/lx-select.html'),
 86 |     apiCheck: function(check) {
 87 |       return {
 88 |         templateOptions: {
 89 |           label: check.string,
 90 |           placeholder: check.string,
 91 |           'min-length': check.number,
 92 |           'allow-clear': check.boolean,
 93 |           'ng-attr-multiple': check.boolean,
 94 |           selected: check.string,
 95 |           selected2: check.string,
 96 |           choice: check.string,
 97 |           choice2: check.string,
 98 |           choices: check.array,
 99 |           required: check.boolean
100 |         }
101 |       };
102 |     }
103 |     //}, {
104 |     //	name: 'select-async',
105 |     //	template: require('./fields/lx-select-async.html')
106 |   }, {
107 |     name: 'switch',
108 |     template: require('./fields/lx-switch.html'),
109 |     apiCheck: function(check) {
110 |       return {
111 |         templateOptions: {
112 |           label: check.string,
113 |           description: check.string,
114 |           checked: check.boolean,
115 |           required: check.boolean
116 |         }
117 |       };
118 |     }
119 |   }, {
120 |     name: 'textarea',
121 |     template: require('./fields/lx-textarea.html'),
122 |     apiCheck: function(check) {
123 |       return {
124 |         templateOptions: {
125 |           label: check.string,
126 |           icon: check.string,
127 |           theme: check.oneOf(['light', 'dark']),
128 |           required: check.boolean,
129 |           rows: check.number,
130 |           cols: check.number
131 |         }
132 |       };
133 |     }
134 |   }];
135 |   var WRAPPERS = [{
136 |     name: 'wrapper-div',
137 |     template: require('./wrappers/lx-wrapper-div.html')
138 |   }, {
139 |     name: 'wrapper-errors',
140 |     template: require('./wrappers/lx-wrapper-errors.html')
141 |   }, {
142 |     name: 'wrapper-flex',
143 |     template: require('./wrappers/lx-wrapper-flex.html')
144 |   }, {
145 |     name: 'wrapper-inline',
146 |     template: require('./wrappers/lx-wrapper-inline.html')
147 |   }];
148 | 
149 |   function _prefixer(name) {
150 |     return PREFIX + '-' + name;
151 |   }
152 | 
153 |   function _wrapperTemplateUrl(name) {
154 |     return 'wrappers/formly-wrappers-' + _prefixer(name) + '.html';
155 |   }
156 | 
157 |   function _fieldTemplateUrl(name) {
158 |     return 'fields/formly-fields-' + _prefixer(name) + '.html';
159 |   }
160 | 
161 |   /*@ngInject*/
162 |   function setWrappers(formlyConfigProvider) {
163 |     if (USING_TEMPLATES) {
164 |       WRAPPERS.map(function (wrapper) {
165 |         formlyConfigProvider.setWrapper({
166 |           name: _prefixer(wrapper.name),
167 |           templateUrl: _wrapperTemplateUrl(wrapper.name)
168 |         });
169 |         return _prefixer(wrapper.name);
170 |       });
171 |     }
172 |   }
173 | 
174 |   /*@ngInject*/
175 |   function setFields(formlyConfig, formlyApiCheck) {
176 |     var c = formlyApiCheck;
177 |     if (USING_TEMPLATES) {
178 |         FIELDS.map(function (field) {
179 |           formlyConfig.setType({
180 |             name: _prefixer(field.name),
181 |             templateUrl: _fieldTemplateUrl(field.name),
182 |             apiCheck: function (c) {
183 |               return field.apiCheck;
184 |             }
185 |           });
186 |         });
187 |       }
188 |     }
189 | 
190 |   function setDefaults(formlyConfig, formlyValidationMessages) {
191 |     formlyConfig.extras.ngModelAttrsManipulatorPreferBound = true;
192 |     VALIDATION_MESSAGES.map(function (validation) {
193 |       formlyValidationMessages.addStringMessage(validation.name, validation.message);
194 |     });
195 |     formlyValidationMessages.messages.pattern = function (viewValue, modelValue) {
196 |       return (viewValue || modelValue) + ' is invalid';
197 |     };
198 |   }
199 | 
200 |   function cacheTemplates($templateCache) {
201 |     if (USING_TEMPLATES) {
202 |       FIELDS.map(function (field) {
203 |         $templateCache.put(_fieldTemplateUrl(field.name), field.template);
204 |       });
205 |       WRAPPERS.map(function (wrapper) {
206 |         $templateCache.put(_wrapperTemplateUrl(wrapper.name), wrapper.template);
207 |       });
208 |     }
209 |   }
210 | 
211 |   angular.module(MODULE_NAME, [
212 |     'formly'
213 |   ]).config(setWrappers).run(setFields).run(setDefaults).run(cacheTemplates);
214 | }());
215 | 


--------------------------------------------------------------------------------
/src/wrappers/lx-wrapper-div.html:
--------------------------------------------------------------------------------
1 | 

3 | 	
4 | 



--------------------------------------------------------------------------------
/src/wrappers/lx-wrapper-errors.html:
--------------------------------------------------------------------------------
 1 | 

 2 | 	
 3 | 	
    
 5 | 		
  • 
 7 | 			{{message(fc.$viewValue, fc.$modelValue, this)}}
 8 | 		
    • 
 9 | 	

10 | 	
12 | 	{{::to.pending || 'Checking...'}}
13 | 	
14 | 

15 | 


--------------------------------------------------------------------------------
/src/wrappers/lx-wrapper-flex.html:
--------------------------------------------------------------------------------
1 | 

5 | 	
6 | 



--------------------------------------------------------------------------------
/src/wrappers/lx-wrapper-inline.html:
--------------------------------------------------------------------------------
1 | 
2 | 	{{::to.inline.before}}
3 | 	
4 | 		
5 | 	
6 | 	{{::to.inline.after}}
7 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var webpack = require('webpack'),
 4 | 	path = require('path');
 5 | 
 6 | module.exports = {
 7 | 	context: __dirname + '/src',
 8 | 	entry: './index.js',
 9 | 	output: {
10 | 		path: __dirname + '/dist',
11 | 		filename: 'formlyLumx.js'
12 | 	},
13 | 	//stats: {
14 | 	//	colors: true,
15 | 	//	reasons: true
16 | 	//},
17 | 	devtool: '#inline-source-maps',
18 | 	debug: true,
19 | 
20 | 	resolve: {
21 | 		extensions: ['', '.js'],
22 | 		modulesDirectories: ['node_modules']
23 | 	},
24 | 
25 | 	module: {
26 | 		loaders: [
27 | 			{
28 | 				test: /\.js$/,
29 | 				loader: 'ng-annotate!babel!jshint',
30 | 				exclude: /node_modules|dist|bower_components/
31 | 			}, {
32 | 				test: /\.html$/,
33 | 				loader: 'raw'
34 | 			}, {
35 | 				test: /\.scss$/,
36 | 				loader: 'style!css!sass'
37 | 			}, {
38 | 				test: /\.css$/,
39 | 				loader: 'style!css!postcss'
40 | 			}
41 | 		]
42 | 	},
43 | 	postcss: [
44 | 		require('postcss-nested'),
45 | 		require('autoprefixer'),
46 | 		require('csswring')
47 | 	],
48 | 	plugins: [
49 | 	]
50 | };
51 | 


--------------------------------------------------------------------------------