├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── WskAngular.iml ├── example ├── .sass-cache │ ├── 0e58fe27a5417ce9aef9d90b967a957b8980b474 │ │ └── _list.scssc │ ├── 184417ade616ce2a848902a9d8dc614398f117d7 │ │ └── ic_extension_48px.scssc │ ├── 28eff943836d2230cdd018c6a0fc7a0997c70790 │ │ └── _card.scssc │ ├── 431aa44352080a12c64a4f90c64de7633e78b743 │ │ └── _h5bp.scssc │ ├── 4f4fd3da4b07e2e71f2b13a4168f5e10c5f71496 │ │ └── _ripple.scssc │ ├── 5bab00b2e512cbc807fc61fc2ebe19c48d9d48df │ │ └── _bottombar.scssc │ ├── 94c5d6eb51e53a18f87ec9e543900cd037225d38 │ │ └── _layout.scssc │ ├── a503719046dc334f2dbe68c6e63df73c5e48246c │ │ └── _animation.scssc │ ├── a7d2c552e279756bf51338c57b07fb4ba8482566 │ │ ├── _colors.scssc │ │ ├── _material_icons.scssc │ │ └── main.scssc │ ├── ac482f9e7a6a030f78954a40f0a08ebaeda17d4b │ │ └── _textfield.scssc │ ├── accd3eb2bc0bc9f4c6b736fe48820a03e641386a │ │ └── _mini_footer-flex.scssc │ ├── b3f255b4446c5beca22a53701195aa2be69f01ae │ │ └── svg-utils.scssc │ ├── ca86aefffcb8050b01f8b7f6e69460635171f624 │ │ └── _palette.scssc │ ├── cbb2901a47f253c2aa89446c7ff35bec6793bb82 │ │ └── _typography.scssc │ ├── ef2e2fc6c80581918028b1350557ce85565bf63a │ │ └── _shadow.scssc │ └── ff9e9af21f3e8579057faf8c29f31ca03b9f36a7 │ │ └── _colors.scssc ├── _colors.scss ├── _images │ ├── README.txt │ ├── bottombar.png │ ├── card-bottombar-330.jpg │ ├── card-bottombar.jpg │ ├── card-headerfooter-330.jpg │ ├── card-headerfooter.jpg │ ├── card-spa-330.jpg │ ├── card-spa.jpg │ ├── card-spa.png │ └── headerfooter.png ├── _material_icons.scss ├── index.html ├── layout-header-drawer-footer │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── pubspec.yaml │ └── web │ │ ├── images │ │ ├── app-icon.png │ │ └── desktop-handsfree-hero.jpg │ │ ├── index.html │ │ ├── main.dart │ │ └── styles │ │ ├── _colors.scss │ │ └── demo.scss ├── layout-header-drawer │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── pubspec.yaml │ └── web │ │ ├── images │ │ ├── app-icon.png │ │ └── desktop-handsfree-hero.jpg │ │ ├── index.html │ │ ├── main.dart │ │ └── styles │ │ ├── _colors.scss │ │ └── demo.scss ├── layout-single-page-application │ ├── .gitignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── pubspec.yaml │ └── web │ │ ├── images │ │ ├── app-icon.png │ │ └── desktop-handsfree-hero.jpg │ │ ├── index.html │ │ ├── main.dart │ │ ├── styles │ │ ├── _colors.scss │ │ ├── _material_icons.scss │ │ └── demo.scss │ │ └── views │ │ ├── about.html │ │ ├── home.html │ │ ├── page1.html │ │ └── page2.html ├── localindex.html ├── main.scss ├── styleguide │ ├── lib │ │ ├── custom_dialog │ │ │ ├── custom_dialog.dart │ │ │ └── custom_dialog.html │ │ └── pretty_print │ │ │ └── pretty_print.dart │ ├── pubspec.yaml │ └── web │ │ ├── assets │ │ ├── css │ │ │ ├── images │ │ │ │ ├── avatar.png │ │ │ │ ├── down_arrow.svg │ │ │ │ └── up_arrow.svg │ │ │ └── styleguide.css.map │ │ ├── images │ │ │ ├── img-1.png │ │ │ ├── img-2.png │ │ │ └── mangues.jpg │ │ └── scss │ │ │ ├── _colors.scss │ │ │ ├── _demo │ │ │ ├── _accordion.scss │ │ │ ├── _animation.scss │ │ │ ├── _badge.scss │ │ │ ├── _button.scss │ │ │ ├── _card.scss │ │ │ ├── _dialog.scss │ │ │ ├── _draganddrop.scss │ │ │ ├── _footer.scss │ │ │ ├── _gettingstarted.scss │ │ │ ├── _home.scss │ │ │ ├── _icon-toggle.scss │ │ │ ├── _nav-pills.scss │ │ │ ├── _pallet.scss │ │ │ ├── _panel.scss │ │ │ ├── _prettyprint.scss │ │ │ ├── _radio.scss │ │ │ ├── _shadow.scss │ │ │ ├── _slider.scss │ │ │ ├── _source.scss │ │ │ ├── _styleguide.scss │ │ │ ├── _switch.scss │ │ │ ├── _tabs.scss │ │ │ ├── _textfield.scss │ │ │ ├── _toast.scss │ │ │ ├── _tooltip.scss │ │ │ └── _typography.scss │ │ │ └── styleguide.scss │ │ ├── index.html │ │ ├── main.dart │ │ └── views │ │ ├── _template.html │ │ ├── accordion.html │ │ ├── animation.html │ │ ├── badge.html │ │ ├── button.html │ │ ├── cards.html │ │ ├── checkbox.html │ │ ├── dialog.html │ │ ├── directives │ │ ├── scrollshadow.html │ │ └── usage │ │ │ └── scrollshadow.html │ │ ├── draganddrop.html │ │ ├── dropdown.html │ │ ├── firstsub.html │ │ ├── footer.html │ │ ├── gettingstarted.html │ │ ├── home.html │ │ ├── icon-toggle.html │ │ ├── item.html │ │ ├── list.html │ │ ├── nav-pills.html │ │ ├── pallet.html │ │ ├── panel.html │ │ ├── radio.html │ │ ├── shadow.html │ │ ├── slider.html │ │ ├── spinner.html │ │ ├── switch.html │ │ ├── tabs.html │ │ ├── textfield.html │ │ ├── theming.html │ │ ├── toast.html │ │ ├── tooltip.html │ │ ├── typography.html │ │ └── usage │ │ ├── badge.html │ │ ├── nav-pills.html │ │ ├── panel.html │ │ └── toast.html ├── wsk_accordion │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_animation │ ├── pubspec.yaml │ └── web │ │ ├── demo.css │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_badge │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_button │ ├── pubspec.yaml │ └── web │ │ ├── demo.css │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_checkbox │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_dialog │ ├── lib │ │ └── custom_dialog │ │ │ ├── custom_dialog.dart │ │ │ └── custom_dialog.html │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── images │ │ └── mangues.jpg │ │ ├── index.html │ │ └── main.dart ├── wsk_dragdrop │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ ├── main.dart │ │ └── views │ │ └── src │ │ └── html │ │ └── draganddrop.html ├── wsk_icon_toggle │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_item │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_layout │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── images │ │ ├── app-icon.png │ │ └── desktop-handsfree-hero.jpg │ │ ├── index.html │ │ └── main.dart ├── wsk_nav-pills │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_panel │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_radio │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_slider │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_spinner │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_switch │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_tabs │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_textfield │ ├── pubspec.yaml │ └── web │ │ ├── demo.css.map │ │ ├── demo.scss │ │ ├── index.html │ │ └── main.dart ├── wsk_toast │ ├── pubspec.yaml │ └── web │ │ ├── demo.scss │ │ ├── index.html │ │ ├── main.dart │ │ └── views │ │ └── src │ │ └── html │ │ └── draganddrop.html └── wsk_tooltip │ ├── pubspec.yaml │ └── web │ ├── demo.scss │ ├── index.html │ └── main.dart ├── lib ├── decorators │ ├── navactivator.dart │ └── scrollshadow.dart ├── images │ └── screenshot.png ├── sass │ ├── _wsk_colors.scss │ ├── wsk_accordion │ │ └── _wsk_accordion.scss │ ├── wsk_animation │ │ └── _wsk_animation.scss │ ├── wsk_badge │ │ └── _wsk_badge.scss │ ├── wsk_bottombar │ │ └── _wsk_bottombar.scss │ ├── wsk_button │ │ └── _wsk_button.scss │ ├── wsk_card │ │ └── _wsk_card.scss │ ├── wsk_checkbox │ │ └── _wsk_checkbox.scss │ ├── wsk_column-layout │ │ └── _wsk_column-layout.scss │ ├── wsk_demo │ │ └── _wsk_demo.scss │ ├── wsk_dialog │ │ └── _wsk_dialog.scss │ ├── wsk_dragdrop │ │ └── _wsk_dragdrop.scss │ ├── wsk_dropdown-menu │ │ └── _wsk_dropdown-menu.scss │ ├── wsk_footer │ │ ├── _wsk_mega_footer.scss │ │ ├── _wsk_mini_footer-flex.scss │ │ └── _wsk_mini_footer.scss │ ├── wsk_icon-toggle │ │ └── _wsk_icon-toggle.scss │ ├── wsk_item │ │ └── _wsk_item.scss │ ├── wsk_layout │ │ └── _wsk_layout.scss │ ├── wsk_list │ │ └── _wsk_list.scss │ ├── wsk_nav-pills │ │ └── _wsk_nav-pills.scss │ ├── wsk_palette │ │ └── _wsk_palette.scss │ ├── wsk_panel │ │ └── _wsk_panel.scss │ ├── wsk_radio │ │ └── _wsk_radio.scss │ ├── wsk_resets │ │ ├── _mobile.scss │ │ └── _wsk_h5bp.scss │ ├── wsk_ripple │ │ └── _wsk_ripple.scss │ ├── wsk_shadow │ │ └── _wsk_shadow.scss │ ├── wsk_slider │ │ └── _wsk_slider.scss │ ├── wsk_spinner │ │ └── _wsk_spinner.scss │ ├── wsk_styleguide_demo_bp.scss │ ├── wsk_switch │ │ └── _wsk_switch.scss │ ├── wsk_tabs │ │ └── _wsk_tabs.scss │ ├── wsk_textfield │ │ └── _wsk_textfield.scss │ ├── wsk_toast │ │ └── _wsk_toast.scss │ ├── wsk_tooltip │ │ └── _wsk_tooltip.scss │ └── wsk_typography │ │ └── _wsk_typography.scss ├── services │ └── LoadChecker.dart ├── src │ ├── UpgradableComponent.dart │ ├── WskAngularCheckbox.dart │ ├── WskAngularComponent.dart │ └── WskAngularUtils.dart ├── wsk_accordion │ ├── wsk_accordion.dart │ ├── wsk_accordion.html │ └── wsk_accordion_group.html ├── wsk_angular.dart ├── wsk_animation │ ├── wsk_animation.dart │ └── wsk_animation.html ├── wsk_badge │ ├── wsk_badge.dart │ └── wsk_badge.html ├── wsk_button │ ├── wsk_button.dart │ └── wsk_button.html ├── wsk_checkbox │ ├── wsk_checkbox.dart │ └── wsk_checkbox.html ├── wsk_dialog │ ├── src │ │ ├── AlertDialog.dart │ │ ├── ConfirmDialog.dart │ │ ├── DialogElement.dart │ │ ├── WskDialog.dart │ │ └── utils.dart │ ├── wsk_alert-dialog.html │ ├── wsk_confirm-dialog.html │ └── wsk_dialog.dart ├── wsk_dragdrop │ ├── README.md │ ├── src │ │ ├── wsk_draggable.dart │ │ └── wsk_dropzone.dart │ └── wsk_dragdrop.dart ├── wsk_icon_toggle │ ├── wsk_icon_toggle.dart │ └── wsk_icon_toggle.html ├── wsk_item │ ├── wsk_item.dart │ └── wsk_item.html ├── wsk_layout │ ├── wsk_layout.dart │ └── wsk_layout.html ├── wsk_nav-pills │ └── wsk_nav-pills.dart ├── wsk_panel │ └── wsk_panel.dart ├── wsk_radio │ ├── wsk_radio.dart │ └── wsk_radio.html ├── wsk_slider │ ├── wsk_slider.dart │ └── wsk_slider.html ├── wsk_spinner │ ├── wsk_spinner.dart │ └── wsk_spinner.html ├── wsk_switch │ ├── wsk_switch.dart │ └── wsk_switch.html ├── wsk_tabs │ ├── wsk_tabs.dart │ └── wsk_tabs.html ├── wsk_textfield │ ├── wsk_textfield.dart │ └── wsk_textfield.html ├── wsk_toast │ ├── wsk_toast.dart │ └── wsk_toast.html └── wsk_tooltip │ ├── wsk_tooltip.dart │ └── wsk_tooltip.html ├── pubspec.yaml └── test └── all_test.dart /.gitignore: -------------------------------------------------------------------------------- 1 | .buildlog 2 | .DS_Store 3 | .idea 4 | .pub/ 5 | build/ 6 | packages 7 | pubspec.lock 8 | *.temp 9 | *.tmp 10 | *.css 11 | .bs 12 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at), 2 | IT-Consulting and Development Limited, Austrian Branch 3 | 4 | All rights reserved. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Redistribution and use in source and binary forms, with or without 13 | modification, are permitted provided that the following conditions are met: 14 | * Redistributions of source code must retain the above copyright 15 | notice, this list of conditions and the following disclaimer. 16 | * Redistributions in binary form must reproduce the above copyright 17 | notice, this list of conditions and the following disclaimer in the 18 | documentation and/or other materials provided with the distribution. 19 | * Neither the name of the Michael Mitterer, IT-Consulting 20 | and Development Limited, Austrian Branch, nor the 21 | names of its contributors may be used to endorse or promote products 22 | derived from this software without specific prior written permission. 23 | 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 25 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 26 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 27 | DISCLAIMED. IN NO EVENT SHALL Michael Mitterer, 28 | IT-Consulting and Development Limited, Austrian Branch, BE LIABLE FOR ANY 29 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 30 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 31 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 32 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 34 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web Starter Kit - Material Style for Angular + Dart 2 | 3 | The WSK-Angular project is an implementation of Material Design in AngularDart 4 | with Googles Web Starter Kit. 5 | 6 | This project provides a set of reusable and accessible UI components 7 | based on the Material Design system. 8 | 9 | Web Starter Kit strives to give you a high performance starting point out of the box 10 | Responsive layout is included with the kit that adapts to fit the device your user is viewing it on. 11 | 12 | ![Screenshot styleguide][screenshot] 13 | 14 | ##Usage## 15 | There are several [samples][allsamples] for you to play with. 16 | Please take a look at their [source code][allsamples] 17 | 18 | You can also try out the samples in your regular browser: 19 | **[wsk.angular.mikemitterer.at][live]** 20 | 21 | If you have multiple views in your AngularDart application then don't forget to add these views 22 | to pubspec.yaml (Check out the styleguide-sample) 23 | 24 | The base-module for wsk_angular is [wsk_material][wskmaterial] 25 | 26 | ## Features and bugs 27 | 28 | Please file feature requests and bugs at the [issue tracker][tracker]. 29 | 30 | ###License### 31 | 32 | Copyright 2015 Michael Mitterer (office@mikemitterer.at), 33 | IT-Consulting and Development Limited, Austrian Branch 34 | 35 | Licensed under the Apache License, Version 2.0 (the "License"); 36 | you may not use this file except in compliance with the License. 37 | You may obtain a copy of the License at 38 | 39 | http://www.apache.org/licenses/LICENSE-2.0 40 | 41 | Unless required by applicable law or agreed to in writing, 42 | software distributed under the License is distributed on an 43 | "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, 44 | either express or implied. See the License for the specific language 45 | governing permissions and limitations under the License. 46 | 47 | If this plugin is helpful for you - please [(Circle)](http://gplus.mikemitterer.at/) me 48 | or **star** this repo here on GitHub 49 | 50 | 51 | [tracker]: https://github.com/MikeMitterer/dart-wsk-angular/issues 52 | [wskmaterial]: https://github.com/MikeMitterer/dart-wsk-material 53 | [live]: http://wsk.angular.mikemitterer.at/ 54 | [allsamples]: https://github.com/MikeMitterer/dart-wsk-angular/tree/master/example 55 | [screenshot]: https://github.com/MikeMitterer/dart-wsk-angular/raw/master/lib/images/screenshot.png?raw=true 56 | -------------------------------------------------------------------------------- /example/.sass-cache/0e58fe27a5417ce9aef9d90b967a957b8980b474/_list.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/0e58fe27a5417ce9aef9d90b967a957b8980b474/_list.scssc -------------------------------------------------------------------------------- /example/.sass-cache/184417ade616ce2a848902a9d8dc614398f117d7/ic_extension_48px.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/184417ade616ce2a848902a9d8dc614398f117d7/ic_extension_48px.scssc -------------------------------------------------------------------------------- /example/.sass-cache/28eff943836d2230cdd018c6a0fc7a0997c70790/_card.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/28eff943836d2230cdd018c6a0fc7a0997c70790/_card.scssc -------------------------------------------------------------------------------- /example/.sass-cache/431aa44352080a12c64a4f90c64de7633e78b743/_h5bp.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/431aa44352080a12c64a4f90c64de7633e78b743/_h5bp.scssc -------------------------------------------------------------------------------- /example/.sass-cache/4f4fd3da4b07e2e71f2b13a4168f5e10c5f71496/_ripple.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/4f4fd3da4b07e2e71f2b13a4168f5e10c5f71496/_ripple.scssc -------------------------------------------------------------------------------- /example/.sass-cache/5bab00b2e512cbc807fc61fc2ebe19c48d9d48df/_bottombar.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/5bab00b2e512cbc807fc61fc2ebe19c48d9d48df/_bottombar.scssc -------------------------------------------------------------------------------- /example/.sass-cache/94c5d6eb51e53a18f87ec9e543900cd037225d38/_layout.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/94c5d6eb51e53a18f87ec9e543900cd037225d38/_layout.scssc -------------------------------------------------------------------------------- /example/.sass-cache/a503719046dc334f2dbe68c6e63df73c5e48246c/_animation.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/a503719046dc334f2dbe68c6e63df73c5e48246c/_animation.scssc -------------------------------------------------------------------------------- /example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/_colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/_colors.scssc -------------------------------------------------------------------------------- /example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/_material_icons.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/_material_icons.scssc -------------------------------------------------------------------------------- /example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/a7d2c552e279756bf51338c57b07fb4ba8482566/main.scssc -------------------------------------------------------------------------------- /example/.sass-cache/ac482f9e7a6a030f78954a40f0a08ebaeda17d4b/_textfield.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/ac482f9e7a6a030f78954a40f0a08ebaeda17d4b/_textfield.scssc -------------------------------------------------------------------------------- /example/.sass-cache/accd3eb2bc0bc9f4c6b736fe48820a03e641386a/_mini_footer-flex.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/accd3eb2bc0bc9f4c6b736fe48820a03e641386a/_mini_footer-flex.scssc -------------------------------------------------------------------------------- /example/.sass-cache/b3f255b4446c5beca22a53701195aa2be69f01ae/svg-utils.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/b3f255b4446c5beca22a53701195aa2be69f01ae/svg-utils.scssc -------------------------------------------------------------------------------- /example/.sass-cache/ca86aefffcb8050b01f8b7f6e69460635171f624/_palette.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/ca86aefffcb8050b01f8b7f6e69460635171f624/_palette.scssc -------------------------------------------------------------------------------- /example/.sass-cache/cbb2901a47f253c2aa89446c7ff35bec6793bb82/_typography.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/cbb2901a47f253c2aa89446c7ff35bec6793bb82/_typography.scssc -------------------------------------------------------------------------------- /example/.sass-cache/ef2e2fc6c80581918028b1350557ce85565bf63a/_shadow.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/ef2e2fc6c80581918028b1350557ce85565bf63a/_shadow.scssc -------------------------------------------------------------------------------- /example/.sass-cache/ff9e9af21f3e8579057faf8c29f31ca03b9f36a7/_colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/.sass-cache/ff9e9af21f3e8579057faf8c29f31ca03b9f36a7/_colors.scssc -------------------------------------------------------------------------------- /example/_images/README.txt: -------------------------------------------------------------------------------- 1 | Basis für SS: 2 | 847 x 656 ( Dart-Playground settings) 3 | 4 | 900 x 507 5 | 6 | wsk-card-img-container: 7 | 330 x 186 (1,774) 8 | 9 | ImageMagick 10 | convert bottombar.png -resize 300x bottombar-300.png 11 | 12 | find . -regex './[a-z0-9A-Z]*\.png' 13 | mogrify -resize 300x -set filename:name "%t-300.%e" -write "%[filename:name]" bottombar.png 14 | 15 | find . -regex './[a-z0-9A-Z]*\.png' -exec mogrify -resize 300x -set filename:name "%t-300.%e" -write "%[filename:name]" {} \; 16 | find example/_images -regex '.*/[a-z0-9A-Z]*\.png' -exec mogrify -resize 300x -set filename:name "%t-300.%e" -write "example/_images/%[filename:name]" {} \; 17 | -------------------------------------------------------------------------------- /example/_images/bottombar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/bottombar.png -------------------------------------------------------------------------------- /example/_images/card-bottombar-330.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-bottombar-330.jpg -------------------------------------------------------------------------------- /example/_images/card-bottombar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-bottombar.jpg -------------------------------------------------------------------------------- /example/_images/card-headerfooter-330.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-headerfooter-330.jpg -------------------------------------------------------------------------------- /example/_images/card-headerfooter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-headerfooter.jpg -------------------------------------------------------------------------------- /example/_images/card-spa-330.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-spa-330.jpg -------------------------------------------------------------------------------- /example/_images/card-spa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-spa.jpg -------------------------------------------------------------------------------- /example/_images/card-spa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/card-spa.png -------------------------------------------------------------------------------- /example/_images/headerfooter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/_images/headerfooter.png -------------------------------------------------------------------------------- /example/_material_icons.scss: -------------------------------------------------------------------------------- 1 | @import 'packages/material_icons/sass/action/svg/production/ic_extension_48px'; 2 | .bg-ic_extension_48px { 3 | @include svg-background("48"); 4 | background-image: svg-ic_extension_48px($icon-color); 5 | } 6 | 7 | .bg-ic_extension_48px.script { 8 | @include svg-background("48"); 9 | background-image: svg-ic_extension_48px(darken($icon-color,20%)); 10 | } 11 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/.gitignore: -------------------------------------------------------------------------------- 1 | .buildlog 2 | .DS_Store 3 | .idea 4 | .pub/ 5 | build/ 6 | packages 7 | pubspec.lock 8 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.0.1 4 | 5 | - Initial version, created by Stagehand 6 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at), 2 | IT-Consulting and Development Limited, Austrian Branch 3 | 4 | All rights reserved. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Redistribution and use in source and binary forms, with or without 13 | modification, are permitted provided that the following conditions are met: 14 | * Redistributions of source code must retain the above copyright 15 | notice, this list of conditions and the following disclaimer. 16 | * Redistributions in binary form must reproduce the above copyright 17 | notice, this list of conditions and the following disclaimer in the 18 | documentation and/or other materials provided with the distribution. 19 | * Neither the name of the Michael Mitterer, IT-Consulting 20 | and Development Limited, Austrian Branch, nor the 21 | names of its contributors may be used to endorse or promote products 22 | derived from this software without specific prior written permission. 23 | 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 25 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 26 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 27 | DISCLAIMED. IN NO EVENT SHALL Michael Mitterer, 28 | IT-Consulting and Development Limited, Austrian Branch, BE LIABLE FOR ANY 29 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 30 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 31 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 32 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 34 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 35 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/README.md: -------------------------------------------------------------------------------- 1 | # Uber-simple web app 2 | 3 | Generated by Stagehand. See LICENSE. 4 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_layout_header_drawer_footer_sample 2 | version: 0.0.1 3 | description: An absolute bare-bones web app. 4 | #author: 5 | #homepage: https://www.example.com 6 | 7 | environment: 8 | sdk: '>=1.0.0 <2.0.0' 9 | 10 | dependencies: 11 | browser: any 12 | 13 | angular: ">=1.0.0 <2.0.0" 14 | 15 | wsk_angular: 16 | path: ../../ 17 | 18 | 19 | dev_dependencies: 20 | unittest: any 21 | 22 | #------------------------------------------------ 23 | transformers: 24 | - angular: 25 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 26 | 27 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 28 | html_files: [ 29 | 'web/index.html' 30 | ] 31 | 32 | - $dart2js: 33 | minify: false 34 | sourceMaps: true 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/web/images/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-header-drawer-footer/web/images/app-icon.png -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/web/images/desktop-handsfree-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-header-drawer-footer/web/images/desktop-handsfree-hero.jpg -------------------------------------------------------------------------------- /example/layout-header-drawer-footer/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.layout_header_drawer_footer; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/decorators/scrollshadow.dart'; 10 | import 'package:wsk_angular/wsk_layout/wsk_layout.dart'; 11 | 12 | 13 | /** 14 | * Entry point into app. 15 | */ 16 | main() { 17 | configLogger(); 18 | applicationFactory().addModule(new SampleModule()).run(); 19 | } 20 | 21 | /** 22 | * Demo Module 23 | */ 24 | class SampleModule extends Module { 25 | SampleModule() { 26 | bind(ScrollShadow); 27 | 28 | install(new WskLayoutModule()); 29 | 30 | // -- controllers 31 | 32 | // -- services 33 | 34 | // -- decorator 35 | 36 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 37 | } 38 | } 39 | 40 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 41 | void configLogger() { 42 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 43 | 44 | // now control the logging. 45 | // Turn off all logging first 46 | Logger.root.level = Level.INFO; 47 | Logger.root.onRecord.listen(new LogConsoleHandler()); 48 | } -------------------------------------------------------------------------------- /example/layout-header-drawer/.gitignore: -------------------------------------------------------------------------------- 1 | .buildlog 2 | .DS_Store 3 | .idea 4 | .pub/ 5 | build/ 6 | packages 7 | pubspec.lock 8 | -------------------------------------------------------------------------------- /example/layout-header-drawer/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.0.1 4 | 5 | - Initial version, created by Stagehand 6 | -------------------------------------------------------------------------------- /example/layout-header-drawer/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at), 2 | IT-Consulting and Development Limited, Austrian Branch 3 | 4 | All rights reserved. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Redistribution and use in source and binary forms, with or without 13 | modification, are permitted provided that the following conditions are met: 14 | * Redistributions of source code must retain the above copyright 15 | notice, this list of conditions and the following disclaimer. 16 | * Redistributions in binary form must reproduce the above copyright 17 | notice, this list of conditions and the following disclaimer in the 18 | documentation and/or other materials provided with the distribution. 19 | * Neither the name of the Michael Mitterer, IT-Consulting 20 | and Development Limited, Austrian Branch, nor the 21 | names of its contributors may be used to endorse or promote products 22 | derived from this software without specific prior written permission. 23 | 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 25 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 26 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 27 | DISCLAIMED. IN NO EVENT SHALL Michael Mitterer, 28 | IT-Consulting and Development Limited, Austrian Branch, BE LIABLE FOR ANY 29 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 30 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 31 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 32 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 34 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 35 | -------------------------------------------------------------------------------- /example/layout-header-drawer/README.md: -------------------------------------------------------------------------------- 1 | # Uber-simple web app 2 | 3 | Generated by Stagehand. See LICENSE. 4 | -------------------------------------------------------------------------------- /example/layout-header-drawer/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_layout_header_drawer_sample 2 | version: 0.0.1 3 | description: An absolute bare-bones web app. 4 | #author: 5 | #homepage: https://www.example.com 6 | 7 | environment: 8 | sdk: '>=1.0.0 <2.0.0' 9 | 10 | dependencies: 11 | browser: any 12 | 13 | angular: ">=1.0.0 <2.0.0" 14 | 15 | wsk_angular: 16 | path: ../../ 17 | 18 | 19 | dev_dependencies: 20 | unittest: any 21 | 22 | #------------------------------------------------ 23 | transformers: 24 | - angular: 25 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 26 | 27 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 28 | html_files: [ 29 | 'web/index.html' 30 | ] 31 | 32 | - $dart2js: 33 | minify: false 34 | sourceMaps: true 35 | 36 | 37 | -------------------------------------------------------------------------------- /example/layout-header-drawer/web/images/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-header-drawer/web/images/app-icon.png -------------------------------------------------------------------------------- /example/layout-header-drawer/web/images/desktop-handsfree-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-header-drawer/web/images/desktop-handsfree-hero.jpg -------------------------------------------------------------------------------- /example/layout-header-drawer/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.layout_header_drawer; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/decorators/scrollshadow.dart'; 10 | import 'package:wsk_angular/wsk_layout/wsk_layout.dart'; 11 | 12 | 13 | /** 14 | * Entry point into app. 15 | */ 16 | main() { 17 | configLogger(); 18 | applicationFactory().addModule(new SampleModule()).run(); 19 | } 20 | 21 | /** 22 | * Demo Module 23 | */ 24 | class SampleModule extends Module { 25 | SampleModule() { 26 | bind(ScrollShadow); 27 | 28 | install(new WskLayoutModule()); 29 | 30 | // -- controllers 31 | 32 | // -- services 33 | 34 | // -- decorator 35 | 36 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 37 | } 38 | } 39 | 40 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 41 | void configLogger() { 42 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 43 | 44 | // now control the logging. 45 | // Turn off all logging first 46 | Logger.root.level = Level.INFO; 47 | Logger.root.onRecord.listen(new LogConsoleHandler()); 48 | } -------------------------------------------------------------------------------- /example/layout-header-drawer/web/styles/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_resets/wsk_h5bp"; 2 | @import "colors"; 3 | 4 | @import 'packages/wsk_angular/sass/wsk_typography/wsk_typography'; 5 | @import 'packages/wsk_angular/sass/wsk_layout/wsk_layout'; 6 | @import 'packages/wsk_angular/sass/wsk_textfield/wsk_textfield'; 7 | @import 'packages/wsk_angular/sass/wsk_animation/wsk_animation'; 8 | @import 'packages/wsk_angular/sass/wsk_palette/wsk_palette'; 9 | @import 'packages/wsk_angular/sass/wsk_list/wsk_list'; 10 | @import "packages/wsk_angular/sass/wsk_shadow/wsk_shadow"; 11 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 12 | @import "packages/wsk_angular/sass/wsk_footer/wsk_mega_footer"; 13 | @import "packages/wsk_angular/sass/wsk_footer/wsk_mini_footer-flex"; 14 | 15 | html, body { 16 | width : 100%; 17 | height : 100%; 18 | margin : 0; 19 | padding : 0; 20 | background-color : #F4F4F4; 21 | } 22 | 23 | body { 24 | display : flex; 25 | flex-direction : column; 26 | } 27 | 28 | 29 | .wsk-layout__content { 30 | display : flex; 31 | flex-direction : row; 32 | flex-wrap : wrap; 33 | align-content : space-between; 34 | padding : 0; 35 | 36 | section { 37 | padding : 24px; 38 | flex-grow : 1; 39 | overflow : scroll; 40 | } 41 | 42 | h3 ~ h4 { 43 | padding-top : 20px; 44 | } 45 | 46 | footer { 47 | padding: 16px; 48 | width : 100%; 49 | 50 | .wsk-logo { 51 | white-space: nowrap; 52 | } 53 | } 54 | } 55 | 56 | .back-to-top { 57 | position : fixed; 58 | bottom : 500px; 59 | right : -100px; 60 | transition : all 0.3s ease-out; 61 | opacity : 0; 62 | 63 | z-index : 1; 64 | } 65 | 66 | .add-back-to-top-button .back-to-top { 67 | bottom : 68px; 68 | right : 24px; 69 | 70 | opacity : 1; 71 | transition : all 0.3s ease-in; 72 | } 73 | 74 | @media screen and (max-width : $layout-screen-size-threshold) { 75 | 76 | .back-to-top { 77 | left : auto; 78 | right : -100px; 79 | } 80 | 81 | .hide-on-mobile { 82 | display : none; 83 | } 84 | } 85 | 86 | 87 | -------------------------------------------------------------------------------- /example/layout-single-page-application/.gitignore: -------------------------------------------------------------------------------- 1 | .buildlog 2 | .DS_Store 3 | .idea 4 | .pub/ 5 | build/ 6 | packages 7 | pubspec.lock 8 | -------------------------------------------------------------------------------- /example/layout-single-page-application/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.0.1 4 | 5 | - Initial version, created by Stagehand 6 | -------------------------------------------------------------------------------- /example/layout-single-page-application/LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at), 2 | IT-Consulting and Development Limited, Austrian Branch 3 | 4 | All rights reserved. 5 | 6 | Licensed under the Apache License, Version 2.0 (the "License"); 7 | you may not use this file except in compliance with the License. 8 | You may obtain a copy of the License at 9 | 10 | http://www.apache.org/licenses/LICENSE-2.0 11 | 12 | Redistribution and use in source and binary forms, with or without 13 | modification, are permitted provided that the following conditions are met: 14 | * Redistributions of source code must retain the above copyright 15 | notice, this list of conditions and the following disclaimer. 16 | * Redistributions in binary form must reproduce the above copyright 17 | notice, this list of conditions and the following disclaimer in the 18 | documentation and/or other materials provided with the distribution. 19 | * Neither the name of the Michael Mitterer, IT-Consulting 20 | and Development Limited, Austrian Branch, nor the 21 | names of its contributors may be used to endorse or promote products 22 | derived from this software without specific prior written permission. 23 | 24 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 25 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 26 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 27 | DISCLAIMED. IN NO EVENT SHALL Michael Mitterer, 28 | IT-Consulting and Development Limited, Austrian Branch, BE LIABLE FOR ANY 29 | DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 30 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 31 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND 32 | ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 33 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 34 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 35 | -------------------------------------------------------------------------------- /example/layout-single-page-application/README.md: -------------------------------------------------------------------------------- 1 | # Uber-simple web app 2 | 3 | Generated by Stagehand. See LICENSE. 4 | -------------------------------------------------------------------------------- /example/layout-single-page-application/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_layout_single_page_application_sample 2 | version: 0.0.1 3 | description: An absolute bare-bones web Single-Page-App. 4 | #author: 5 | #homepage: https://www.example.com 6 | 7 | environment: 8 | sdk: '>=1.0.0 <2.0.0' 9 | 10 | dependencies: 11 | browser: any 12 | 13 | angular: ">=1.0.0 <2.0.0" 14 | 15 | wsk_angular: 16 | path: ../../ 17 | 18 | material_icons: any 19 | 20 | dev_dependencies: 21 | unittest: any 22 | 23 | #------------------------------------------------ 24 | transformers: 25 | - angular: 26 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 27 | 28 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 29 | html_files: [ 30 | 'web/index.html', 31 | 32 | 'web/views/home.html', 33 | 'web/views/page1.html', 34 | 'web/views/page2.html', 35 | 36 | 'web/views/about.html' 37 | ] 38 | 39 | - $dart2js: 40 | minify: false 41 | sourceMaps: true 42 | 43 | 44 | -------------------------------------------------------------------------------- /example/layout-single-page-application/web/images/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-single-page-application/web/images/app-icon.png -------------------------------------------------------------------------------- /example/layout-single-page-application/web/images/desktop-handsfree-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/layout-single-page-application/web/images/desktop-handsfree-hero.jpg -------------------------------------------------------------------------------- /example/layout-single-page-application/web/styles/_material_icons.scss: -------------------------------------------------------------------------------- 1 | @import "colors"; 2 | 3 | // sass demo.scss demo.css -r packages/material_icons/sassext/urlencode.rb 4 | $icon-color: nth($palette-primary, 2); 5 | @import "packages/material_icons/sass/svg-utils"; 6 | 7 | @import 'packages/material_icons/sass/navigation/svg/production/ic_more_vert_24px'; 8 | .bg-ic_more_vert_24px { 9 | @include svg-background("24"); 10 | @include svg-fallback("navigation/svg/production/ic_more_vert_24px.svg","navigation/2x_web/ic_more_vert_black_24dp.png","navigation/2x_web/ic_more_vert_white_24dp.png","navigation/2x_web/ic_more_vert_grey600_24dp.png"); 11 | background-image: svg-ic_more_vert_24px($icon-color); 12 | } 13 | 14 | -------------------------------------------------------------------------------- /example/layout-single-page-application/web/views/about.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

About

4 |
5 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 6 | dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 7 | clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 8 | consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 9 | sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 10 | sea takimata sanctus est Lorem ipsum dolor sit amet.

11 |
-------------------------------------------------------------------------------- /example/layout-single-page-application/web/views/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

SPA - Home

4 |

fixed footer + bottom-bar

5 |
6 | 7 | 8 |

Card 1

9 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend 10 | lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. 11 | Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id 12 | scelerisque.

13 | 14 | 15 | 16 |

Card 2

17 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend 18 | lacinia. Donec ut risus suscipit, convallis diam et, mattis urna. Phasellus sit amet ipsum nisl. 19 | Aliquam sed dictum neque. Vestibulum tempus at lacus et volutpat. Mauris molestie vel mauris id 20 | scelerisque.

21 | 22 | 23 |
-------------------------------------------------------------------------------- /example/layout-single-page-application/web/views/page1.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Page I

4 |
5 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 6 | dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 7 | clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 8 | consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 9 | sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 10 | sea takimata sanctus est Lorem ipsum dolor sit amet.

11 |
-------------------------------------------------------------------------------- /example/layout-single-page-application/web/views/page2.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Page II

4 |
5 |

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 6 | dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet 7 | clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, 8 | consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 9 | sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 10 | sea takimata sanctus est Lorem ipsum dolor sit amet.

11 |
-------------------------------------------------------------------------------- /example/styleguide/lib/custom_dialog/custom_dialog.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular_styleguide.custom_dialog; 2 | 3 | import 'dart:html' as html; 4 | import 'dart:async'; 5 | 6 | import "package:angular/angular.dart"; 7 | import 'package:angular/core/annotation_src.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:validate/validate.dart'; 11 | 12 | import 'package:wsk_material/wskcomponets.dart'; 13 | import 'package:wsk_angular/wsk_angular.dart'; 14 | import 'package:wsk_angular/wsk_dialog/wsk_dialog.dart'; 15 | 16 | 17 | /** 18 | * WskDialog Module. 19 | * More infos: https://docs.angulardart.org/#di.Module 20 | */ 21 | class CustomDialogModule extends Module { 22 | CustomDialogModule() { 23 | 24 | bind(CustomDialog); 25 | 26 | //- Services --------------------------- 27 | } 28 | } 29 | 30 | @Component(selector: "custom-dialog" ,useShadowDom: false, 31 | templateUrl: "packages/wsk_angular_styleguide/custom_dialog/custom_dialog.html") 32 | class CustomDialog extends WskDialog { 33 | static const String SELECTOR = "custom-dialog"; 34 | 35 | static const String _DEFAULT_YES_BUTTON = "Useful"; 36 | static const String _DEFAULT_NO_BUTTON = "Not Useful"; 37 | 38 | String title = ""; 39 | String text = ""; 40 | String yesButton = _DEFAULT_YES_BUTTON; 41 | String noButton = _DEFAULT_NO_BUTTON; 42 | 43 | CustomDialog(final Injector injector) : super(SELECTOR,new DialogConfig()) { 44 | Validate.notNull(injector); 45 | this.injector = injector; 46 | } 47 | 48 | CustomDialog call(final String text,{ final String title: "", 49 | final String yesButton: _DEFAULT_YES_BUTTON, final String noButton: _DEFAULT_NO_BUTTON }) { 50 | Validate.notBlank(text); 51 | Validate.notNull(title); 52 | Validate.notBlank(yesButton); 53 | Validate.notBlank(noButton); 54 | 55 | this.text = text; 56 | this.title = title; 57 | this.yesButton = yesButton; 58 | this.noButton = noButton; 59 | 60 | return this; 61 | } 62 | 63 | bool get hasTitle => (title != null && title.isNotEmpty); 64 | 65 | // - EventHandler ----------------------------------------------------------------------------- 66 | 67 | void onYes() { 68 | close(WskDialogStatus.YES); 69 | } 70 | 71 | void onNo() { 72 | close(WskDialogStatus.NO); 73 | } 74 | 75 | // - private ---------------------------------------------------------------------------------- 76 | 77 | } 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /example/styleguide/lib/custom_dialog/custom_dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{{title}}
4 |

5 | The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, 6 | cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all 7 | belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it 8 | has been distributed worldwide to become one of the most cultivated fruits in the tropics. 9 |

10 | 11 | 12 |

13 | It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of 14 | India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and 15 | leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies. 16 |

17 | 18 | 19 | {{noButton}} 20 | {{yesButton}} 21 | 22 | -------------------------------------------------------------------------------- /example/styleguide/lib/pretty_print/pretty_print.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.pretty_print; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | import 'package:prettify/prettify.dart'; 15 | 16 | /** 17 | * PrettyPrintModule Module. 18 | * Weitere Infos: https://docs.angulardart.org/#di.Module 19 | */ 20 | class PrettyPrintModule extends Module { 21 | PrettyPrintModule() { 22 | 23 | bind(PrettyPrintComponent); 24 | 25 | //- Services --------------------------- 26 | } 27 | } 28 | 29 | @Decorator( selector: '[pretty-print]' ) 30 | class PrettyPrintComponent implements ScopeAware, AttachAware { 31 | 32 | final html.Element _component; 33 | final ViewFactoryCache viewFactoryCache; 34 | final DirectiveInjector directiveInjector; 35 | final DirectiveMap directives; 36 | 37 | Scope scope; 38 | 39 | View _view; 40 | Scope _childScope; 41 | 42 | PrettyPrintComponent(final html.Element component, this.viewFactoryCache, 43 | this.directiveInjector, this.directives) : _component = component { 44 | Validate.notNull(component); 45 | } 46 | 47 | @NgAttr("url") 48 | set url(value) { 49 | _cleanUp(); 50 | if (value != null && value != '') { 51 | viewFactoryCache.fromUrl(value, directives, Uri.base).then(_updateContent); 52 | } 53 | } 54 | 55 | @override 56 | void attach() { 57 | if(!_component.attributes.containsKey("url")) { 58 | prettyPrint(); 59 | } 60 | } 61 | 62 | // - private ---------------------------------------------------------------------------------- 63 | 64 | _cleanUp() { 65 | if (_view == null) return; 66 | _view.nodes.forEach((node) => node.remove); 67 | _childScope.destroy(); 68 | _childScope = null; 69 | _component.innerHtml = ''; 70 | _view = null; 71 | } 72 | 73 | _updateContent(ViewFactory viewFactory) { 74 | // create a new scope 75 | _childScope = scope.createProtoChild(); 76 | _view = viewFactory(_childScope, directiveInjector); 77 | _view.nodes.forEach((node) => _component.append(node)); 78 | 79 | prettyPrint(); 80 | } 81 | } -------------------------------------------------------------------------------- /example/styleguide/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_styleguide 2 | description: Web Starter Kit for Angular - Styleguide 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | prettify: any 16 | 17 | dev_dependencies: 18 | unittest: any 19 | 20 | #------------------------------------------------ 21 | # Kann mit dart-ptransformers generiert werden. 22 | # 23 | 24 | transformers: 25 | - angular: 26 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 27 | 28 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 29 | html_files: [ 30 | 'web/index.html', 31 | 32 | 'web/views/gettingstarted.html', 33 | 34 | 'web/views/accordion.html', 35 | 'web/views/animation.html', 36 | 'web/views/badge.html', 37 | 'web/views/button.html', 38 | 'web/views/cards.html', 39 | 'web/views/checkbox.html', 40 | 'web/views/dialog.html', 41 | 'web/views/draganddrop.html', 42 | 'web/views/dropdown.html', 43 | 'web/views/firstsub.html', 44 | 'web/views/footer.html', 45 | 'web/views/home.html', 46 | 'web/views/icon-toggle.html', 47 | 'web/views/item.html', 48 | 'web/views/list.html', 49 | 'web/views/nav-pills.html', 50 | 'web/views/pallet.html', 51 | 'web/views/panel.html', 52 | 'web/views/radio.html', 53 | 'web/views/shadow.html', 54 | 'web/views/spinner.html', 55 | 'web/views/slider.html', 56 | 'web/views/switch.html', 57 | 'web/views/tabs.html', 58 | 'web/views/textfield.html', 59 | 'web/views/toast.html', 60 | 'web/views/tooltip.html', 61 | 'web/views/typography.html', 62 | 63 | 'web/views/directives/scrollshadow.html', 64 | 'web/views/directives/usage/scrollshadow.html', 65 | 66 | 'web/views/theming.html', 67 | 68 | 'web/views/usage/toast.html', 69 | 'web/views/usage/badge.html', 70 | 'web/views/usage/panel.html', 71 | 'web/views/usage/nav-pills.html' 72 | ] 73 | 74 | - $dart2js: 75 | minify: false 76 | sourceMaps: true 77 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/css/images/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/styleguide/web/assets/css/images/avatar.png -------------------------------------------------------------------------------- /example/styleguide/web/assets/css/images/down_arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/css/images/up_arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/images/img-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/styleguide/web/assets/images/img-1.png -------------------------------------------------------------------------------- /example/styleguide/web/assets/images/img-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/styleguide/web/assets/images/img-2.png -------------------------------------------------------------------------------- /example/styleguide/web/assets/images/mangues.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/styleguide/web/assets/images/mangues.jpg -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_accordion.scss: -------------------------------------------------------------------------------- 1 | .accordion.sample { 2 | .preview-block > h5:first-child { 3 | margin-top: 0; 4 | } 5 | 6 | h5 { margin-top: 2em; margin-bottom: 0.5em; } 7 | 8 | .toolbar { 9 | z-index: 99; 10 | position: absolute; 11 | } 12 | .toolbar i { 13 | margin: 2px 2px; 14 | display: inline-block; 15 | color: GrayText; 16 | } 17 | .toolbar i.checked, .toolbar i:hover { 18 | color: red; 19 | } 20 | .toolbar i:hover { 21 | background-color: yellow; 22 | } 23 | 24 | .custom-label { 25 | margin-left: 120px; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_badge.scss: -------------------------------------------------------------------------------- 1 | .sample.badge { 2 | section { 3 | h5 { 4 | margin-bottom: 15px; 5 | } 6 | 7 | margin-bottom: 30px; 8 | } 9 | 10 | div.toolbar { 11 | display: flex; 12 | flex-direction: row; 13 | flex-wrap: wrap; 14 | justify-content: center; // ⇾ 15 | align-content: space-between; // || 16 | align-items: center; // ↓ 17 | 18 | 19 | background : #eee; 20 | padding : 10px 10px 0 10px; 21 | height : 40px; 22 | border-radius: 5px; 23 | 24 | .wrapper { 25 | flex-grow: 1; 26 | 27 | display: flex; 28 | flex-direction: row; 29 | flex-wrap: wrap; 30 | justify-content: center; // ⇾ 31 | align-content: space-between; // || 32 | align-items: flex-start; // ↓ 33 | 34 | .icon { 35 | background-color : transparent; 36 | &.wsk-badge { 37 | opacity: 1; 38 | } 39 | border : none; 40 | display : inline-block; 41 | height : 21px; 42 | margin : 10px 25px 15px 25px; 43 | opacity : .7; 44 | outline : none; 45 | padding : 0; 46 | position : relative; 47 | width : 21px; 48 | 49 | &:hover { 50 | opacity : 1; 51 | } 52 | } 53 | } 54 | } 55 | 56 | .links { 57 | margin-top: 25px; 58 | 59 | a { 60 | text-decoration: none; 61 | font-weight: normal; 62 | 63 | margin-top: 10px; 64 | } 65 | .dark { 66 | display: block; 67 | border-radius: 5px; 68 | 69 | margin: 5px 0; 70 | padding: 15px; 71 | background-color: $layout-header-bg-color;; 72 | a { 73 | color: white; 74 | 75 | } 76 | } 77 | 78 | .fontawsom { 79 | margin-top: 25px; 80 | a, a:visited { 81 | color: black; 82 | } 83 | 84 | i.fa { 85 | font-size: 20px; 86 | margin-right: 3px; 87 | } 88 | } 89 | } 90 | 91 | .button-block { 92 | padding: 10px; 93 | } 94 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_button.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Button 3 | 4 | .button.sample { 5 | 6 | section { 7 | background-color: nth($palette-primary,1); 8 | padding: 12px; 9 | margin-bottom: 24px; 10 | } 11 | 12 | .button-block { 13 | display: inline-block; 14 | margin: 15px 20px 5px 0; 15 | } 16 | 17 | h6 { 18 | font-style: italic; 19 | } 20 | 21 | .light { 22 | font-size: 20px; 23 | 24 | &.on { 25 | color: orange; 26 | } 27 | } 28 | 29 | .disabled { 30 | text-decoration: line-through; 31 | } 32 | .wsk-checkbox { 33 | margin: 0 0 24px 0; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_card.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Card - DEMO 3 | 4 | .cards.sample { 5 | .wsk-card { 6 | margin : 0; 7 | margin-bottom: 24px; 8 | } 9 | .wsk-card:nth-child(1) { 10 | width : 310px; 11 | } 12 | .wsk-card:nth-child(2) { 13 | width : 600px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_dialog.scss: -------------------------------------------------------------------------------- 1 | .dialog.sample { 2 | .center { 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | 7 | border: 1px dotted black; 8 | border-radius: 5px; 9 | } 10 | 11 | .status { 12 | margin : 12px; 13 | span { 14 | font-weight : bold; 15 | } 16 | } 17 | } 18 | 19 | .wsk-dialog.custom-dialog { 20 | h5 { 21 | background-color: #B3D38D; 22 | 23 | position: absolute; 24 | left: 0; 25 | top: 0 !important; 26 | right: 0; 27 | padding: 24px; 28 | } 29 | 30 | .wsk-dialog__content { 31 | margin-top: 68px; // padding * 2 + font-size (20) 32 | p { 33 | font-size: 14px; 34 | } 35 | } 36 | 37 | .wsk-dialog__actions { 38 | border-top: 1px solid rgb(231, 231, 231); 39 | } 40 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_footer.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Footer 3 | 4 | .footer.sample { 5 | h5 { 6 | padding-bottom: 0.5em; 7 | } 8 | 9 | footer { 10 | margin-bottom: 24px; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_gettingstarted.scss: -------------------------------------------------------------------------------- 1 | .gettingstarted.sample { 2 | pre { 3 | //margin-left: 10px; 4 | } 5 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_home.scss: -------------------------------------------------------------------------------- 1 | .home.sample { 2 | .video { 3 | 4 | display: flex; 5 | flex-direction: column; 6 | flex-wrap: wrap; 7 | justify-content: flex-start; // ↓ 8 | align-content: space-between; // = 9 | align-items: center; // ⇾ 10 | 11 | margin: 12px 0; 12 | 13 | iframe, object, embed { 14 | width: 100%; 15 | max-width: 560px; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_icon-toggle.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Icon-Toggle - DEMO 3 | 4 | .icon-toggle.sample { 5 | 6 | ul { 7 | padding : 0; 8 | margin : 0; 9 | list-style-type : none; 10 | } 11 | span { 12 | padding-left : 6px; 13 | } 14 | 15 | .cols { 16 | display : flex; 17 | flex-direction : row; 18 | 19 | > div { 20 | padding : 10px; 21 | } 22 | } 23 | 24 | .button-block { 25 | display : inline-block; 26 | margin : 0 20px 20px 0; 27 | } 28 | 29 | .chevron-right { 30 | transition : 0.5s ease-in-out; 31 | 32 | &.rotate-45-right { 33 | transform : rotate(90deg); 34 | transition : 0.5s ease-in-out; 35 | stroke: $radio-color; 36 | } 37 | } 38 | 39 | } 40 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_nav-pills.scss: -------------------------------------------------------------------------------- 1 | .nav-pills.sample { 2 | .testblock { 3 | background-color: whitesmoke; 4 | border: 1px solid darkgrey; 5 | padding: 8px 16px; 6 | margin: 4px 0; 7 | } 8 | 9 | ul { 10 | margin-bottom: 8px; 11 | } 12 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_panel.scss: -------------------------------------------------------------------------------- 1 | .panel.sample { 2 | .wsk-panel { 3 | margin-bottom: 12px; 4 | } 5 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_prettyprint.scss: -------------------------------------------------------------------------------- 1 | .prettyprint { 2 | ol.linenums { 3 | margin-left: 0; 4 | } 5 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_radio.scss: -------------------------------------------------------------------------------- 1 | $_demo-radio-first_col_with : 280px; 2 | $_demo-radio-col_padding : 10px; 3 | 4 | .radio.sample { 5 | 6 | .preview-block { 7 | .selected { 8 | color: $radio-color; 9 | } 10 | .avatar { 11 | width: 80px; 12 | height: 80px; 13 | } 14 | 15 | .cols { 16 | display : flex; 17 | flex-direction : row; 18 | flex-wrap: wrap; 19 | } 20 | 21 | .cols > div { 22 | padding : $_demo-radio-col_padding; 23 | 24 | width: $_demo-radio-first_col_with; 25 | //min-width: $_first_col_with; 26 | 27 | max-width: ($_demo-radio-first_col_with * 1.5); 28 | } 29 | 30 | .cols > div:first-child { 31 | } 32 | 33 | hr.on-small-screens { display: none; } 34 | 35 | @media screen and (max-width: ($_demo-radio-first_col_with * 2 + ($_demo-radio-col_padding * 4)) + 50px) { 36 | hr.on-small-screens { display: block; width: 100%; } 37 | } 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_shadow.scss: -------------------------------------------------------------------------------- 1 | .shadow.sample { 2 | 3 | .preview-block { 4 | display: flex; 5 | flex-direction: row; 6 | flex-wrap: wrap; 7 | justify-content: flex-start; // ⇾ 8 | align-content: space-between; // || 9 | align-items: flex-start; // ↓ 10 | 11 | .demo-paper-card { 12 | background-color : #fff; 13 | border-radius : 2px; 14 | display : block; 15 | height : 300px; 16 | margin : 20px 0; 17 | transition-property : opacity, transform; 18 | @include material-animation-default(300ms); 19 | width : 312px; 20 | 21 | margin-right: 24px; 22 | &:last-child { 23 | margin-right: 0; 24 | } 25 | @media screen and (max-width: (360px)) { 26 | margin-right: 0; 27 | } 28 | 29 | } 30 | 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_slider.scss: -------------------------------------------------------------------------------- 1 | .slider.sample { 2 | .preview-block { 3 | width: 100%; 4 | max-width: 700px; 5 | } 6 | 7 | span i.fa { font-size: 20px; } 8 | .values { padding: 10px 20px; } 9 | .color-chooser { 10 | flex-grow: 1; 11 | 12 | box-sizing: border-box; 13 | padding: 18px 0 0 10px; 14 | margin: 5px 30px; 15 | border: 1px solid gray; 16 | border-radius: 5px; 17 | font-size: 15px; 18 | } 19 | .color-chooser wsk-slider .wsk-slider__container { 20 | top: -18px; 21 | } 22 | .cols { 23 | display: flex; 24 | flex-direction: row; 25 | flex-wrap: wrap; 26 | } 27 | .cols .logo { padding: 20px 0 0 20px; } 28 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_source.scss: -------------------------------------------------------------------------------- 1 | $source-background: nth($palette-grey, 9) !default; 2 | $source-label-background: nth($palette-grey, 2) !default; 3 | 4 | wsk-accordion-group.source { 5 | margin-bottom: 24px; 6 | 7 | .wsk-accordion { 8 | //background-color: $source-background; 9 | border-left: 1px solid $accordion-divider-color; 10 | border-right: 1px solid $accordion-divider-color; 11 | 12 | .wsk-accordion__label { 13 | background-color: $source-label-background; 14 | } 15 | 16 | .filename { 17 | font-weight: bold; 18 | } 19 | } 20 | 21 | input[name^='wsk-accordion']:checked ~ .wsk-accordion--content { 22 | max-height: 500px; 23 | height: 500px; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_styleguide.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Styleguide 3 | 4 | .styleguide-demo { 5 | 6 | wsk-layout-header .wsk-layout-title { 7 | text-transform: uppercase; 8 | font-weight: 200; 9 | 10 | @media screen and (max-width: $layout-screen-size-threshold) { 11 | //padding-left: 30px; 12 | } 13 | } 14 | 15 | wsk-drawer { 16 | .wsk-layout-title { 17 | background-color: $layout-header-bg-color; 18 | color: white; 19 | 20 | a { 21 | color: white; 22 | text-decoration: none; 23 | font-weight: 100; 24 | } 25 | 26 | .logo { 27 | margin-right: 10px; 28 | } 29 | } 30 | 31 | nav.wsk-navigation { 32 | > a { 33 | font-size: 16px; 34 | padding-left: 16px; 35 | color: $accordion-text-color; 36 | line-height: 48px; 37 | 38 | border-bottom: 1px solid $accordion-divider-color; 39 | &.no-border { 40 | border-bottom: none; 41 | } 42 | } 43 | 44 | .wsk-accordion .wsk-accordion--content { 45 | padding: 0; 46 | 47 | .wsk-navigation__link { 48 | padding-left: 48px; 49 | } 50 | 51 | } 52 | } 53 | 54 | 55 | .wsk-navigation__link { 56 | padding: 5px 24px; 57 | font-weight: 500; 58 | } 59 | 60 | nav a.active { 61 | color: $button-primary-color-alt; 62 | } 63 | } 64 | 65 | article { 66 | &.sample { 67 | margin-top : 24px; 68 | } 69 | 70 | > { 71 | h1 { padding-top: ($padding / 2); text-transform: capitalize; } 72 | 73 | h1:after { 74 | content : ''; 75 | display : block; 76 | width : 100%; 77 | border-bottom : 1px solid rgba(0, 0, 0, 0.5); 78 | margin-top : $padding; 79 | margin-bottom : $padding; 80 | } 81 | } 82 | 83 | } 84 | } 85 | 86 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_switch.scss: -------------------------------------------------------------------------------- 1 | 2 | $_demo-switch-first_col_with : 280px; 3 | $_demo-switch-col_padding : 10px; 4 | 5 | .switch.sample { 6 | 7 | .cols { 8 | display : flex; 9 | flex-direction : row; 10 | flex-wrap: wrap; 11 | } 12 | 13 | .cols > div { 14 | padding : $_demo-switch-col_padding; 15 | 16 | width: $_demo-switch-first_col_with; 17 | //min-width: $_first_col_with; 18 | 19 | max-width: ($_demo-switch-first_col_with * 1.5); 20 | } 21 | 22 | 23 | .light { 24 | font-size: 20px; 25 | 26 | &.on { 27 | color: orange; 28 | } 29 | } 30 | 31 | @media screen and (max-width: ($_demo-switch-first_col_with * 2 + ($_demo-switch-col_padding * 4)) + 50px) { 32 | hr.on-small-screens { display: block; width: 100%; } 33 | } 34 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_tabs.scss: -------------------------------------------------------------------------------- 1 | .styleguide-demo article.tabs.sample { 2 | margin-top: 0; 3 | 4 | wsk-tabs-panel { 5 | margin: 0 24px; 6 | } 7 | } 8 | 9 | body > main section.content.tabs { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_textfield.scss: -------------------------------------------------------------------------------- 1 | $_demo-textarea-first_col_with : 280px; 2 | $_demo-textarea-col_padding : 10px; 3 | 4 | .textfield.sample { 5 | 6 | .cols { 7 | display : flex; 8 | flex-direction : row; 9 | flex-wrap: wrap; 10 | } 11 | 12 | 13 | .cols > div { 14 | &:first-child { 15 | width: $_demo-textarea-first_col_with; 16 | max-width: ($_demo-textarea-first_col_with * 1.2); 17 | } 18 | 19 | flex-grow: 1; 20 | padding : $_demo-textarea-col_padding; 21 | 22 | //min-width: $_first_col_with; 23 | 24 | } 25 | 26 | textarea { 27 | overflow : auto; 28 | resize : none; 29 | } 30 | 31 | form { 32 | padding-bottom: 30px; 33 | } 34 | 35 | @media screen and (max-width: ($_demo-textarea-first_col_with * 2 + ($_demo-textarea-col_padding * 4)) + 50px) { 36 | hr.on-small-screens { display: block; width: 100%; } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_toast.scss: -------------------------------------------------------------------------------- 1 | .toast.sample { 2 | .container { 3 | position: relative; 4 | border: 1px dotted black; 5 | min-height: 200px; 6 | border-radius: 5px; 7 | padding: 5px; 8 | margin-bottom: 20px; 9 | } 10 | 11 | .status { 12 | margin: 12px; 13 | span { 14 | font-weight: bold; 15 | } 16 | } 17 | 18 | .position { 19 | display: flex; 20 | flex-direction: row; 21 | flex-wrap: wrap; 22 | justify-content: flex-start; // ⇾ 23 | align-content: space-between; // || 24 | align-items: flex-start; // ↓ 25 | 26 | margin-left: 24px; 27 | 28 | > * { 29 | margin-right: 10px; 30 | } 31 | } 32 | } 33 | 34 | body > .wsk-toast-container { 35 | .wsk-toast { 36 | &.wsk-toast--top { 37 | top: $layout-header-desktop-row-height; 38 | @media screen and (max-width: $layout-screen-size-threshold) { 39 | top: $layout-header-mobile-row-height; 40 | } 41 | } 42 | } 43 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_tooltip.scss: -------------------------------------------------------------------------------- 1 | .tooltip.sample { 2 | .preview-block { 3 | display: flex; 4 | flex-wrap: wrap; 5 | 6 | background : #eee; 7 | padding : 20px; 8 | 9 | &:first-of-type { 10 | margin-bottom: 20px; 11 | 12 | } 13 | 14 | label { 15 | padding-right: 1em; 16 | } 17 | 18 | } 19 | 20 | .icon { 21 | background-color: transparent; 22 | border: none; 23 | display: inline-block; 24 | height: 21px; 25 | margin: 0 50px; 26 | opacity: .7; 27 | outline: none; 28 | padding: 0; 29 | position: relative; 30 | width: 21px; 31 | } 32 | 33 | icon:hover { 34 | opacity: 1; 35 | } 36 | } -------------------------------------------------------------------------------- /example/styleguide/web/assets/scss/_demo/_typography.scss: -------------------------------------------------------------------------------- 1 | //------------------------------------------------------------------------------------------------- 2 | // Typography - DEMO 3 | 4 | .typography.sample { 5 | 6 | table th { 7 | @include typo-caption($colorContrast: true); 8 | 9 | padding-right: 80px; 10 | 11 | vertical-align: top; 12 | text-align: left; 13 | } 14 | 15 | .preview-block--white { 16 | background-color: white; 17 | color: black; 18 | } 19 | 20 | .preview-block--black { 21 | background-color: black; 22 | color: white; 23 | } 24 | 25 | .preview-block--white, 26 | .preview-block--black, 27 | .preview-block--img-1, 28 | .preview-block--img-2 { 29 | width: 360px; 30 | height: 272px; 31 | 32 | padding: 16px; 33 | box-sizing: border-box; 34 | } 35 | 36 | .preview-block--img-1 { 37 | background-image: url(../images/img-1.png); 38 | color: white; 39 | } 40 | 41 | .preview-block--img-2 { 42 | background-image: url(../images/img-2.png); 43 | color: white; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /example/styleguide/web/views/_template.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 |
8 |
9 |
10 | -------------------------------------------------------------------------------- /example/styleguide/web/views/animation.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
7 |
Click me to animate
8 |
9 |
10 |
11 | 12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /example/styleguide/web/views/checkbox.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | Check me out: {{checkOne}} 7 | 8 | I'm just a Material {{checkTwo}} in a Material world 9 | 10 | Try using checkboxes 11 | But not this one: {{checkThree}} 12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /example/styleguide/web/views/dialog.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Open a dialog over the app's content.

5 |
6 |
7 | Alert Dialog 8 | Alert with title 9 | Confirm Dialog 10 | Custom Dialog 11 |
12 |
13 | Enable ESC 14 | Enable "BackDropClick" 15 |
16 |
17 | 18 |
Status:
19 | {{statusMessage}}
20 | 21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /example/styleguide/web/views/directives/scrollshadow.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

You can see the scroll-shadow if you narrow this page and scroll down.
6 | Check out "Basic usage" and you see how it's done.

7 |
8 |
9 |
-------------------------------------------------------------------------------- /example/styleguide/web/views/dropdown.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
    7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |
15 | -------------------------------------------------------------------------------- /example/styleguide/web/views/home.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |

The Web Starter Kit (WSK) Angular Material project is an implementation of Material Design in 6 | AngularDart using Google's WSK CSS-Framework. 7 | This project provides a set of reusable, well-tested UI components based on the Material Design 8 | system.

9 | 10 |
What is Material Design?
11 | 12 |

Material Design 13 | is a specification for a unified system of visual, motion, and interaction design that 14 | adapts across different devices and different screen sizes. Below is a brief video that presents the 15 | Material Design system:

16 |
17 | 18 |
19 | 20 |
21 | 22 | 33 |
34 |
35 | -------------------------------------------------------------------------------- /example/styleguide/web/views/item.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 |
7 |
Button
8 | 9 | 10 | 11 | 12 | 13 |

14 |
Anchor
15 | Web Starter Kit 16 | 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /example/styleguide/web/views/panel.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | Simple panel 7 | 8 | With shadow 9 | 10 | Light panel, light text 11 | 12 | Lighter panel 13 | 14 | Dark panel 15 | 16 | Dark panel, light text 17 | 18 | Darker panel, light text 19 | 20 | Darker panel, light text + shadow 21 | 22 | Accent panel, light text 23 | 24 | Accent panel, light text + shadow 25 | 26 | 27 |
Panel heading
28 |
Panel content
29 | 30 | 31 | 32 |
Panel heading
33 |
Panel content + shadow
34 | 35 |
36 |
37 |
38 | -------------------------------------------------------------------------------- /example/styleguide/web/views/shadow.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 | 7 |
8 | 9 |
10 | 11 |
12 | 13 |
14 | 15 |
16 |
17 |
18 | -------------------------------------------------------------------------------- /example/styleguide/web/views/spinner.html: -------------------------------------------------------------------------------- 1 |
2 | 28 |
29 | -------------------------------------------------------------------------------- /example/styleguide/web/views/switch.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
Basic
7 | Switch me 8 | Can't touch this (ng-disabled) 9 | Can't touch this (disabled) 10 | Disabled via css-class 11 |
12 |
13 |
Controls model
14 | 15 | Flip me left and right 16 | thgir dna tfel em pilF 17 | 18 | Switch me 19 | Can't touch this (ng-disabled) 20 | Can't touch this (disabled) 21 | Disabled via css-class 22 | 23 |
24 |
25 |
26 |
27 |
28 | -------------------------------------------------------------------------------- /example/styleguide/web/views/tabs.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 | 6 | 7 | Test I 8 | Test II 9 | Test III 10 | 11 | 12 | 13 |
    14 |
  • Eddard
    • 15 |
  • Catelyn
    • 16 |
  • Robb
    • 17 |
  • Sansa
    • 18 |
  • Brandon
    • 19 |
  • Arya
    • 20 |
  • Rickon
    • 21 |
22 | 23 | 24 |
    25 |
  • Tywin
    • 26 |
  • Cersei
    • 27 |
  • Jamie
    • 28 |
  • Tyrion
    • 29 |
30 | 31 | 32 |
    33 |
  • Viserys
    • 34 |
  • Daenerys
    • 35 |
36 | 37 | 38 |
39 |
40 |
41 | -------------------------------------------------------------------------------- /example/styleguide/web/views/theming.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Theming is very easy. If this is your basic SCSS file:
5 | main.scss: 6 | 

 7 |     @import "packages/wsk_angular/sass/wsk_resets/wsk_h5bp";
 8 |     @import 'packages/wsk_angular/sass/wsk_typography/wsk_typography';
 9 |     @import 'packages/wsk_angular/sass/wsk_palette/wsk_palette';
10 | 
11 |     @import 'colors';
12 | 
13 |     @import 'packages/wsk_angular/sass/wsk_layout/wsk_layout';
14 |
15 | 16 | Line 1 - 3 shows you basic imports from wsk_angular.
17 | On line 4 you import your local "colors" file.
18 |
19 | _colors.scss: 20 | 
21 |     @import "packages/wsk_angular/sass/wsk_palette/wsk_palette";
22 | 
23 |     /* ==========  Color & Themes  ========== */
24 | 
25 |     // Use color primarily for emphasis. Choose colors that fit with
26 |     // your brand and provide good contrast between visual components.
27 | 
28 |     $palette-primary: $palette-indigo !default;
29 |     $palette-accent: $palette-pink !default;
30 |     $palette-secondary: $palette-grey !default;
31 |     $palette-disabled: $palette-grey !default;
32 |     $palette-page: $palette-grey !default;
33 |     ...
34 | Now change the pallets-name
35 | Yes - that's it! Compile your sass-file and you are done! 36 |

37 | 38 |

If you want to know how to theme your SVG-Icons - check out this files 39 | main.scss (svgShapeComponent)

40 |
41 |
42 |
43 | -------------------------------------------------------------------------------- /example/styleguide/web/views/toast.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | Show simple 7 | 8 | Show with Action 10 | 11 |
Status: {{status}}
12 |
Toast Postition
13 |
14 | top 15 | left 16 | right 17 | bottom 18 |
19 | Use container 20 |
Container
21 | 22 | 23 |
24 |
25 |
26 | -------------------------------------------------------------------------------- /example/styleguide/web/views/usage/badge.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Basic Usage 5 | 6 | 7 | 8 | 9 | 10 | Dart 11 | Html 12 | SASS 13 | 14 | 15 | 16 | 
17 | import 'package:wsk_angular/wsk_badge/wsk_badge.dart';
18 | 
19 | @Injectable()
20 | class AppController {
21 |     AppController() {
22 |     }
23 | }
24 | 
25 | class SampleModule extends Module {
26 |     SampleModule() {
27 |         install(new WskBadgeModule());
28 |         bind(AppController);
29 |     }
30 | }
31 | 
32 | main() {
33 |     applicationFactory()
34 |         .addModule(new SampleModule())
35 |         .rootContextType(AppController).run();
36 | }
37 |
38 | 39 | 40 | 41 | 
42 | <wsk-badge data-badge="42">
43 |     I am in wsk-badge
44 | </wsk-badge>
45 | 
46 | <wsk-badge data-badge="13">
47 |     <a href="#">a-tag in wsk-badge</a>
48 | </wsk-badge>
49 | 
50 | <a href="#" class="wsk-badge" data-badge="7">
51 |  Class only
52 | </a>
53 |
54 | 55 | 56 | 57 | 
58 | @import "packages/wsk_angular/sass/wsk_badge/wsk_badge";
59 |
60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /example/wsk_accordion/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_accordion_sample 2 | description: WSK Angular Accordion sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_accordion/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_accordion/wsk_accordion"; 5 | 6 | .accordion.sample { 7 | .toolbar { 8 | z-index: 99; 9 | position: absolute; 10 | } 11 | .toolbar i { 12 | margin: 2px 2px; 13 | display: inline-block; 14 | color: GrayText; 15 | } 16 | .toolbar i.checked, .toolbar i:hover { 17 | color: red; 18 | } 19 | .toolbar i:hover { 20 | background-color: yellow; 21 | } 22 | 23 | .custom-label { 24 | margin-left: 120px; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /example/wsk_accordion/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_accordion; 2 | 3 | import 'dart:html' as html; 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular/application_factory.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:console_log_handler/console_log_handler.dart'; 10 | 11 | import 'package:wsk_angular/wsk_accordion/wsk_accordion.dart'; 12 | //import 'package:wsk_angular/wsk_checkbox/wsk_checkbox.dart'; 13 | //import 'package:wsk_angular/wsk_button/wsk_button.dart'; 14 | 15 | @Injectable() 16 | class AppController { 17 | final _logger = new Logger('wsk_angular.example.wsk_accordion.AppController'); 18 | 19 | AppController() { 20 | _logger.fine("AppController"); 21 | } 22 | 23 | int rating = 1; 24 | void setRating(final html.Event event,final int rating) { 25 | event.stopPropagation(); 26 | event.preventDefault(); 27 | this.rating = rating; 28 | } 29 | } 30 | 31 | 32 | /// Demo Module 33 | class SampleModule extends Module { 34 | SampleModule() { 35 | install(new WskAccordionModule()); 36 | 37 | bind(AppController); 38 | 39 | // -- controllers 40 | 41 | // -- services 42 | 43 | // -- decorator 44 | 45 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 46 | } 47 | } 48 | 49 | /// Entry point into app. 50 | main() { 51 | configLogger(); 52 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 53 | } 54 | 55 | 56 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 57 | void configLogger() { 58 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 59 | 60 | // now control the logging. 61 | // Turn off all logging first 62 | Logger.root.level = Level.INFO; 63 | Logger.root.onRecord.listen(new LogConsoleHandler()); 64 | } -------------------------------------------------------------------------------- /example/wsk_animation/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_animation_sample 2 | description: WSK Angular Animation sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_animation/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Animations 9 | 10 | 12 | 13 | 14 |
15 |
16 |
Animation
17 | 18 | 19 |
20 |
Click me to animate
21 |
22 |
23 |
24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 | -------------------------------------------------------------------------------- /example/wsk_animation/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_animation; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_animation/wsk_animation.dart'; 10 | 11 | 12 | /** 13 | * Entry point into app. 14 | */ 15 | main() { 16 | configLogger(); 17 | applicationFactory().addModule(new SampleModule()).run(); 18 | } 19 | 20 | /** 21 | * Demo Module 22 | */ 23 | class SampleModule extends Module { 24 | SampleModule() { 25 | install(new WskAnimationModule()); 26 | 27 | // -- controllers 28 | 29 | // -- services 30 | 31 | // -- decorator 32 | 33 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 34 | } 35 | } 36 | 37 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 38 | void configLogger() { 39 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 40 | 41 | // now control the logging. 42 | // Turn off all logging first 43 | Logger.root.level = Level.INFO; 44 | Logger.root.onRecord.listen(new LogConsoleHandler()); 45 | } -------------------------------------------------------------------------------- /example/wsk_badge/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_badge_sample 2 | description: WSK Angular Badge sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_badge/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_badge; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_badge/wsk_badge.dart'; 13 | 14 | @Injectable() 15 | class AppController { 16 | final _logger = new Logger('wsk_angular.example.wsk_badge.AppController'); 17 | 18 | AppController() { 19 | _logger.fine("AppController"); 20 | } 21 | 22 | String tooltipText = "Simple tooltip"; 23 | } 24 | 25 | 26 | /// Demo Module 27 | class SampleModule extends Module { 28 | SampleModule() { 29 | install(new WskBadgeModule()); 30 | 31 | bind(AppController); 32 | 33 | // -- controllers 34 | 35 | // -- services 36 | 37 | // -- decorator 38 | 39 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 40 | } 41 | } 42 | 43 | /// Entry point into app. 44 | main() { 45 | configLogger(); 46 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 47 | } 48 | 49 | 50 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 51 | void configLogger() { 52 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 53 | 54 | // now control the logging. 55 | // Turn off all logging first 56 | Logger.root.level = Level.FINE; 57 | Logger.root.onRecord.listen(new LogConsoleHandler()); 58 | } -------------------------------------------------------------------------------- /example/wsk_button/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_button_sample 2 | description: WSK Angular Button sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_button/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_shadow/wsk_shadow"; 5 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 6 | 7 | .button.sample { 8 | .button-block { 9 | display: inline-block; 10 | margin: 20px 20px 20px 0; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /example/wsk_button/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_button; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_button/wsk_button.dart'; 10 | 11 | 12 | /** 13 | * Entry point into app. 14 | */ 15 | main() { 16 | for (var i in new List(5)) { print("this is printed x times");} 17 | 18 | configLogger(); 19 | applicationFactory().addModule(new SampleModule()).run(); 20 | } 21 | 22 | /** 23 | * Demo Module 24 | */ 25 | class SampleModule extends Module { 26 | SampleModule() { 27 | // install(new AlertModule()); 28 | install(new WskButtonModule()); 29 | 30 | // -- controllers 31 | //type(MessageController); 32 | 33 | // -- services 34 | 35 | // -- decorator 36 | //bind(NaviHandler); 37 | 38 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 39 | } 40 | } 41 | 42 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 43 | void configLogger() { 44 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 45 | 46 | // now control the logging. 47 | // Turn off all logging first 48 | Logger.root.level = Level.INFO; 49 | Logger.root.onRecord.listen(new LogConsoleHandler()); 50 | } -------------------------------------------------------------------------------- /example/wsk_checkbox/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_checkbox_sample 2 | description: WSK Angular Checkbox sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_checkbox/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_checkbox/wsk_checkbox"; 5 | -------------------------------------------------------------------------------- /example/wsk_checkbox/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Checkbox 9 | 10 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
Checkbox
19 | 20 | Check me out: {{checkOne}} 21 | 22 | I'm just a Material {{checkTwo}} in a Material world 23 | 24 | Try using checkboxes 25 | But not this one: {{checkThree}} 26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /example/wsk_checkbox/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_checkbox; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_checkbox/wsk_checkbox.dart'; 10 | 11 | @Injectable() 12 | class AppController { 13 | final _logger = new Logger('wsk_angular.example.wsk_checkbox.AppController'); 14 | 15 | final Router _router; 16 | final String _classToChange = "active"; 17 | 18 | bool checkOne = false; 19 | dynamic checkTwo = false; 20 | bool checkThree = false; 21 | 22 | AppController() { 23 | _logger.fine("AppController"); 24 | } 25 | } 26 | 27 | 28 | /// Demo Module 29 | class SampleModule extends Module { 30 | SampleModule() { 31 | install(new WskCheckboxModule()); 32 | 33 | bind(AppController); 34 | 35 | // -- controllers 36 | 37 | // -- services 38 | 39 | // -- decorator 40 | 41 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 42 | } 43 | } 44 | 45 | /// Entry point into app. 46 | main() { 47 | configLogger(); 48 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 49 | } 50 | 51 | 52 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 53 | void configLogger() { 54 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 55 | 56 | // now control the logging. 57 | // Turn off all logging first 58 | Logger.root.level = Level.INFO; 59 | Logger.root.onRecord.listen(new LogConsoleHandler()); 60 | } -------------------------------------------------------------------------------- /example/wsk_dialog/lib/custom_dialog/custom_dialog.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular_dialog_sample.custom_dialog; 2 | 3 | import 'dart:html' as html; 4 | import 'dart:async'; 5 | 6 | import "package:angular/angular.dart"; 7 | import 'package:angular/core/annotation_src.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:validate/validate.dart'; 11 | 12 | import 'package:wsk_material/wskcomponets.dart'; 13 | import 'package:wsk_angular/wsk_angular.dart'; 14 | import 'package:wsk_angular/wsk_dialog/wsk_dialog.dart'; 15 | 16 | 17 | /** 18 | * WskDialog Module. 19 | * More infos: https://docs.angulardart.org/#di.Module 20 | */ 21 | class CustomDialogModule extends Module { 22 | CustomDialogModule() { 23 | 24 | bind(CustomDialog); 25 | 26 | //- Services --------------------------- 27 | } 28 | } 29 | 30 | @Component(selector: "custom-dialog" ,useShadowDom: false, 31 | templateUrl: "packages/wsk_angular_dialog_sample/custom_dialog/custom_dialog.html") 32 | class CustomDialog extends WskDialog { 33 | static const String SELECTOR = "custom-dialog"; 34 | 35 | static const String _DEFAULT_YES_BUTTON = "Useful"; 36 | static const String _DEFAULT_NO_BUTTON = "Not Useful"; 37 | 38 | String title = ""; 39 | String text = ""; 40 | String yesButton = _DEFAULT_YES_BUTTON; 41 | String noButton = _DEFAULT_NO_BUTTON; 42 | 43 | CustomDialog(final Injector injector) : super(SELECTOR,new DialogConfig()) { 44 | Validate.notNull(injector); 45 | this.injector = injector; 46 | } 47 | 48 | CustomDialog call(final String text,{ final String title: "", 49 | final String yesButton: _DEFAULT_YES_BUTTON, final String noButton: _DEFAULT_NO_BUTTON }) { 50 | Validate.notBlank(text); 51 | Validate.notNull(title); 52 | Validate.notBlank(yesButton); 53 | Validate.notBlank(noButton); 54 | 55 | this.text = text; 56 | this.title = title; 57 | this.yesButton = yesButton; 58 | this.noButton = noButton; 59 | 60 | return this; 61 | } 62 | 63 | bool get hasTitle => (title != null && title.isNotEmpty); 64 | 65 | // - EventHandler ----------------------------------------------------------------------------- 66 | 67 | void onYes() { 68 | close(WskDialogStatus.YES); 69 | } 70 | 71 | void onNo() { 72 | close(WskDialogStatus.NO); 73 | } 74 | 75 | // - private ---------------------------------------------------------------------------------- 76 | 77 | } 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /example/wsk_dialog/lib/custom_dialog/custom_dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{{title}}
4 |

5 | The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, 6 | cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all 7 | belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it 8 | has been distributed worldwide to become one of the most cultivated fruits in the tropics. 9 |

10 | 11 | 12 |

13 | It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of 14 | India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and 15 | leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies. 16 |

17 | 18 | 19 | {{noButton}} 20 | {{yesButton}} 21 | 22 | -------------------------------------------------------------------------------- /example/wsk_dialog/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_dialog_sample 2 | description: WSK Angular Dialog sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_dialog/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_dialog/wsk_dialog"; 5 | 6 | // Only for Sample 7 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 8 | @import "packages/wsk_angular/sass/wsk_checkbox/wsk_checkbox"; 9 | 10 | 11 | .dialog.sample { 12 | .center { 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | border: 1px dotted black; 17 | border-radius: 5px; 18 | } 19 | 20 | .button-block { 21 | display: inline-block; 22 | margin: 20px 20px 20px 0; 23 | } 24 | 25 | .status { 26 | margin: 12px; 27 | span { 28 | font-weight: bold; 29 | } 30 | } 31 | } 32 | 33 | 34 | .wsk-dialog.custom-dialog { 35 | h5 { 36 | background-color: #B3D38D; 37 | 38 | position: absolute; 39 | left: 0; 40 | top: 0 !important; 41 | right: 0; 42 | padding: 24px; 43 | } 44 | 45 | .wsk-dialog__content { 46 | margin-top: 68px; // padding * 2 + font-size (20) 47 | p { 48 | font-size: 14px; 49 | } 50 | } 51 | 52 | .wsk-dialog__actions { 53 | border-top: 1px solid rgb(231, 231, 231); 54 | } 55 | } -------------------------------------------------------------------------------- /example/wsk_dialog/web/images/mangues.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/wsk_dialog/web/images/mangues.jpg -------------------------------------------------------------------------------- /example/wsk_dialog/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | wsk-dialog 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
Dialog
18 |

Open a dialog over the app's content.

19 | 20 |
21 |
22 | Alert Dialog 23 | Alert with title 24 | Confirm Dialog 25 | Custom Dialog 26 |
27 |
28 | Enable ESC 29 | Enable "BackDropClick" 30 |
31 |
32 | 33 |
Status:
34 | {{statusMessage}}
35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /example/wsk_dragdrop/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_dragdrop_sample 2 | description: WSK Angular Drag & Drop sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | prettify: 19 | path: /Volumes/Daten/DevLocal/DevDart/Prettify 20 | 21 | #------------------------------------------------ 22 | transformers: 23 | - angular: 24 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 25 | 26 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 27 | html_files: [ 28 | 'web/index.html' 29 | ] 30 | 31 | - $dart2js: 32 | minify: false 33 | sourceMaps: true 34 | -------------------------------------------------------------------------------- /example/wsk_dragdrop/web/views/src/html/draganddrop.html: -------------------------------------------------------------------------------- 1 | 
 2 | <wsk-draggable class="language" ng-repeat="language in languages"
 3 |     data-to-drag="language"
 4 |     drop-zone="language.type">\language.name\
 5 | </wsk-draggable>
 6 | 
 7 | <wsk-draggable class="language" ng-repeat="language in languages"
 8 | data-to-drag="language"
 9 | drop-zone="language.type">\language.name\
10 | </wsk-draggable>
11 | 
12 | <wsk-draggable class="language" ng-repeat="language in languages"
13 | data-to-drag="language"
14 | drop-zone="language.type">\language.name\
15 | </wsk-draggable>
16 |
-------------------------------------------------------------------------------- /example/wsk_icon_toggle/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_icon_toggle_sample 2 | description: WSK Angular Icon Toggle sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_icon_toggle/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_icon-toggle/wsk_icon-toggle"; 5 | 6 | .icon-toggle.sample { 7 | ul { 8 | padding: 0; 9 | margin: 0; 10 | list-style-type: none; 11 | } 12 | span { 13 | padding-left : 6px; 14 | } 15 | 16 | .cols { 17 | display: flex; 18 | flex-direction: row; 19 | } 20 | .cols > div { 21 | padding: 10px; 22 | } 23 | 24 | .button-block { 25 | display: inline-block; 26 | margin: 0 20px 20px 0; 27 | } 28 | } 29 | 30 | -------------------------------------------------------------------------------- /example/wsk_icon_toggle/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_icontoggle; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_icon_toggle/wsk_icon_toggle.dart'; 10 | 11 | @Injectable() 12 | class AppController { 13 | final _logger = new Logger('wsk_angular.example.wsk_icontoggle.AppController'); 14 | 15 | final Router _router; 16 | final String _classToChange = "active"; 17 | 18 | bool toggleOne = false; 19 | dynamic toggleTwo = false; 20 | bool toggleThree = false; 21 | 22 | AppController() { 23 | _logger.fine("AppController"); 24 | } 25 | } 26 | 27 | 28 | /// Demo Module 29 | class SampleModule extends Module { 30 | SampleModule() { 31 | install(new WskIconToggleModule()); 32 | 33 | bind(AppController); 34 | 35 | // -- controllers 36 | 37 | // -- services 38 | 39 | // -- decorator 40 | 41 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 42 | } 43 | } 44 | 45 | /// Entry point into app. 46 | main() { 47 | configLogger(); 48 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 49 | } 50 | 51 | 52 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 53 | void configLogger() { 54 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 55 | 56 | // now control the logging. 57 | // Turn off all logging first 58 | Logger.root.level = Level.INFO; 59 | Logger.root.onRecord.listen(new LogConsoleHandler()); 60 | } -------------------------------------------------------------------------------- /example/wsk_item/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_item_sample 2 | description: WSK Angular Item sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_item/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_item/wsk_item"; 5 | -------------------------------------------------------------------------------- /example/wsk_item/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Item 9 | 10 | 11 | 12 | 14 | 15 | 16 |
17 |
18 |
Item
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | Web Starter Kit 27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /example/wsk_item/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_item; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_item/wsk_item.dart'; 10 | 11 | @Injectable() 12 | class AppController { 13 | final _logger = new Logger('wsk_angular.example.wsk_item.AppController'); 14 | 15 | final Router _router; 16 | final String _classToChange = "active"; 17 | 18 | bool toggleOne = false; 19 | dynamic toggleTwo = false; 20 | bool toggleThree = false; 21 | 22 | AppController() { 23 | _logger.fine("AppController"); 24 | } 25 | } 26 | 27 | 28 | /// Demo Module 29 | class SampleModule extends Module { 30 | SampleModule() { 31 | install(new WskItemModule()); 32 | 33 | bind(AppController); 34 | 35 | // -- controllers 36 | 37 | // -- services 38 | 39 | // -- decorator 40 | 41 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 42 | } 43 | } 44 | 45 | /// Entry point into app. 46 | main() { 47 | configLogger(); 48 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 49 | } 50 | 51 | 52 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 53 | void configLogger() { 54 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 55 | 56 | // now control the logging. 57 | // Turn off all logging first 58 | Logger.root.level = Level.INFO; 59 | Logger.root.onRecord.listen(new LogConsoleHandler()); 60 | } -------------------------------------------------------------------------------- /example/wsk_layout/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_layout_sample 2 | description: WSK Angular Layout sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_layout/web/images/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/wsk_layout/web/images/app-icon.png -------------------------------------------------------------------------------- /example/wsk_layout/web/images/desktop-handsfree-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/example/wsk_layout/web/images/desktop-handsfree-hero.jpg -------------------------------------------------------------------------------- /example/wsk_layout/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_layout; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_layout/wsk_layout.dart'; 10 | 11 | 12 | /** 13 | * Entry point into app. 14 | */ 15 | main() { 16 | configLogger(); 17 | applicationFactory().addModule(new SampleModule()).run(); 18 | } 19 | 20 | /** 21 | * Demo Module 22 | */ 23 | class SampleModule extends Module { 24 | SampleModule() { 25 | install(new WskLayoutModule()); 26 | 27 | // -- controllers 28 | 29 | // -- services 30 | 31 | // -- decorator 32 | 33 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 34 | } 35 | } 36 | 37 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 38 | void configLogger() { 39 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 40 | 41 | // now control the logging. 42 | // Turn off all logging first 43 | Logger.root.level = Level.INFO; 44 | Logger.root.onRecord.listen(new LogConsoleHandler()); 45 | } -------------------------------------------------------------------------------- /example/wsk_nav-pills/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_nav_pills_sample 2 | description: WSK Angular Nav-Pills sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_nav-pills/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | @import "packages/wsk_angular/sass/wsk_nav-pills/wsk_nav-pills"; 4 | 5 | .nav-pills.sample { 6 | .testblock { 7 | background-color: whitesmoke; 8 | border: 1px solid darkgrey; 9 | padding: 8px 16px; 10 | margin: 4px 0; 11 | } 12 | 13 | ul { 14 | margin-bottom: 8px; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/wsk_nav-pills/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_panel; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_nav-pills/wsk_nav-pills.dart'; 13 | 14 | @Injectable() 15 | class AppController { 16 | final _logger = new Logger('wsk_angular.example.wsk_panel.AppController'); 17 | 18 | AppController() { 19 | _logger.fine("AppController"); 20 | } 21 | 22 | } 23 | 24 | 25 | /// Demo Module 26 | class SampleModule extends Module { 27 | SampleModule() { 28 | install(new WskNavPillsModule()); 29 | 30 | bind(AppController); 31 | 32 | // -- controllers 33 | 34 | // -- services 35 | 36 | // -- decorator 37 | 38 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 39 | } 40 | } 41 | 42 | /// Entry point into app. 43 | main() { 44 | configLogger(); 45 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 46 | } 47 | 48 | 49 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 50 | void configLogger() { 51 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 52 | 53 | // now control the logging. 54 | // Turn off all logging first 55 | Logger.root.level = Level.FINE; 56 | Logger.root.onRecord.listen(new LogConsoleHandler()); 57 | } -------------------------------------------------------------------------------- /example/wsk_panel/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_panel_sample 2 | description: WSK Angular Panel sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_panel/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | @import "packages/wsk_angular/sass/wsk_panel/wsk_panel"; 4 | 5 | .panel.sample { 6 | .wsk-panel { 7 | margin-bottom: 12px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /example/wsk_panel/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_panel; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_panel/wsk_panel.dart'; 13 | 14 | @Injectable() 15 | class AppController { 16 | final _logger = new Logger('wsk_angular.example.wsk_panel.AppController'); 17 | 18 | AppController() { 19 | _logger.fine("AppController"); 20 | } 21 | 22 | } 23 | 24 | 25 | /// Demo Module 26 | class SampleModule extends Module { 27 | SampleModule() { 28 | install(new WskPanelModule()); 29 | 30 | bind(AppController); 31 | 32 | // -- controllers 33 | 34 | // -- services 35 | 36 | // -- decorator 37 | 38 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 39 | } 40 | } 41 | 42 | /// Entry point into app. 43 | main() { 44 | configLogger(); 45 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 46 | } 47 | 48 | 49 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 50 | void configLogger() { 51 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 52 | 53 | // now control the logging. 54 | // Turn off all logging first 55 | Logger.root.level = Level.FINE; 56 | Logger.root.onRecord.listen(new LogConsoleHandler()); 57 | } -------------------------------------------------------------------------------- /example/wsk_radio/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_radio_sample 2 | description: WSK Angular Radio sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_radio/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_radio/wsk_radio"; 5 | 6 | // Necessary for Add + Remove Button 7 | @import "packages/wsk_angular/sass/wsk_shadow/wsk_shadow"; 8 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 9 | 10 | $_demo-radio-first_col_with : 280px; 11 | $_demo-radio-col_padding : 10px; 12 | .radio.sample { 13 | .selected { 14 | color: $radio-color; 15 | } 16 | .avatar { 17 | width: 80px; 18 | height: 80px; 19 | } 20 | 21 | .cols { 22 | display : flex; 23 | flex-direction : row; 24 | flex-wrap: wrap; 25 | } 26 | 27 | .cols > div { 28 | padding : $_demo-radio-col_padding; 29 | 30 | width: $_demo-radio-first_col_with; 31 | //min-width: $_first_col_with; 32 | 33 | max-width: ($_demo-radio-first_col_with * 1.5); 34 | } 35 | 36 | .cols > div:first-child { 37 | } 38 | 39 | hr.on-small-screens { display: none; } 40 | 41 | @media screen and (max-width: ($_demo-radio-first_col_with * 2 + ($_demo-radio-col_padding * 4)) + 50px) { 42 | hr.on-small-screens { display: block; width: 100%; } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /example/wsk_slider/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_slider_sample 2 | description: WSK Angular Slider sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_slider/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_slider/wsk_slider"; 5 | 6 | .slider.sample { 7 | span i.fa { font-size: 20px; } 8 | .values { padding: 10px 20px; } 9 | .color-chooser { 10 | flex-grow: 1; 11 | 12 | box-sizing: border-box; 13 | padding: 18px 0 0 10px; 14 | margin: 5px 30px; 15 | border: 1px solid gray; 16 | border-radius: 5px; 17 | font-size: 15px; 18 | } 19 | .color-chooser wsk-slider .wsk-slider__container { 20 | top: -18px; 21 | } 22 | .cols { 23 | display: flex; 24 | flex-direction: row; 25 | flex-wrap: wrap; 26 | } 27 | .cols .logo { padding: 20px 0 0 20px; } 28 | } -------------------------------------------------------------------------------- /example/wsk_spinner/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_spinner_sample 2 | description: WSK Angular Spinner sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_spinner/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_spinner/wsk_spinner"; 5 | 6 | // Only for the button used for turning on/off the spinner 7 | @import "packages/wsk_angular/sass/wsk_shadow/wsk_shadow"; 8 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 9 | 10 | // Autoprefixer is needed it you generate the css by hand! 11 | 12 | -------------------------------------------------------------------------------- /example/wsk_spinner/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spinner 9 | 10 | 12 | 13 | 14 | 15 | 16 |
17 | 41 |
42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /example/wsk_spinner/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_spinner; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_spinner/wsk_spinner.dart'; 13 | import 'package:wsk_angular/wsk_button/wsk_button.dart'; 14 | 15 | @Injectable() 16 | class AppController { 17 | final _logger = new Logger('wsk_angular.example.wsk_spinner.AppController'); 18 | 19 | AppController() { 20 | _logger.fine("AppController"); 21 | } 22 | 23 | bool activated = true; 24 | } 25 | 26 | 27 | /// Demo Module 28 | class SampleModule extends Module { 29 | SampleModule() { 30 | install(new WskSpinnerModule()); 31 | install(new WskButtonModule()); 32 | 33 | bind(AppController); 34 | 35 | // -- controllers 36 | 37 | // -- services 38 | 39 | // -- decorator 40 | 41 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 42 | } 43 | } 44 | 45 | /// Entry point into app. 46 | main() { 47 | configLogger(); 48 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 49 | } 50 | 51 | 52 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 53 | void configLogger() { 54 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 55 | 56 | // now control the logging. 57 | // Turn off all logging first 58 | Logger.root.level = Level.FINE; 59 | Logger.root.onRecord.listen(new LogConsoleHandler()); 60 | } -------------------------------------------------------------------------------- /example/wsk_switch/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_switch_sample 2 | description: WSK Angular Switch sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_switch/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_switch/wsk_switch"; 5 | 6 | $_demo-switch-first_col_with : 280px; 7 | $_demo-switch-col_padding : 10px; 8 | 9 | .switch.sample { 10 | 11 | .cols { 12 | display : flex; 13 | flex-direction : row; 14 | flex-wrap: wrap; 15 | } 16 | 17 | .cols > div { 18 | padding : $_demo-switch-col_padding; 19 | 20 | width: $_demo-switch-first_col_with; 21 | //min-width: $_first_col_with; 22 | 23 | max-width: ($_demo-switch-first_col_with * 1.5); 24 | } 25 | 26 | 27 | .light { 28 | font-size: 20px; 29 | 30 | &.on { 31 | color: orange; 32 | } 33 | } 34 | 35 | @media screen and (max-width: ($_demo-switch-first_col_with * 2 + ($_demo-switch-col_padding * 4)) + 50px) { 36 | hr.on-small-screens { display: block; width: 100%; } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /example/wsk_switch/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_switch; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_switch/wsk_switch.dart'; 13 | 14 | @Injectable() 15 | class AppController { 16 | final _logger = new Logger('wsk_angular.example.wsk_switch.AppController'); 17 | 18 | AppController() { 19 | _logger.fine("AppController"); 20 | } 21 | 22 | bool toggleSwitch = false; 23 | bool flipText = false; 24 | } 25 | 26 | 27 | /// Demo Module 28 | class SampleModule extends Module { 29 | SampleModule() { 30 | install(new WskSwitchModule()); 31 | 32 | bind(AppController); 33 | 34 | // -- controllers 35 | 36 | // -- services 37 | 38 | // -- decorator 39 | 40 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 41 | } 42 | } 43 | 44 | /// Entry point into app. 45 | main() { 46 | configLogger(); 47 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 48 | } 49 | 50 | 51 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 52 | void configLogger() { 53 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 54 | 55 | // now control the logging. 56 | // Turn off all logging first 57 | Logger.root.level = Level.FINE; 58 | Logger.root.onRecord.listen(new LogConsoleHandler()); 59 | } -------------------------------------------------------------------------------- /example/wsk_tabs/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_tabs_sample 2 | description: WSK Angular Tabs sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_tabs/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_tabs/wsk_tabs"; 5 | 6 | .tabs.sample { 7 | margin: 0; 8 | padding: 0 0 10px 0; 9 | } 10 | -------------------------------------------------------------------------------- /example/wsk_tabs/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Content Tabs 9 | 10 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | Tab I 22 | Tab II 23 | Tab III 24 | 25 | 26 | 27 |
    28 |
  • Eddard
    • 29 |
  • Catelyn
    • 30 |
  • Robb
    • 31 |
  • Sansa
    • 32 |
  • Brandon
    • 33 |
  • Arya
    • 34 |
  • Rickon
    • 35 |
36 | 37 | 38 |
    39 |
  • Tywin
    • 40 |
  • Cersei
    • 41 |
  • Jamie
    • 42 |
  • Tyrion
    • 43 |
44 | 45 | 46 |
    47 |
  • Viserys
    • 48 |
  • Daenerys
    • 49 |
50 | 51 | 52 | 53 |
54 | 55 | 56 | 57 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /example/wsk_tabs/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_tabs; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular/application_factory.dart'; 5 | 6 | import 'package:logging/logging.dart'; 7 | import 'package:console_log_handler/console_log_handler.dart'; 8 | 9 | import 'package:wsk_angular/wsk_tabs/wsk_tabs.dart'; 10 | 11 | 12 | /** 13 | * Entry point into app. 14 | */ 15 | main() { 16 | configLogger(); 17 | applicationFactory().addModule(new SampleModule()).run(); 18 | } 19 | 20 | /** 21 | * Demo Module 22 | */ 23 | class SampleModule extends Module { 24 | SampleModule() { 25 | install(new WskTabsModule()); 26 | 27 | // -- controllers 28 | 29 | // -- services 30 | 31 | // -- decorator 32 | 33 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 34 | } 35 | } 36 | 37 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 38 | void configLogger() { 39 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 40 | 41 | // now control the logging. 42 | // Turn off all logging first 43 | Logger.root.level = Level.INFO; 44 | Logger.root.onRecord.listen(new LogConsoleHandler()); 45 | } -------------------------------------------------------------------------------- /example/wsk_textfield/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_textfield_sample 2 | description: WSK Angular Textfield sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_textfield/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_textfield/wsk_textfield"; 5 | 6 | // Only for Sample 7 | @import "packages/wsk_angular/sass/wsk_checkbox/wsk_checkbox"; 8 | @import "packages/wsk_angular/sass/wsk_shadow/wsk_shadow"; 9 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 10 | 11 | 12 | 13 | $_demo-textarea-first_col_with : 280px; 14 | $_demo-textarea-col_padding : 10px; 15 | 16 | .textfield.sample { 17 | 18 | .cols { 19 | display : flex; 20 | flex-direction : row; 21 | flex-wrap: wrap; 22 | } 23 | 24 | 25 | .cols > div { 26 | &:first-child { 27 | width: $_demo-textarea-first_col_with; 28 | max-width: ($_demo-textarea-first_col_with * 1.2); 29 | } 30 | 31 | flex-grow: 1; 32 | padding : $_demo-textarea-col_padding; 33 | 34 | //min-width: $_first_col_with; 35 | 36 | } 37 | 38 | textarea { 39 | overflow : auto; 40 | resize : none; 41 | } 42 | 43 | form { 44 | padding-bottom: 30px; 45 | } 46 | 47 | @media screen and (max-width: ($_demo-textarea-first_col_with * 2 + ($_demo-textarea-col_padding * 4)) + 50px) { 48 | hr.on-small-screens { display: block; width: 100%; } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /example/wsk_toast/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_toast_sample 2 | description: WSK Angular Toast sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_toast/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | 4 | @import "packages/wsk_angular/sass/wsk_toast/wsk_toast"; 5 | 6 | // Only for Sample 7 | @import "packages/wsk_angular/sass/wsk_button/wsk_button"; 8 | @import "packages/wsk_angular/sass/wsk_checkbox/wsk_checkbox"; 9 | 10 | .toast.sample { 11 | .container { 12 | position: relative; 13 | border: 1px dotted black; 14 | min-height: 200px; 15 | border-radius: 5px; 16 | padding: 5px; 17 | } 18 | 19 | .status { 20 | margin: 12px; 21 | span { 22 | font-weight: bold; 23 | } 24 | } 25 | 26 | .position { 27 | display: flex; 28 | flex-direction: row; 29 | flex-wrap: wrap; 30 | justify-content: flex-start; // ⇾ 31 | align-content: space-between; // || 32 | align-items: flex-start; // ↓ 33 | 34 | margin-left: 24px; 35 | 36 | > * { 37 | margin-right: 10px; 38 | } 39 | } 40 | } 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /example/wsk_toast/web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | wsk-toast 9 | 10 | 11 | 12 | 14 | 15 | 16 |
Angular loading...
17 |
Components loading...
18 |
19 |
20 |
Toast
21 | Show simple 23 | 24 | Show with Action 26 | 27 |
Status: {{status}}
28 |
Toast Postition
29 |
30 | top 31 | left 32 | right 33 | bottom 34 |
35 | 36 | Use container 37 |
Container
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /example/wsk_toast/web/views/src/html/draganddrop.html: -------------------------------------------------------------------------------- 1 | 
 2 | <wsk-draggable class="language" ng-repeat="language in languages"
 3 |     data-to-drag="language"
 4 |     drop-zone="language.type">\language.name\
 5 | </wsk-draggable>
 6 | 
 7 | <wsk-draggable class="language" ng-repeat="language in languages"
 8 | data-to-drag="language"
 9 | drop-zone="language.type">\language.name\
10 | </wsk-draggable>
11 | 
12 | <wsk-draggable class="language" ng-repeat="language in languages"
13 | data-to-drag="language"
14 | drop-zone="language.type">\language.name\
15 | </wsk-draggable>
16 |
-------------------------------------------------------------------------------- /example/wsk_tooltip/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular_tooltip_sample 2 | description: WSK Angular Tooltip sample 3 | version: 0.1.0 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | wsk_angular: 13 | path: ../../ 14 | 15 | dev_dependencies: 16 | unittest: any 17 | 18 | #------------------------------------------------ 19 | transformers: 20 | - angular: 21 | # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 22 | 23 | # List is necessary because of this bug: http://goo.gl/4Rb3wr 24 | html_files: [ 25 | 'web/index.html' 26 | ] 27 | 28 | - $dart2js: 29 | minify: false 30 | sourceMaps: true 31 | -------------------------------------------------------------------------------- /example/wsk_tooltip/web/demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_angular/sass/wsk_styleguide_demo_bp"; 2 | @import "packages/wsk_angular/sass/wsk_demo/wsk_demo"; 3 | @import "packages/wsk_angular/sass/wsk_tooltip/wsk_tooltip"; 4 | 5 | .tooltip.sample { 6 | .toolbar { 7 | display : flex; 8 | flex-wrap : wrap; 9 | background : #eee; 10 | padding : 20px; 11 | 12 | margin-bottom: 30px; 13 | } 14 | 15 | &:first-of-type { 16 | margin-bottom : 20px; 17 | } 18 | 19 | label { 20 | padding-right : 1em; 21 | } 22 | 23 | .icon { 24 | background-color : transparent; 25 | border : none; 26 | display : inline-block; 27 | height : 21px; 28 | margin : 0 50px; 29 | opacity : .7; 30 | outline : none; 31 | padding : 0; 32 | position : relative; 33 | width : 21px; 34 | } 35 | 36 | icon:hover { 37 | opacity : 1; 38 | } 39 | 40 | .hint { 41 | padding-top : 24px; 42 | } 43 | } 44 | 45 | -------------------------------------------------------------------------------- /example/wsk_tooltip/web/main.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.example.wsk_tooltip; 2 | 3 | import 'dart:html' as html; 4 | import "dart:math" as Math; 5 | 6 | import 'package:angular/angular.dart'; 7 | import 'package:angular/application_factory.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:console_log_handler/console_log_handler.dart'; 11 | 12 | import 'package:wsk_angular/wsk_tooltip/wsk_tooltip.dart'; 13 | 14 | @Injectable() 15 | class AppController { 16 | final _logger = new Logger('wsk_angular.example.wsk_tooltip.AppController'); 17 | 18 | AppController() { 19 | _logger.fine("AppController"); 20 | } 21 | 22 | String tooltipText = "Simple tooltip"; 23 | } 24 | 25 | 26 | /// Demo Module 27 | class SampleModule extends Module { 28 | SampleModule() { 29 | install(new WskTooltipModule()); 30 | 31 | bind(AppController); 32 | 33 | // -- controllers 34 | 35 | // -- services 36 | 37 | // -- decorator 38 | 39 | //factory(NgRoutingUsePushState, (_) => new NgRoutingUsePushState.value(false)); 40 | } 41 | } 42 | 43 | /// Entry point into app. 44 | main() { 45 | configLogger(); 46 | applicationFactory().addModule(new SampleModule()).rootContextType(AppController).run(); 47 | } 48 | 49 | 50 | // Weitere Infos: https://github.com/chrisbu/logging_handlers#quick-reference 51 | void configLogger() { 52 | //hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK 53 | 54 | // now control the logging. 55 | // Turn off all logging first 56 | Logger.root.level = Level.FINE; 57 | Logger.root.onRecord.listen(new LogConsoleHandler()); 58 | } -------------------------------------------------------------------------------- /lib/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MikeMitterer/dart-wsk-angular/966b51fcb70fc0693e0e35a4d3aca112b7effc23/lib/images/screenshot.png -------------------------------------------------------------------------------- /lib/sass/_wsk_colors.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/colors"; -------------------------------------------------------------------------------- /lib/sass/wsk_accordion/_wsk_accordion.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/accordion/accordion"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_animation/_wsk_animation.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/animation/animation"; 2 | 3 | -------------------------------------------------------------------------------- /lib/sass/wsk_badge/_wsk_badge.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/badge/badge"; -------------------------------------------------------------------------------- /lib/sass/wsk_bottombar/_wsk_bottombar.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/bottombar/bottombar"; -------------------------------------------------------------------------------- /lib/sass/wsk_button/_wsk_button.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/button/button"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_card/_wsk_card.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/card/card"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_checkbox/_wsk_checkbox.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/checkbox/checkbox"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_column-layout/_wsk_column-layout.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/column-layout/column-layout"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_demo/_wsk_demo.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/demo/demo"; 2 | 3 | /* 4 | Angular and LoadChecker (loadindicator) related 5 | -------------------------------------------------------------------------- */ 6 | 7 | body.debug.loadchecker { 8 | border: 5px solid red; 9 | } 10 | 11 | .loadindicator, 12 | body[ng-cloak] .angular-controlled, 13 | body.ng-cloak .angular-controlled, 14 | body.loadchecker .angular-controlled { 15 | display: none; 16 | } 17 | 18 | body[ng-cloak] .loadindicator.angular, 19 | body.ng-cloak .loadindicator.angular, 20 | body.loadchecker .loadindicator.wsk { 21 | display: block; 22 | } 23 | 24 | $demo-first_col_with: 280px; 25 | $demo-col_padding: 10px; 26 | 27 | .preview-block.sample { 28 | margin: 24px; 29 | 30 | .cols { 31 | display: flex; 32 | flex-direction: row; 33 | flex-wrap: wrap; 34 | justify-content: flex-start; // ⇾ 35 | align-content: space-between; // || 36 | align-items: flex-start; // ↓ 37 | } 38 | 39 | .cols > div { 40 | padding : $demo-col_padding; 41 | 42 | width: $demo-first_col_with; 43 | 44 | max-width: ($demo-first_col_with * 1.5); 45 | } 46 | } 47 | 48 | 49 | -------------------------------------------------------------------------------- /lib/sass/wsk_dragdrop/_wsk_dragdrop.scss: -------------------------------------------------------------------------------- 1 | .wsk-dropzone { 2 | display: block; 3 | } 4 | 5 | .wsk-draggable { 6 | display: block; 7 | } 8 | 9 | @mixin keyframes-swing() { 10 | 15% { 11 | transform: translateX(5px); 12 | } 13 | 30% { 14 | transform: translateX(-5px); 15 | } 16 | 50% { 17 | transform: translateX(3px); 18 | } 19 | 65% { 20 | transform: translateX(-3px); 21 | } 22 | 80% { 23 | transform: translateX(2px); 24 | } 25 | 100% { 26 | transform: translateX(0); 27 | } 28 | } 29 | @-webkit-keyframes swing { 30 | @include keyframes-swing(); 31 | } 32 | 33 | @keyframes swing { 34 | @include keyframes-swing(); 35 | } 36 | 37 | .dnd-draggable { 38 | cursor: url(../../packages/dnd/cursor/openhand.cur), move; /* Cursor for IE. */ 39 | cursor: url(../../packages/dnd/cursor/openhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */ 40 | } 41 | 42 | .dnd-invalid { 43 | animation: swing 1s ease; 44 | animation-iteration-count: 1; 45 | 46 | cursor: no-drop; 47 | cursor: not-allowed; 48 | } 49 | 50 | .dnd-over { 51 | opacity: 1; 52 | 53 | transition: background 0.3s ease; 54 | 55 | border: 2px dashed #1c691b !important; 56 | border-radius: 5px; 57 | background-color: rgba(149, 255, 149,0.6) !important;; 58 | 59 | } 60 | 61 | .dnd-dragging { 62 | opacity: 0.5; 63 | } 64 | 65 | .dnd-dragging, .dnd-drag-occurring { 66 | cursor: url(../../packages/dnd/cursor/closedhand.cur), move; /* Cursor for IE. */ 67 | cursor: url(../../packages/dnd/cursor/closedhand.cur) 7 5, move; /* Cursor for FF and Chrome (setting midpoint). */ 68 | } 69 | -------------------------------------------------------------------------------- /lib/sass/wsk_dropdown-menu/_wsk_dropdown-menu.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/dropdown-menu/dropdown-menu"; 2 | 3 | -------------------------------------------------------------------------------- /lib/sass/wsk_footer/_wsk_mega_footer.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/footer/mega_footer"; -------------------------------------------------------------------------------- /lib/sass/wsk_footer/_wsk_mini_footer-flex.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/footer/mini_footer-flex"; -------------------------------------------------------------------------------- /lib/sass/wsk_footer/_wsk_mini_footer.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/footer/mini_footer"; -------------------------------------------------------------------------------- /lib/sass/wsk_icon-toggle/_wsk_icon-toggle.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/icon-toggle/icon-toggle"; -------------------------------------------------------------------------------- /lib/sass/wsk_item/_wsk_item.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/item/item"; -------------------------------------------------------------------------------- /lib/sass/wsk_layout/_wsk_layout.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/layout/layout"; -------------------------------------------------------------------------------- /lib/sass/wsk_list/_wsk_list.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/list/list"; -------------------------------------------------------------------------------- /lib/sass/wsk_nav-pills/_wsk_nav-pills.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/nav-pills/nav-pills"; 2 | 3 | .wsk-nav-pill { 4 | display: block; 5 | } -------------------------------------------------------------------------------- /lib/sass/wsk_palette/_wsk_palette.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/palette/palette"; 2 | 3 | -------------------------------------------------------------------------------- /lib/sass/wsk_panel/_wsk_panel.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/panel/panel"; 2 | 3 | .wsk-panel { 4 | display: block; 5 | } -------------------------------------------------------------------------------- /lib/sass/wsk_radio/_wsk_radio.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/radio/radio"; -------------------------------------------------------------------------------- /lib/sass/wsk_resets/_mobile.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/resets/mobile"; -------------------------------------------------------------------------------- /lib/sass/wsk_resets/_wsk_h5bp.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/resets/h5bp"; -------------------------------------------------------------------------------- /lib/sass/wsk_ripple/_wsk_ripple.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/ripple/ripple"; -------------------------------------------------------------------------------- /lib/sass/wsk_shadow/_wsk_shadow.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/shadow/shadow"; 2 | -------------------------------------------------------------------------------- /lib/sass/wsk_slider/_wsk_slider.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/slider/slider"; -------------------------------------------------------------------------------- /lib/sass/wsk_styleguide_demo_bp.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/styleguide_demo_bp"; -------------------------------------------------------------------------------- /lib/sass/wsk_switch/_wsk_switch.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/switch/switch"; -------------------------------------------------------------------------------- /lib/sass/wsk_tabs/_wsk_tabs.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/tabs/tabs"; 2 | 3 | wsk-tab-bar { 4 | display: block; 5 | } -------------------------------------------------------------------------------- /lib/sass/wsk_textfield/_wsk_textfield.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/textfield/textfield"; 2 | 3 | wsk-textfield-container { 4 | display : block; 5 | box-sizing : border-box; 6 | 7 | wsk-textfield { 8 | box-sizing : border-box; 9 | 10 | /** Disabled Styling **/ 11 | .wsk-textfield[disabled] { 12 | color : $input-text-label-color; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /lib/sass/wsk_tooltip/_wsk_tooltip.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/tooltip/tooltip"; -------------------------------------------------------------------------------- /lib/sass/wsk_typography/_wsk_typography.scss: -------------------------------------------------------------------------------- 1 | @import "packages/wsk_material/sass/typography/typography"; -------------------------------------------------------------------------------- /lib/src/WskAngularCheckbox.dart: -------------------------------------------------------------------------------- 1 | part of wsk_angular; 2 | 3 | /// Use by WskCheckboxComponent and WskIconToggleComponent 4 | abstract class WskAngularCheckbox extends WskAngularComponent { 5 | 6 | @NgTwoWay("ngInternalModel") 7 | dynamic ngInternalModel; 8 | 9 | WskAngularCheckbox(final html.Element component, final WskConfig mainConfig,[ final List additionalConfigs = const [], final bool autoUpgrade = true ] ) 10 | : super(component,mainConfig,additionalConfigs,autoUpgrade); 11 | 12 | @NgTwoWay("ng-model") 13 | void set ngModel(final dynamic value) { 14 | if(value is bool) { 15 | ngInternalModel = value; 16 | return; 17 | } 18 | 19 | ngInternalModel = (value == ngTrueValue); 20 | } 21 | dynamic get ngModel { 22 | if(_isSet(ngTrueValue) && (ngInternalModel == ngTrueValue || ngInternalModel == true)) { 23 | return ngTrueValue; 24 | } 25 | else if(_isSet(ngFalseValue) && (ngInternalModel == ngFalseValue || ngInternalModel == false)) { 26 | return ngFalseValue; 27 | } 28 | return ngInternalModel; 29 | } 30 | 31 | @NgOneWay("ng-true-value") 32 | dynamic ngTrueValue; 33 | 34 | @NgOneWay("ng-false-value") 35 | dynamic ngFalseValue; 36 | 37 | @NgAttr("disabled") 38 | String disabled; 39 | 40 | /// Template-Helper to find out if Control is disabled 41 | bool get isDisabled => WskAngularUtils.isDisabled(disabled); 42 | 43 | // - private ---------------------------------------------------------------------------------- 44 | 45 | bool _isSet(final dynamic value) => (value != null); 46 | } -------------------------------------------------------------------------------- /lib/wsk_accordion/wsk_accordion.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 12 |
13 |
{{header}}
14 |

15 | 16 |

17 |
18 |
-------------------------------------------------------------------------------- /lib/wsk_accordion/wsk_accordion_group.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /lib/wsk_angular.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015, . All rights reserved. Use of this source code 2 | // is governed by a BSD-style license that can be found in the LICENSE file. 3 | 4 | library wsk_angular; 5 | 6 | import 'dart:html' as html; 7 | import "dart:async"; 8 | 9 | import "package:angular/angular.dart"; 10 | import 'package:angular/core/annotation_src.dart'; 11 | 12 | import 'package:logging/logging.dart'; 13 | import 'package:validate/validate.dart'; 14 | 15 | import 'package:wsk_material/wskcore.dart'; 16 | import 'package:wsk_material/wskcomponets.dart'; 17 | 18 | part "src/UpgradableComponent.dart"; 19 | part "src/WskAngularComponent.dart"; 20 | part "src/WskAngularCheckbox.dart"; 21 | 22 | part "src/WskAngularUtils.dart"; -------------------------------------------------------------------------------- /lib/wsk_animation/wsk_animation.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_animation; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * Animation Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskAnimationModule extends Module { 19 | WskAnimationModule() { 20 | 21 | bind(WskAnimationComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | // @formatter:off 28 | /// WskAnimationComponent 29 | @Component( selector: 'wsk-animation', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_animation/wsk_animation.html') 30 | // @formatter:on 31 | class WskAnimationComponent extends WskAngularComponent { 32 | final Logger _logger = new Logger('wsk_angular.wsk_animation.AnimationComponent'); 33 | 34 | WskAnimationComponent(final html.Element component) 35 | : super(component,materialAnimationConfig()) { 36 | Validate.notNull(component); 37 | } 38 | 39 | // - EventHandler ----------------------------------------------------------------------------- 40 | 41 | // - private ---------------------------------------------------------------------------------- 42 | } 43 | -------------------------------------------------------------------------------- /lib/wsk_animation/wsk_animation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 |
12 | 13 |
-------------------------------------------------------------------------------- /lib/wsk_badge/wsk_badge.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_badge; 2 | 3 | import 'dart:html' as dom; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskBadge Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskBadgeModule extends Module { 19 | WskBadgeModule() { 20 | 21 | bind(WskBadgeComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// Store strings for class names defined by this component that are used in Dart. 28 | class _WskBadgeCssClasses { 29 | 30 | final String BADGE = 'wsk-badge'; 31 | 32 | const _WskBadgeCssClasses(); 33 | } 34 | 35 | /// WskBadgeComponent 36 | @Decorator(selector: 'wsk-badge') 37 | class WskBadgeComponent { 38 | final Logger _logger = new Logger('wsk_angular.wsk_badge.WskBadgeComponent'); 39 | 40 | static const _cssClasses = const _WskBadgeCssClasses(); 41 | 42 | final dom.Element _component; 43 | 44 | WskBadgeComponent(this._component) { 45 | Validate.notNull(_component); 46 | _component.classes.add(_cssClasses.BADGE); 47 | } 48 | 49 | // - EventHandler ----------------------------------------------------------------------------- 50 | 51 | // - private ---------------------------------------------------------------------------------- 52 | } 53 | -------------------------------------------------------------------------------- /lib/wsk_badge/wsk_badge.html: -------------------------------------------------------------------------------- 1 |
2 | wsk_badge 3 | 4 |
-------------------------------------------------------------------------------- /lib/wsk_button/wsk_button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/wsk_checkbox/wsk_checkbox.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_checkbox; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | 15 | /** 16 | * WskCheckbox Module. 17 | * Weitere Infos: https://docs.angulardart.org/#di.Module 18 | */ 19 | class WskCheckboxModule extends Module { 20 | WskCheckboxModule() { 21 | 22 | bind(WskCheckboxComponent); 23 | 24 | //- Services --------------------------- 25 | } 26 | } 27 | 28 | // @formatter:off 29 | /// WskCheckboxComponent 30 | @Component( selector: 'wsk-checkbox', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_checkbox/wsk_checkbox.html') 31 | // @formatter:on 32 | class WskCheckboxComponent extends WskAngularCheckbox { 33 | final Logger _logger = new Logger('wsk_angular.wsk_checkbox.WskCheckboxComponent'); 34 | 35 | WskCheckboxComponent(final html.Element component) 36 | : super(component,materialCheckboxConfig(), [ materialRippleConfig() ]) { 37 | Validate.notNull(component); 38 | } 39 | 40 | // - private ---------------------------------------------------------------------------------- 41 | } 42 | -------------------------------------------------------------------------------- /lib/wsk_checkbox/wsk_checkbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 13 | -------------------------------------------------------------------------------- /lib/wsk_dialog/src/AlertDialog.dart: -------------------------------------------------------------------------------- 1 | part of wsk_angular.wsk_dialog; 2 | 3 | @Component(selector: "wsk-alert-dialog" ,useShadowDom: false, templateUrl: "packages/wsk_angular/wsk_dialog/wsk_alert-dialog.html") 4 | class WskAlertDialog extends WskDialog { 5 | static const String SELECTOR = "wsk-alert-dialog"; 6 | 7 | static const String _DEFAULT_OK_BUTTON = "OK"; 8 | 9 | 10 | String title = ""; 11 | String text = ""; 12 | String okButton = _DEFAULT_OK_BUTTON; 13 | 14 | WskAlertDialog(final Injector injector) : super(SELECTOR,new DialogConfig()) { 15 | Validate.notNull(injector); 16 | this.injector = injector; 17 | } 18 | 19 | WskAlertDialog call(final String text,{ final String title: "", final String okButton: _DEFAULT_OK_BUTTON }) { 20 | Validate.notBlank(text); 21 | Validate.notNull(title); 22 | Validate.notBlank(okButton); 23 | 24 | this.text = text; 25 | this.title = title; 26 | this.okButton = okButton; 27 | return this; 28 | } 29 | 30 | bool get hasTitle => (title != null && title.isNotEmpty); 31 | 32 | // - EventHandler ----------------------------------------------------------------------------- 33 | 34 | void onClose() { 35 | _logger.info("onClose"); 36 | close(WskDialogStatus.OK); 37 | } 38 | 39 | // - private ---------------------------------------------------------------------------------- 40 | 41 | } -------------------------------------------------------------------------------- /lib/wsk_dialog/src/ConfirmDialog.dart: -------------------------------------------------------------------------------- 1 | part of wsk_angular.wsk_dialog; 2 | 3 | @Component(selector: "wsk-confirm-dialog" ,useShadowDom: false, 4 | templateUrl: "packages/wsk_angular/wsk_dialog/wsk_confirm-dialog.html") 5 | class WskConfirmDialog extends WskDialog { 6 | static const String SELECTOR = "wsk-confirm-dialog"; 7 | 8 | static const String _DEFAULT_YES_BUTTON = "Yes"; 9 | static const String _DEFAULT_NO_BUTTON = "No"; 10 | 11 | String title = ""; 12 | String text = ""; 13 | String yesButton = _DEFAULT_YES_BUTTON; 14 | String noButton = _DEFAULT_NO_BUTTON; 15 | 16 | WskConfirmDialog(final Injector injector) : super(SELECTOR,new DialogConfig()) { 17 | Validate.notNull(injector); 18 | this.injector = injector; 19 | } 20 | 21 | WskConfirmDialog call(final String text,{ final String title: "", 22 | final String yesButton: _DEFAULT_YES_BUTTON, final String noButton: _DEFAULT_NO_BUTTON }) { 23 | Validate.notBlank(text); 24 | Validate.notNull(title); 25 | Validate.notBlank(yesButton); 26 | Validate.notBlank(noButton); 27 | 28 | this.text = text; 29 | this.title = title; 30 | this.yesButton = yesButton; 31 | this.noButton = noButton; 32 | 33 | return this; 34 | } 35 | 36 | bool get hasTitle => (title != null && title.isNotEmpty); 37 | 38 | // - EventHandler ----------------------------------------------------------------------------- 39 | 40 | void onYes() { 41 | close(WskDialogStatus.YES); 42 | } 43 | 44 | void onNo() { 45 | close(WskDialogStatus.NO); 46 | } 47 | 48 | // - private ---------------------------------------------------------------------------------- 49 | 50 | } -------------------------------------------------------------------------------- /lib/wsk_dialog/wsk_alert-dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{{title}}
4 |

{{text}}

5 | 6 | 7 | {{okButton}} 8 | 9 | -------------------------------------------------------------------------------- /lib/wsk_dialog/wsk_confirm-dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
{{title}}
4 |

{{text}}

5 | 6 | 7 | {{noButton}} 8 | {{yesButton}} 9 | 10 | -------------------------------------------------------------------------------- /lib/wsk_dialog/wsk_dialog.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_dialog; 2 | 3 | import 'dart:html' as html; 4 | import 'dart:async'; 5 | 6 | import "package:angular/angular.dart"; 7 | import 'package:angular/core/annotation_src.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:validate/validate.dart'; 11 | 12 | import 'package:wsk_material/wskcomponets.dart'; 13 | import 'package:wsk_angular/wsk_angular.dart'; 14 | 15 | part "src/utils.dart"; 16 | part "src/DialogElement.dart"; 17 | part "src/WskDialog.dart"; 18 | 19 | part "src/AlertDialog.dart"; 20 | part "src/ConfirmDialog.dart"; 21 | 22 | /// Store strings for class names defined by this component that are used in 23 | /// Dart. This allows us to simply change it in one place should we 24 | /// decide to modify at a later date. 25 | class _WskDialogCssClasses { 26 | 27 | final String DIALOG = "wsk-dialog"; 28 | final String CONTENT = "wsk-dialog__content"; 29 | final String ACTIONS = "wsk-dialog__actions"; 30 | 31 | const _WskDialogCssClasses(); 32 | } 33 | 34 | /** 35 | * WskDialog Module. 36 | * More infos: https://docs.angulardart.org/#di.Module 37 | */ 38 | class WskDialogModule extends Module { 39 | WskDialogModule() { 40 | 41 | bind(WskAlertDialog); 42 | bind(WskConfirmDialog); 43 | 44 | bind(WskDialogComponent); 45 | bind(WskDialogContentComponent); 46 | bind(WskDialogActions); 47 | 48 | //- Services --------------------------- 49 | } 50 | } 51 | 52 | @Decorator(selector: 'wsk-dialog') 53 | class WskDialogComponent { 54 | static const _WskDialogCssClasses _cssClasses = const _WskDialogCssClasses(); 55 | 56 | WskDialogComponent(final html.Element component) { 57 | Validate.notNull(component); 58 | component.classes.add(_cssClasses.DIALOG); 59 | } 60 | } 61 | 62 | @Decorator(selector: 'wsk-dialog-content') 63 | class WskDialogContentComponent { 64 | static const _WskDialogCssClasses _cssClasses = const _WskDialogCssClasses(); 65 | 66 | WskDialogContentComponent(final html.Element component) { 67 | Validate.notNull(component); 68 | component.classes.add(_cssClasses.CONTENT); 69 | } 70 | } 71 | 72 | @Decorator(selector: 'wsk-dialog-actions') 73 | class WskDialogActions { 74 | static const _WskDialogCssClasses _cssClasses = const _WskDialogCssClasses(); 75 | 76 | WskDialogActions(final html.Element component) { 77 | Validate.notNull(component); 78 | component.classes.add(_cssClasses.ACTIONS); 79 | } 80 | } 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /lib/wsk_dragdrop/README.md: -------------------------------------------------------------------------------- 1 | WSK Angular **Drag&Drop** componets. 2 | 3 | The **wsk-draggable** component identifies the draggable object. 4 | Available settings: 5 | - `drop-zone`: String or array of Strings. Specify the drop-zones to which this component can drop. 6 | - `enabled`: bool value. whether the object is draggable. Default is true. 7 | - `data-to-drag`: the data that has to be dragged. It can be any Dart object. 8 | 9 | The **wsk-dropzone** component identifies the drop target object. 10 | Available settings: 11 | 12 | - `name`: String or array of Strings. It permits to specify the drop zones associated with this component. By default, if the `name` attribute is not specified, the droppable component accepts drop operations by all the draggable components that do not specify the `drop-zone` 13 | - `on-drop-success`: callback function called when the drop action completes correctly. 14 | 15 | -------------------------------------------------------------------------------- /lib/wsk_dragdrop/src/wsk_draggable.dart: -------------------------------------------------------------------------------- 1 | part of wsk_angular.wsk_dragdrop; 2 | 3 | @Decorator(selector: 'wsk-draggable') 4 | class WskDraggableComponent { 5 | final Logger _logger = new Logger('wsk_angular.wsk_dragdrop.DraggableComponent'); 6 | 7 | final html.Element _component; 8 | static const _DNDCssClasses _cssClasses = const _DNDCssClasses(); 9 | 10 | final DragInfo _dragInfo; 11 | 12 | List allowedDropZones = []; 13 | 14 | Draggable _draggable; 15 | 16 | WskDraggableComponent(this._component, this._dragInfo) { 17 | Validate.notNull(_component); 18 | Validate.notNull(_dragInfo); 19 | 20 | _component.classes.add(_cssClasses.WSK_DRAGGABLE); 21 | _component.classes.add(_cssClasses.DRAGGABLE); 22 | 23 | _draggable = new Draggable(_component, avatarHandler: new AvatarHandler.clone()); 24 | 25 | _draggable.onDragStart.listen(_onDragStart); 26 | _draggable.onDragEnd.listen(_onDragEnd); 27 | } 28 | 29 | @NgOneWay("drop-zone") 30 | set dropZone(var dropZone) { 31 | if (dropZone != null && (dropZone is String)) { 32 | this.allowedDropZones = [ dropZone ]; 33 | } 34 | else if (dropZone != null && (dropZone is List)) { 35 | this.allowedDropZones = dropZone; 36 | } 37 | } 38 | 39 | get _isDisabled => WskAngularUtils.hasAttributeOrClass(_component,[ 'disabled', 'is-disabled' ]); 40 | 41 | @NgOneWay("data-to-drag") 42 | var dataToDrag; 43 | 44 | 45 | // -- private --------------------------------------------------------------------------------- 46 | 47 | void _onDragStart(final DraggableEvent event) { 48 | _logger.info("_onDragStart ${event}"); 49 | if (_isDisabled) { 50 | return; 51 | } 52 | 53 | _dragInfo.allowedDropZones = allowedDropZones; 54 | _dragInfo.data = dataToDrag; 55 | } 56 | 57 | void _onDragEnd(final DraggableEvent event) { 58 | 59 | _dragInfo.data = null; 60 | } 61 | 62 | } 63 | 64 | -------------------------------------------------------------------------------- /lib/wsk_dragdrop/wsk_dragdrop.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_dragdrop; 2 | 3 | import 'dart:html' as html; 4 | import 'dart:async'; 5 | 6 | import "package:angular/angular.dart"; 7 | import 'package:angular/core/annotation_src.dart'; 8 | 9 | import 'package:logging/logging.dart'; 10 | import 'package:validate/validate.dart'; 11 | 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | import 'package:dnd/dnd.dart'; 15 | 16 | part 'src/wsk_draggable.dart'; 17 | part 'src/wsk_dropzone.dart'; 18 | 19 | /// Store strings for class names defined by this component that are used in 20 | /// Dart. This allows us to simply change it in one place should we 21 | /// decide to modify at a later date. 22 | class _DNDCssClasses { 23 | 24 | final String WSK_DROPZONE = 'wsk-dropzone'; 25 | final String WSK_DRAGGABLE = 'wsk-draggable'; 26 | 27 | final String DRAGGABLE = 'dnd-draggable'; 28 | final String OVER = 'dnd-over'; 29 | final String INVALID = 'dnd-invalid'; 30 | 31 | const _DNDCssClasses(); 32 | } 33 | 34 | 35 | 36 | @Injectable() 37 | class DragInfo { 38 | var data; 39 | List allowedDropZones = []; 40 | } 41 | 42 | class WskDragDropModule extends Module { 43 | WskDragDropModule() { 44 | bind(DragInfo); 45 | 46 | bind(WskDraggableComponent); 47 | bind(WskDropZoneComponent); 48 | } 49 | } -------------------------------------------------------------------------------- /lib/wsk_icon_toggle/wsk_icon_toggle.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_icon_toggle; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskIconToggle Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskIconToggleModule extends Module { 19 | WskIconToggleModule() { 20 | 21 | bind(WskIconToggleComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | // @formatter:off 28 | /// WskIconToggleComponent 29 | @Component( selector: 'wsk-icon-toggle', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_icon_toggle/wsk_icon_toggle.html') 30 | // @formatter:on 31 | class WskIconToggleComponent extends WskAngularCheckbox { 32 | final Logger _logger = new Logger('wsk_angular.wsk_icon_toggle.WskIconToggleComponent'); 33 | 34 | WskIconToggleComponent(final html.Element component) 35 | : super(component, materialIconToggleConfig() , [ materialRippleConfig() ]) { 36 | Validate.notNull(component); 37 | } 38 | 39 | // - EventHandler ----------------------------------------------------------------------------- 40 | 41 | // - private ---------------------------------------------------------------------------------- 42 | } 43 | -------------------------------------------------------------------------------- /lib/wsk_icon_toggle/wsk_icon_toggle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /lib/wsk_item/wsk_item.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_item; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskItem Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskItemModule extends Module { 19 | WskItemModule() { 20 | 21 | //bind(WskItemComponent); 22 | bind(WskItemDecorator); 23 | 24 | //- Services --------------------------- 25 | } 26 | } 27 | 28 | // @formatter:off 29 | /// WskItemComponent 30 | @Component( selector: 'wsk-item', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_item/wsk_item.html') 31 | // @formatter:on 32 | class WskItemComponent extends WskAngularComponent { 33 | final Logger _logger = new Logger('wsk_angular.wsk_item.WskItemComponent'); 34 | 35 | WskItemComponent(final html.Element component) 36 | : super(component, materialItemConfig(), [ ]) { 37 | Validate.notNull(component); 38 | } 39 | 40 | @NgAttr("disabled") 41 | String disabled; 42 | 43 | @NgOneWay("isDisabled") 44 | bool get isDisabled => (_isSet(disabled) && (disabled.isEmpty || disabled == "true")); 45 | 46 | // - EventHandler ----------------------------------------------------------------------------- 47 | 48 | // - private ---------------------------------------------------------------------------------- 49 | 50 | bool _isSet(final dynamic value) => (value != null); 51 | } 52 | 53 | /// WskItemDecorator 54 | @Decorator(selector: '[wsk-item]') 55 | class WskItemDecorator extends WskAngularComponent implements AttachAware { 56 | final _logger = new Logger('wsk_anuglar.wsk_item.WskItemDecorator'); 57 | 58 | final html.Element _component; 59 | 60 | WskItemDecorator(final html.Element component) 61 | : super(component,materialItemConfig(), [ materialRippleConfig() ] ,false), _component = component { 62 | Validate.notNull(_component); 63 | } 64 | 65 | attach() { 66 | _component.classes.add("wsk-item"); 67 | _component.classes.add("wsk-js-ripple-effect"); 68 | autoUpgrade(); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /lib/wsk_item/wsk_item.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /lib/wsk_layout/wsk_layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 |
13 | 14 |
-------------------------------------------------------------------------------- /lib/wsk_nav-pills/wsk_nav-pills.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_nav_pills; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskNavPills Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskNavPillsModule extends Module { 19 | WskNavPillsModule() { 20 | 21 | bind(WskNavPillsComponent); 22 | bind(WskNavPillComponent); 23 | 24 | //- Services --------------------------- 25 | } 26 | } 27 | 28 | /// Store strings for class names defined by this component that are used in Dart. 29 | class _WskNavPillsCssClasses { 30 | 31 | final String PILLS = 'wsk-nav-pills'; 32 | final String PILL = 'wsk-nav-pill'; 33 | 34 | const _WskNavPillsCssClasses(); 35 | } 36 | 37 | /// WskNavPillsComponent 38 | @Component( selector: 'wsk-nav-pills', useShadowDom: false) 39 | class WskNavPillsComponent { 40 | final Logger _logger = new Logger('wsk_angular.wsk_nav_pills.WskNavPillsComponent'); 41 | 42 | static const _cssClasses = const _WskNavPillsCssClasses(); 43 | 44 | final html.Element _component; 45 | 46 | WskNavPillsComponent(this._component) { 47 | Validate.notNull(_component); 48 | _component.classes.add(_cssClasses.PILLS); 49 | } 50 | 51 | // - EventHandler ----------------------------------------------------------------------------- 52 | 53 | // - private ---------------------------------------------------------------------------------- 54 | } 55 | 56 | /// WskNavPillComponent 57 | @Component( selector: 'wsk-nav-pill', useShadowDom: false) 58 | class WskNavPillComponent { 59 | final Logger _logger = new Logger('wsk_angular.wsk_nav_pill.WskNavPillComponent'); 60 | 61 | static const _cssClasses = const _WskNavPillsCssClasses(); 62 | 63 | final html.Element _component; 64 | 65 | WskNavPillComponent(this._component) { 66 | Validate.notNull(_component); 67 | _component.classes.add(_cssClasses.PILL); 68 | } 69 | 70 | // - EventHandler ----------------------------------------------------------------------------- 71 | 72 | // - private ---------------------------------------------------------------------------------- 73 | } 74 | -------------------------------------------------------------------------------- /lib/wsk_panel/wsk_panel.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_panel; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskPanel Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskPanelModule extends Module { 19 | WskPanelModule() { 20 | 21 | bind(WskPanelComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// Store strings for class names defined by this component that are used in Dart. 28 | class _WskBadgeCssClasses { 29 | 30 | final String PANEL = 'wsk-panel'; 31 | 32 | const _WskBadgeCssClasses(); 33 | } 34 | 35 | /// WskPanelComponent 36 | @Component( selector: 'wsk-panel', useShadowDom: false) 37 | class WskPanelComponent { 38 | final Logger _logger = new Logger('wsk_angular.wsk_panel.WskPanelComponent'); 39 | 40 | static const _cssClasses = const _WskBadgeCssClasses(); 41 | 42 | final html.Element _component; 43 | 44 | WskPanelComponent(this._component) { 45 | Validate.notNull(_component); 46 | _component.classes.add(_cssClasses.PANEL); 47 | } 48 | 49 | // - EventHandler ----------------------------------------------------------------------------- 50 | 51 | // - private ---------------------------------------------------------------------------------- 52 | } 53 | -------------------------------------------------------------------------------- /lib/wsk_radio/wsk_radio.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/wsk_slider/wsk_slider.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_slider; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskSlider Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskSliderModule extends Module { 19 | WskSliderModule() { 20 | 21 | bind(WskSliderComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// WskSliderComponent 28 | @Component(selector: 'wsk-slider', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_slider/wsk_slider.html') 29 | class WskSliderComponent extends WskAngularComponent { 30 | final Logger _logger = new Logger('wsk_angular.wsk_slider.WskSliderComponent'); 31 | 32 | final html.Element _component; 33 | 34 | WskSliderComponent(final html.Element component) 35 | : super(component, materialSliderConfig()), _component = component { 36 | Validate.notNull(component); 37 | } 38 | 39 | dynamic _min; 40 | @NgAttr("min") 41 | set min(final dynamic value) => _min = value; 42 | get min => WskAngularUtils.asInt(_min == null ? 0 : _min); 43 | 44 | dynamic _max; 45 | @NgAttr("max") 46 | set max(final dynamic value) => _max = value; 47 | get max => WskAngularUtils.asInt(_max == null ? 100 : _max,defaultValue: 100); 48 | 49 | @NgTwoWay('ng-model') 50 | dynamic model; 51 | 52 | @NgOneWay('ng-value') 53 | void set value(final val) { model = val; } 54 | get value => WskAngularUtils.asInt(model == null ? _component.attributes["value"] : model); 55 | 56 | dynamic _disabled; 57 | @NgTwoWay('ng-disabled') 58 | set disabled(dynamic value) => _disabled = value; 59 | dynamic get disabled => WskAngularUtils.isDisabled( 60 | _disabled == null ? _component.attributes['disabled'] : _disabled); 61 | 62 | @NgTwoWay('ng-change') 63 | dynamic change; 64 | 65 | // - private ---------------------------------------------------------------------------------- 66 | } 67 | -------------------------------------------------------------------------------- /lib/wsk_slider/wsk_slider.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /lib/wsk_spinner/wsk_spinner.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_spinner; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskSpinner Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskSpinnerModule extends Module { 19 | WskSpinnerModule() { 20 | 21 | bind(WskSpinnerComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// WskSpinnerComponent 28 | @Component(selector: 'wsk-spinner', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_spinner/wsk_spinner.html') 29 | class WskSpinnerComponent extends WskAngularComponent { 30 | final Logger _logger = new Logger('wsk_angular.wsk_spinner.WskSpinnerComponent'); 31 | 32 | final html.Element _component; 33 | 34 | WskSpinnerComponent(final html.Element component) 35 | : super(component, materialSpinnerConfig(), [ materialRippleConfig() ]), _component = component { 36 | Validate.notNull(component); 37 | } 38 | 39 | // String _isActive; 40 | // @NgAttr("is-active") 41 | // set active(final dynamic value) => _isActive = value; 42 | bool get isActive => WskAngularUtils.hasAttributeOrClass(_component,[ "is-active" ]); 43 | 44 | // dynamic _singleColor; 45 | // @NgAttr("single-color") 46 | // set singleColor(final dynamic value) => _singleColor = value; 47 | bool get singleColor => WskAngularUtils.hasAttributeOrClass(_component,[ "single-color" ]); 48 | 49 | 50 | // - EventHandler ----------------------------------------------------------------------------- 51 | 52 | // - private ---------------------------------------------------------------------------------- 53 | } 54 | -------------------------------------------------------------------------------- /lib/wsk_spinner/wsk_spinner.html: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /lib/wsk_switch/wsk_switch.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_switch; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskSwitch Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskSwitchModule extends Module { 19 | WskSwitchModule() { 20 | 21 | bind(WskSwitchComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// WskSwitchComponent 28 | @Component(selector: 'wsk-switch', useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_switch/wsk_switch.html') 29 | class WskSwitchComponent extends WskAngularComponent { 30 | final Logger _logger = new Logger('wsk_angular.wsk_switch.WskSwitchComponent'); 31 | 32 | final html.Element _component; 33 | 34 | WskSwitchComponent(final html.Element component) 35 | : super(component, materialSwitchConfig(), [ materialRippleConfig() ]), _component = component { 36 | Validate.notNull(component); 37 | } 38 | 39 | @NgTwoWay('ng-model') 40 | dynamic model; 41 | 42 | dynamic get isDisabled => WskAngularUtils.hasAttributeOrClass( _component, [ "is-disabled", "disabled" ]); 43 | 44 | // - EventHandler ----------------------------------------------------------------------------- 45 | 46 | // - private ---------------------------------------------------------------------------------- 47 | } 48 | -------------------------------------------------------------------------------- /lib/wsk_switch/wsk_switch.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /lib/wsk_tabs/wsk_tabs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 11 |
12 | 13 |
-------------------------------------------------------------------------------- /lib/wsk_textfield/wsk_textfield.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 11 | 12 | 21 | 22 | 25 |
-------------------------------------------------------------------------------- /lib/wsk_toast/wsk_toast.html: -------------------------------------------------------------------------------- 1 | 10 | {{text}} 11 | {{confirmButton}} 12 | 13 | -------------------------------------------------------------------------------- /lib/wsk_tooltip/wsk_tooltip.dart: -------------------------------------------------------------------------------- 1 | library wsk_angular.wsk_tooltip; 2 | 3 | import 'dart:html' as html; 4 | 5 | import "package:angular/angular.dart"; 6 | import 'package:angular/core/annotation_src.dart'; 7 | 8 | import 'package:logging/logging.dart'; 9 | import 'package:validate/validate.dart'; 10 | 11 | import 'package:wsk_material/wskcomponets.dart'; 12 | import 'package:wsk_angular/wsk_angular.dart'; 13 | 14 | /** 15 | * WskTooltip Module. 16 | * Weitere Infos: https://docs.angulardart.org/#di.Module 17 | */ 18 | class WskTooltipModule extends Module { 19 | WskTooltipModule() { 20 | 21 | bind(WskTooltipComponent); 22 | 23 | //- Services --------------------------- 24 | } 25 | } 26 | 27 | /// WskTooltipComponent 28 | @Decorator(selector: 'wsk-tooltip' /*, useShadowDom: false, templateUrl: 'packages/wsk_angular/wsk_tooltip/wsk_tooltip.html' */) 29 | class WskTooltipComponent extends WskAngularComponent implements AttachAware { 30 | 31 | final Logger _logger = new Logger('wsk_angular.wsk_tooltip.WskTooltipComponent'); 32 | 33 | final html.Element _component; 34 | 35 | WskTooltipComponent(final html.Element component) 36 | : super(component, materialTooltipConfig(), [ ], false), _component = component { 37 | Validate.notNull(component); 38 | } 39 | 40 | void attach() { 41 | _component.classes.add("wsk-tooltip"); 42 | if(_component.attributes.containsKey("large")) { 43 | _component.classes.add("wsk-tooltip--large"); 44 | } 45 | autoUpgrade(); 46 | } 47 | 48 | 49 | // - EventHandler ----------------------------------------------------------------------------- 50 | 51 | // - private ---------------------------------------------------------------------------------- 52 | } 53 | -------------------------------------------------------------------------------- /lib/wsk_tooltip/wsk_tooltip.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: wsk_angular 2 | description: Material Design for Angular App! Based on Googles Web Starter Kit - Material version 3 | version: 0.8.3 4 | author: Mike Mitterer 5 | homepage: https://github.com/MikeMitterer/dart-wsk-angular 6 | 7 | dependencies: 8 | browser: any 9 | 10 | angular: ">=1.0.0 <2.0.0" 11 | 12 | validate: any 13 | 14 | wsk_material: 15 | #">=0.6.0 <0.7.0" 16 | any 17 | #path: /Volumes/Daten/DevLocal/DevDart/WskMaterial 18 | 19 | logging: any 20 | logging_handlers: any 21 | console_log_handler: any 22 | # path: /Volumes/Daten/DevLocal/DevDart/ConsoleLogHandler 23 | 24 | dnd: any 25 | 26 | dev_dependencies: 27 | unittest: any 28 | 29 | # Angular braucht das! 30 | mock: ">=0.11.0+1 <0.12.0" 31 | 32 | args: any 33 | 34 | material_icons: any 35 | 36 | #------------------------------------------------ 37 | # Kann mit dart-ptransformers generiert werden. 38 | # 39 | transformers: 40 | #- angular: 41 | # # dart_sdk: "/Developer/dart-1.8.5/dart-sdk" 42 | # 43 | # # List is necessary because of this bug: http://goo.gl/4Rb3wr 44 | # html_files: [ ] 45 | 46 | - $dart2js: 47 | minify: false 48 | sourceMaps: true 49 | -------------------------------------------------------------------------------- /test/all_test.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2015, . All rights reserved. Use of this source code 2 | // is governed by a BSD-style license that can be found in the LICENSE file. 3 | 4 | library wsk_angular.test; 5 | 6 | import 'package:unittest/unittest.dart'; 7 | import 'package:wsk_angular/wsk_angular.dart'; 8 | 9 | main() { 10 | group('A group of tests', () { 11 | Awesome awesome; 12 | 13 | setUp(() { 14 | awesome = new Awesome(); 15 | }); 16 | 17 | test('First Test', () { 18 | expect(awesome.isAwesome, isTrue); 19 | }); 20 | }); 21 | } 22 | --------------------------------------------------------------------------------