├── .gitignore ├── .travis.yml.disabled ├── AUTHORS ├── LICENSE ├── README.md ├── analysis_options.yaml ├── angular_gallery ├── build.yaml ├── lib │ ├── builder │ │ ├── gallery_app_builder.dart │ │ ├── gallery_lib_builder.dart │ │ └── template │ │ │ ├── gallery.dart.mustache │ │ │ ├── gallery.html.mustache │ │ │ ├── gallery.scss.mustache │ │ │ ├── gallery_route_library.dart.mustache │ │ │ ├── home.dart.mustache │ │ │ ├── index.html.mustache │ │ │ ├── main.dart.mustache │ │ │ └── style.scss.mustache │ ├── builders.dart │ ├── gallery │ │ └── _mixins.scss │ └── src │ │ └── template_util.dart └── pubspec.yaml ├── angular_gallery_section ├── build.yaml ├── lib │ ├── _demo_style.scss │ ├── annotation │ │ └── gallery_section_config.dart │ ├── builder.dart │ ├── builder │ │ ├── component_api_builder.dart │ │ ├── gallery_info_builder.dart │ │ ├── gallery_section_builder.dart │ │ ├── gallery_section_summary_builder.dart │ │ └── template │ │ │ ├── component.api.dart.mustache │ │ │ └── gallery_section.dart.mustache │ ├── components │ │ ├── content │ │ │ ├── delayed_content.dart │ │ │ ├── delayed_content.html │ │ │ ├── delayed_content.scss │ │ │ └── named_content.dart │ │ └── gallery_component │ │ │ ├── _mixins.scss │ │ │ ├── gallery_component.dart │ │ │ ├── gallery_component.html │ │ │ ├── gallery_component.scss │ │ │ └── gallery_info.dart │ ├── g3doc_markdown.dart │ ├── gallery_docs_extraction.dart │ ├── gallery_section_config_extraction.dart │ ├── resolved_config.dart │ ├── src │ │ └── common_extractors.dart │ └── visitors │ │ └── path_utils.dart └── pubspec.yaml └── example ├── angular_components_example ├── build.yaml ├── lib │ └── gallery │ │ ├── home.html │ │ └── home.scss ├── pubspec.lock └── pubspec.yaml ├── app_layout_example ├── build.yaml ├── lib │ ├── app_layout_example.dart │ ├── app_layout_example.html │ ├── app_layout_example.scss │ ├── examples.dart │ ├── mobile_app_layout_example.dart │ ├── mobile_app_layout_example.html │ ├── stacking_drawer_example.dart │ ├── stacking_drawer_example.html │ └── stacking_drawer_example.scss └── pubspec.yaml ├── material_button_example ├── build.yaml ├── lib │ ├── buttons.dart │ ├── buttons.html │ ├── material_button_example.dart │ ├── material_button_example.html │ └── material_button_example.scss └── pubspec.yaml ├── material_card_example ├── build.yaml ├── lib │ ├── material_card_example.dart │ ├── material_card_example.html │ └── material_card_example.scss └── pubspec.yaml ├── material_checkbox_example ├── build.yaml ├── lib │ ├── material_checkbox_example.dart │ ├── material_checkbox_example.html │ └── material_checkbox_example.scss └── pubspec.yaml ├── material_chips_example ├── build.yaml ├── lib │ ├── material_chips_demo.dart │ ├── material_chips_demo.html │ └── material_chips_demo.scss └── pubspec.yaml ├── material_datepicker_example ├── build.yaml ├── lib │ ├── combined_demo.dart │ ├── date_input_demo.dart │ ├── date_input_demo.html │ ├── date_range_input_demo.dart │ ├── material_calendar_picker_demo.dart │ ├── material_calendar_picker_demo.html │ ├── material_calendar_picker_demo.scss │ ├── material_date_range_picker_demo.dart │ ├── material_date_range_picker_demo.html │ ├── material_date_range_picker_demo.scss │ ├── material_date_time_picker_demo.dart │ ├── material_date_time_picker_demo.html │ ├── material_datepicker_demo.dart │ ├── material_datepicker_demo.html │ ├── material_month_picker_demo.dart │ ├── material_month_picker_demo.html │ ├── material_month_picker_demo.scss │ ├── material_time_picker_demo.dart │ └── material_time_picker_demo.html └── pubspec.yaml ├── material_dialog_example ├── build.yaml ├── lib │ ├── material_dialog_example.dart │ ├── material_dialog_example.html │ └── material_dialog_example.scss └── pubspec.yaml ├── material_expansionpanel_example ├── build.yaml ├── lib │ ├── material_expansionpanel_example.dart │ ├── material_expansionpanel_example.html │ └── material_expansionpanel_example.scss └── pubspec.yaml ├── material_icon_example ├── build.yaml ├── lib │ ├── material_icon_demo.dart │ ├── material_icon_demo.html │ └── material_icon_demo.scss └── pubspec.yaml ├── material_input_example ├── build.yaml ├── lib │ ├── gallery_section_config.dart │ ├── material_auto_suggest_input_demo.dart │ ├── material_auto_suggest_input_demo.html │ ├── material_auto_suggest_input_demo.scss │ ├── material_input_demo.dart │ ├── material_input_demo.html │ ├── material_input_demo.scss │ ├── material_input_mixins.dart │ ├── material_input_mixins.html │ ├── material_input_mixins.scss │ ├── material_input_number_value_accessor_demo.dart │ ├── material_input_number_value_accessor_demo.html │ ├── material_percent_input_demo.dart │ └── material_percent_input_demo.html └── pubspec.yaml ├── material_list_example ├── build.yaml ├── lib │ ├── examples.dart │ ├── material_list_demo.dart │ ├── material_list_demo.html │ └── material_list_demo.scss └── pubspec.yaml ├── material_menu_example ├── build.yaml ├── lib │ ├── demo.dart │ ├── material_fab_menu_demo.dart │ ├── material_fab_menu_demo.html │ ├── material_menu_demo.dart │ ├── material_menu_demo.html │ └── material_menu_demo.scss └── pubspec.yaml ├── material_popup_example ├── build.yaml ├── lib │ ├── material_popup_example.dart │ ├── material_popup_example.html │ └── material_popup_example.scss └── pubspec.yaml ├── material_progress_example ├── build.yaml ├── lib │ ├── material_progress_demo.dart │ ├── material_progress_demo.html │ └── material_progress_demo.scss └── pubspec.yaml ├── material_radio_example ├── build.yaml ├── lib │ ├── material_radio_example.dart │ ├── material_radio_example.html │ └── material_radio_example.scss └── pubspec.yaml ├── material_select_example ├── build.yaml ├── lib │ ├── combined_demos.dart │ ├── material_dropdown_select_demo.dart │ ├── material_dropdown_select_demo.html │ ├── material_dropdown_select_demo.scss │ ├── material_select_demo.dart │ ├── material_select_demo.html │ └── material_select_demo.scss └── pubspec.yaml ├── material_slider_example ├── build.yaml ├── lib │ ├── material_slider_example.dart │ ├── material_slider_example.html │ └── material_slider_example.scss └── pubspec.yaml ├── material_spinner_example ├── build.yaml ├── lib │ ├── material_spinner_example.dart │ ├── material_spinner_example.html │ └── material_spinner_example.scss └── pubspec.yaml ├── material_stepper_example ├── build.yaml ├── lib │ ├── material_stepper_demo.dart │ ├── material_stepper_demo.html │ └── material_stepper_demo.scss └── pubspec.yaml ├── material_tab_example ├── build.yaml ├── lib │ ├── examples.dart │ ├── material_tab_panel_example.dart │ ├── material_tab_panel_example.html │ ├── material_tab_panel_example.scss │ ├── material_tab_strip_example.dart │ ├── material_tab_strip_example.html │ ├── material_tab_strip_mixin_example.dart │ ├── material_tab_strip_mixin_example.html │ └── material_tab_strip_mixin_example.scss └── pubspec.yaml ├── material_toggle_example ├── build.yaml ├── lib │ ├── material_toggle_example.dart │ ├── material_toggle_example.html │ └── material_toggle_example.scss └── pubspec.yaml ├── material_tooltip_example ├── build.yaml ├── lib │ ├── material_tooltip_example.dart │ ├── material_tooltip_example.html │ └── material_tooltip_example.scss └── pubspec.yaml ├── material_tree_example ├── build.yaml ├── lib │ ├── material_tree_demo.dart │ ├── material_tree_shared.dart │ └── src │ │ ├── dividers.scss │ │ ├── material_shadow.scss │ │ ├── material_tree_component_renderer.dart │ │ ├── material_tree_demo_options.dart │ │ ├── material_tree_dropdown_multi_demo.dart │ │ ├── material_tree_dropdown_single_demo.dart │ │ ├── material_tree_flat_filter_demo.dart │ │ ├── material_tree_flat_multi_demo.dart │ │ ├── material_tree_flat_readonly_demo.dart │ │ ├── material_tree_flat_selectable_demo.dart │ │ ├── material_tree_nested_component_rendering_demo.dart │ │ ├── material_tree_nested_expansion_state_demo.dart │ │ ├── material_tree_nested_filter_demo.dart │ │ ├── material_tree_nested_filter_in_popup_demo.dart │ │ ├── material_tree_nested_item_rendering_demo.dart │ │ ├── material_tree_nested_multi_demo.dart │ │ ├── material_tree_nested_single_demo.dart │ │ ├── material_tree_nested_single_divider_demo.dart │ │ ├── material_tree_nested_single_parent_selectable_demo.dart │ │ └── material_tree_view_more_demo.dart └── pubspec.yaml ├── material_yes_no_buttons_example ├── build.yaml ├── lib │ ├── material_yes_no_buttons_example.dart │ ├── material_yes_no_buttons_example.html │ └── material_yes_no_buttons_example.scss └── pubspec.yaml └── scorecard_example ├── build.yaml ├── lib ├── scorecard_demo.dart ├── scorecard_demo.html └── scorecard_demo.scss └── pubspec.yaml /.gitignore: -------------------------------------------------------------------------------- 1 | # Files and directories created by pub 2 | .dart_tool 3 | .packages 4 | .pub/ 5 | pubspec.lock 6 | 7 | # Include the lock file for the root application 8 | !example/angular_components_example/pubspec.lock 9 | 10 | build/ 11 | 12 | screenshot.png 13 | -------------------------------------------------------------------------------- /.travis.yml.disabled: -------------------------------------------------------------------------------- 1 | language: dart 2 | sudo: false 3 | dart: 4 | - dev 5 | - stable 6 | dart_task: 7 | - dartanalyzer: --fatal-warnings . 8 | - dartfmt 9 | cache: 10 | directories: 11 | - $HOME/.pub-cache 12 | matrix: 13 | allow_failures: 14 | - dart: stable 15 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | # Below is a list of people and organizations that have contributed 2 | # to the project. Names should be added to the list like so: 3 | # 4 | # Name/Organization 5 | 6 | Google Inc. 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2016, the Dart project authors. All rights reserved. 2 | Redistribution and use in source and binary forms, with or without 3 | modification, are permitted provided that the following conditions are 4 | met: 5 | 6 | * Redistributions of source code must retain the above copyright 7 | notice, this list of conditions and the following disclaimer. 8 | * Redistributions in binary form must reproduce the above 9 | copyright notice, this list of conditions and the following 10 | disclaimer in the documentation and/or other materials provided 11 | with the distribution. 12 | * Neither the name of Google Inc. nor the names of its 13 | contributors may be used to endorse or promote products derived 14 | from this software without specific prior written permission. 15 | 16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 17 | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 18 | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 19 | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 20 | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 21 | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 22 | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 23 | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 24 | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 25 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 26 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | These packages provide code generation for the AngularDart Components gallery. 2 | 3 | * **[See the gallery](https://dart-lang.github.io/angular_components_example/)** 4 | * [Use the package](https://pub.dartlang.org/packages/angular_components) 5 | * [Browse the API](https://www.dartdocs.org/documentation/angular_components/latest) 6 | 7 | This is repo now contains the initial release of two new experimental code 8 | generating packages. 9 | 10 | ## `angular_gallery` 11 | 12 | A package that generates a the gallery from each page that is generated by the 13 | `angular_gallery_section` package. 14 | 15 | ## `angular_gallery_section` 16 | 17 | A package that generates a gallery page containing documentation and examples 18 | from a `@GallerySectionConfig` annotation. 19 | 20 | ## `example` 21 | Contains individual examples for all the components as well as the base package 22 | of the entire gallery `example/angular_components_example`. 23 | 24 | ## Development 25 | 26 | As of angular: 5.0.0-alpha+5 the pub transformer has been removed in favor of 27 | code generation through package [build]. This package must be built with package 28 | [build_runner]. 29 | 30 | ### Build 31 | 32 | Build the entire gallery from the `example/angular_components_example` 33 | directory. 34 | 35 | ``` 36 | pub run build_runner build --output 37 | ``` 38 | 39 | ### Serve 40 | 41 | Run a local development server with a file watcher and incremental rebuilds: 42 | 43 | ``` 44 | pub run build_runner serve web 45 | ``` 46 | 47 | Both of the __build__ and __serve__ commands will accept `--release` to build 48 | with dart2js instead of the the default dartdevc. 49 | 50 | __Known Issues:__ 51 | 52 | When building and viewing the gallery these issues are expected at this time: 53 | 54 | * Build Warnings: 55 | 56 | `Generator does not support multiple @GallerySectionConfig annotations in a 57 | single lib directory.` 58 | 59 | * Runtime Warning: 60 | 61 | `SEVERE: OverlayService must be a singleton: Check that there is no nested 62 | overlayBindings or popupBindings` 63 | 64 | [build_runner]: https://pub.dartlang.org/packages/build_runner 65 | [build]: https://pub.dartlang.org/packages/build 66 | -------------------------------------------------------------------------------- /analysis_options.yaml: -------------------------------------------------------------------------------- 1 | analyzer: 2 | errors: 3 | # TODO(nshahan) Make these errors when there is a fix for 4 | # https://github.com/dart-lang/sdk/issues/29713 5 | unused_element: warning 6 | unused_import: warning 7 | unused_local_variable: warning 8 | dead_code: warning 9 | uri_has_not_been_generated: ignore 10 | linter: 11 | rules: 12 | #- always_declare_return_types 13 | #- always_specify_types 14 | #- annotate_overrides 15 | #- avoid_as 16 | - avoid_empty_else 17 | - avoid_init_to_null 18 | - avoid_null_checks_in_equality_operators 19 | #- avoid_return_types_on_setters 20 | - await_only_futures 21 | - camel_case_types 22 | - cancel_subscriptions 23 | #- close_sinks 24 | #- comment_references 25 | #- constant_identifier_names 26 | - control_flow_in_finally 27 | - directives_ordering 28 | - empty_catches 29 | - empty_constructor_bodies 30 | - empty_statements 31 | - hash_and_equals 32 | - implementation_imports 33 | - iterable_contains_unrelated_type 34 | - library_names 35 | - library_prefixes 36 | - list_remove_unrelated_type 37 | #- non_constant_identifier_names 38 | #- one_member_abstracts 39 | #- only_throw_errors 40 | - overridden_fields 41 | - package_api_docs 42 | - package_names 43 | - package_prefixed_library_names 44 | - prefer_final_fields 45 | - prefer_is_not_empty 46 | #- public_member_api_docs 47 | - slash_for_doc_comments 48 | #- sort_constructors_first 49 | #- sort_unnamed_constructors_first 50 | - super_goes_last 51 | - test_types_in_equals 52 | - throw_in_finally 53 | #- type_annotate_public_apis 54 | - type_init_formals 55 | #- unawaited_futures 56 | - unnecessary_brace_in_string_interps 57 | #- unnecessary_getters_setters 58 | - unrelated_type_equality_checks 59 | - valid_regexps 60 | -------------------------------------------------------------------------------- /angular_gallery/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | angular|angular: 7 | generate_for: 8 | exclude: ["lib/**"] 9 | 10 | builders: 11 | angular_gallery: 12 | target: ":angular_gallery" 13 | import: "package:angular_gallery/builders.dart" 14 | builder_factories: [galleryAppBuilder, galleryLibBuilder] 15 | build_extensions: { 16 | ".html": [".dart"], 17 | "$web$": ["index.html", "main.dart", "style.scss"]} 18 | auto_apply: dependents 19 | runs_before: ["angular|angular", "angular_components|scss_builder"] 20 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/gallery.html.mustache: -------------------------------------------------------------------------------- 1 | {{= | | =}} 2 | 3 |

4 | |galleryTitle| 5 |

6 | 10 | 11 | 12 |
13 |
Search Results
14 | 17 | 18 | 19 | 22 | No matches. 23 | 24 |
25 | 26 | 27 | 28 |
29 |
30 |
31 | 33 | 34 | 35 | 36 | {{ breadcrumb }} 37 | 38 |
39 |
40 | 41 |
42 | 43 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/gallery.scss.mustache: -------------------------------------------------------------------------------- 1 | @import 'package:angular_components/app_layout/mixins'; 2 | @import 'package:angular_components/css/material/material'; 3 | @import 'package:angular_components/css/material/mixins'; 4 | @import 'package:angular_components/css/material/shadow'; 5 | @import 'package:angular_components/material_input/mixins'; 6 | 7 | material-drawer { 8 | @include material-scrollbar-theme($mat-blue); 9 | 10 | h1 { 11 | line-height: $mat-font-leading-subhead-1; 12 | margin: $mat-grid-type * 5 $mat-grid * 2; 13 | font-size: $mat-font-size-title; 14 | font-weight: $mat-font-weight-medium; 15 | 16 | a { 17 | color: $mat-light-transparent-black; 18 | text-decoration: none; 19 | } 20 | } 21 | 22 | material-list { 23 | overflow-y: auto; 24 | overflow-x: hidden; 25 | } 26 | 27 | [group] > material-list-item { 28 | color: $mat-transparent-black; 29 | cursor: pointer; 30 | font-weight: $mat-font-weight-regular; 31 | font-size: $mat-font-size-body; 32 | height: $mat-grid * 5; 33 | 34 | &.router-link-active { 35 | background: $mat-blue-50; 36 | color: $mat-blue-700; 37 | font-weight: $mat-font-weight-bold; 38 | } 39 | 40 | &.no-matches { 41 | color: $mat-grey-500; 42 | cursor: unset; 43 | } 44 | } 45 | 46 | material-select-searchbox[label] { 47 | @include material-input-leading-text-padding(0 $mat-grid-type 0 $mat-grid * 2); 48 | } 49 | } 50 | 51 | material-content { 52 | bottom: 0; 53 | left: 0; 54 | overflow: auto; 55 | position: absolute; 56 | right: 0; 57 | top: 0; 58 | 59 | .material-header { 60 | background-color: $mat-blue; 61 | position: sticky; 62 | top: 0; 63 | z-index: 1; 64 | } 65 | } 66 | 67 | ::ng-deep { 68 | // Pretty printing styles. Used with run_prettify.js. 69 | pre.prettyprint { 70 | border: 1px solid $mat-grey-200; 71 | padding: $mat-grid; 72 | overflow-x: auto; 73 | } 74 | 75 | .pln { color: $mat-grey-800; } // plain text 76 | 77 | li.L0, 78 | li.L1, 79 | li.L2, 80 | li.L3, 81 | li.L4, 82 | li.L5, 83 | li.L6, 84 | li.L7, 85 | li.L8, 86 | li.L9 { list-style-type: decimal } 87 | } 88 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/gallery_route_library.dart.mustache: -------------------------------------------------------------------------------- 1 | import 'package:angular_router/angular_router.dart'; 2 | 3 | {{# examples }} 4 | import '{{{ dartImport }}}' deferred as {{ name }}; 5 | {{/ examples }} 6 | 7 | import 'home.template.dart' as home; 8 | 9 | /// Route definitions and loaders for each "@GallerySectionConfig" component. 10 | final List galleryRoutes = [ 11 | RouteDefinition( 12 | path: '/', 13 | component: home.HomeViewComponentNgFactory, 14 | useAsDefault: true, 15 | ), 16 | {{# examples }} 17 | RouteDefinition.defer( 18 | path: '{{ name }}', 19 | loader: () async { 20 | await {{ name }}.loadLibrary(); 21 | {{ name }}.initReflector(); 22 | return {{ name }}.{{ component }}NgFactory; 23 | } 24 | ), 25 | {{/ examples }} 26 | ]; 27 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/home.dart.mustache: -------------------------------------------------------------------------------- 1 | import 'package:angular/angular.dart'; 2 | 3 | @Component( 4 | selector: 'home-view', 5 | styleUrls: ['home.scss.css'], 6 | templateUrl: '{{{ htmlTemplateUrl }}}') 7 | class HomeViewComponent {} 8 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/index.html.mustache: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{galleryTitle}} 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/main.dart.mustache: -------------------------------------------------------------------------------- 1 | import 'dart:html'; 2 | 3 | import 'package:angular/angular.dart'; 4 | import 'package:angular_router/angular_router.dart'; 5 | import 'package:logging/logging.dart'; 6 | import 'package:angular_components/laminate/popup/module.dart'; 7 | import 'package:angular_components/laminate/overlay/module.dart'; 8 | import 'package:angular_components/material_datepicker/module.dart'; 9 | import '{{{ galleryImportUri }}}' as app; 10 | 11 | import 'main.template.dart' as ng; 12 | 13 | Logger _logger = Logger("ads.acx2.demo"); 14 | 15 | void main() { 16 | Logger.root.onRecord.listen((x) => print("${x.level}: ${x.message}")); 17 | 18 | // Start angular. 19 | runApp(app.GalleryComponentNgFactory, createInjector: galleryInjector); 20 | } 21 | 22 | @Injectable() 23 | HtmlElement materialContentElement(Document document) { 24 | return document.querySelector('material-content'); 25 | } 26 | 27 | @GenerateInjector([ 28 | routerProvidersHash, 29 | popupBindings, 30 | datepickerBindings, 31 | Provider(overlayContainerParent, useFactory: materialContentElement), 32 | ]) 33 | 34 | final InjectorFactory galleryInjector = ng.galleryInjector$Injector; 35 | -------------------------------------------------------------------------------- /angular_gallery/lib/builder/template/style.scss.mustache: -------------------------------------------------------------------------------- 1 | @import 'package:angular_components/css/material/material'; 2 | 3 | html, body { 4 | height: 100%; 5 | margin: 0; 6 | padding: 0; 7 | width: 100%; 8 | } 9 | 10 | body { 11 | color: $mat-grey-900; 12 | font-family: $mat-font-family; 13 | font-size: $mat-font-size-body; 14 | font-style: normal; 15 | font-variant: normal; 16 | font-weight: normal; 17 | 18 | @include clearfix(); 19 | } 20 | -------------------------------------------------------------------------------- /angular_gallery/lib/builders.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:build/build.dart'; 6 | import 'package:angular_gallery/builder/gallery_app_builder.dart'; 7 | import 'package:angular_gallery/builder/gallery_lib_builder.dart'; 8 | 9 | /// Builders used to generate files in the gallery app target. 10 | Builder galleryAppBuilder(BuilderOptions options) => MultiplexingBuilder([ 11 | GalleryWebBuilder(options.config['galleryTitle'] ?? 'Example Gallery'), 12 | HomeDartBuilder(), 13 | ]); 14 | 15 | /// Builder used to generate files in the gallery library target. 16 | Builder galleryLibBuilder(BuilderOptions options) => GalleryLibBuilder( 17 | options.config['galleryTitle'] ?? 'Example Gallery', 18 | options.config['styleUrls'].cast(), 19 | (options.config['examples'] as String).split(','), 20 | ); 21 | -------------------------------------------------------------------------------- /angular_gallery/lib/gallery/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/mixins'; 6 | @import 'package:angular_components/material_input/mixins'; 7 | @import 'third_party/dart_src/acx/scaffolding/gallery_section/components/gallery_component/lib/mixins'; 8 | 9 | /// A mixin to customize the color scheme of acx gallery. 10 | @mixin gallery-theme($map) { 11 | $primary-color: map-get($map, 500); 12 | 13 | material-drawer { 14 | @include material-scrollbar-theme($primary-color); 15 | 16 | material-select-searchbox { 17 | @include material-input-theme($primary-color) 18 | } 19 | 20 | material-list [group] material-list-item.router-link-active { 21 | background: map-get($map, 50); 22 | color: map-get($map, 700); 23 | } 24 | } 25 | 26 | material-content .material-header { 27 | background-color: $primary-color; 28 | 29 | // TODO(google) Allow setting with the gallery-theme mixin, b/69327761. 30 | material-icon { 31 | color: $mat-white; 32 | } 33 | } 34 | 35 | ::ng-deep material-content .container { 36 | a { 37 | color: $primary-color; 38 | } 39 | 40 | @include gallery-component-theme($primary-color); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /angular_gallery/lib/src/template_util.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'dart:async'; 6 | 7 | import 'package:build/build.dart'; 8 | import 'package:mustache/mustache.dart'; 9 | 10 | /// Writes a [newAssetId] via the provided [buildStep]. 11 | /// 12 | /// The contents of the asset is the result of rendering a mustache template 13 | /// with [mustacheContext]. The provided [templatePath] is assumed to be rooted 14 | /// in package:ads.acx2.demo. 15 | Future writeAsset(BuildStep buildStep, String templatePath, 16 | Map mustacheContext, AssetId newAssetId) async { 17 | final templateId = AssetId('angular_gallery', templatePath); 18 | final mustacheTemplate = Template(await buildStep.readAsString(templateId)); 19 | buildStep.writeAsString( 20 | newAssetId, mustacheTemplate.renderString(mustacheContext)); 21 | } 22 | -------------------------------------------------------------------------------- /angular_gallery/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: angular_gallery 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_forms: ^2.0.0 9 | angular_router: 2.0.0-alpha+19 10 | build: '>=0.11.1 <0.13.0' 11 | build_config: '>=0.2.6 <0.4.0' 12 | mustache: ^1.0.0 13 | -------------------------------------------------------------------------------- /angular_gallery_section/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular|angular: 5 | generate_for: 6 | exclude: [ 7 | "lib/*.dart", 8 | "lib/annotation/**", 9 | "lib/builder/**", 10 | "lib/src/**", 11 | "lib/visitors/**", 12 | ] 13 | angular_components|scss_builder: 14 | enabled: True 15 | 16 | builders: 17 | angular_gallery_section: 18 | target: ':angular_gallery_section' 19 | import: 'package:angular_gallery_section/builder.dart' 20 | builder_factories: [ 21 | 'galleryInfoBuilder', 22 | 'componentApiBuilder', 23 | 'gallerySectionBuilder' 24 | ] 25 | build_extensions: { 26 | ".dart": [".gallery_info.json", ".api.dart"], 27 | "$lib$": ["gallery_section.dart", "gallery_section_summary.json"]} 28 | auto_apply: dependents 29 | runs_before: ["angular|angular", "angular_components|scss_builder"] 30 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/_demo_style.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/css/material/shadow'; 7 | 8 | @mixin card() { 9 | @include shadow-elevation(); 10 | } 11 | 12 | @mixin demo-style() { 13 | .demo-section { 14 | display: flex; 15 | flex-direction: row; 16 | padding: $mat-grid; 17 | } 18 | 19 | .demo-container, 20 | .knob-container { 21 | margin: $mat-grid; 22 | padding: $mat-grid; 23 | max-width: $mat-grid * 75; 24 | 25 | display: flex; 26 | flex: 1; 27 | @include shadow-elevation(); 28 | 29 | .caption { 30 | @include mat-type-caption(); 31 | } 32 | } 33 | 34 | [row] { 35 | flex-direction: row; 36 | } 37 | 38 | [column] { 39 | flex-direction: column; 40 | } 41 | 42 | [flex] { 43 | display: flex; 44 | flex: 1; 45 | } 46 | 47 | [inline-flex] { 48 | display: inline-flex; 49 | flex: 1; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/annotation/gallery_section_config.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | /// An annotation for configuring a section in an Angular component gallery. 6 | /// 7 | /// A section is typically equivalent to a package that contains one or a few 8 | /// related components. 9 | class GallerySectionConfig { 10 | /// The name of the component which is being demonstrated, to be listed in a 11 | /// gallery's navigation menu. 12 | final String displayName; 13 | 14 | /// A list of resources to pull documentation from this can be dart documents 15 | /// from classes or functions, or an asset id of markdown files. 16 | /// 17 | /// Specify docs in the order that they should be displayed. Asset id must be 18 | /// a String of the form 'package|path/to/asset.md'. 19 | final List docs; 20 | 21 | /// A list of example component classes to include in the section. 22 | /// 23 | /// Specify demos in the order that they should be displayed. 24 | final List demos; 25 | 26 | /// The embed URLs for benchmark charts to display in this section. 27 | /// 28 | /// The charts are displayed in the order they are specified here. 29 | /// 30 | /// TODO(google) Cleanup temporary compatability while migrating. 31 | /// Benchmarks can also be listed by name. 32 | final List benchmarks; 33 | 34 | /// A string prefix for acx benchmarks, defaults to 'acx_benchmarks_guitar'. 35 | final String benchmarkPrefix; 36 | 37 | /// A list of owners for the components in this section. 38 | final List owners; 39 | 40 | /// A list of UX owners for the components in this section. 41 | final List uxOwners; 42 | 43 | /// Titles and urls of related documents. 44 | final Map relatedUrls; 45 | 46 | /// True if automatically generated documentation for inputs and outputs 47 | /// should be displayed. 48 | final bool showGeneratedDocs; 49 | 50 | const GallerySectionConfig( 51 | {this.displayName, 52 | this.docs, 53 | this.demos, 54 | this.benchmarks, 55 | this.benchmarkPrefix, 56 | this.owners, 57 | this.uxOwners, 58 | this.relatedUrls, 59 | this.showGeneratedDocs}); 60 | } 61 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/builder.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:build/build.dart'; 6 | import 'package:angular_gallery_section/builder/component_api_builder.dart'; 7 | import 'package:angular_gallery_section/builder/gallery_info_builder.dart'; 8 | import 'package:angular_gallery_section/builder/gallery_section_builder.dart'; 9 | import 'package:angular_gallery_section/builder/gallery_section_summary_builder.dart'; 10 | 11 | /// Builder used to generate the json summary files about classes annotated with 12 | /// @GallerySectionConfig to be read by the other builders that might not 13 | /// have access to a resolver. 14 | Builder galleryInfoBuilder(BuilderOptions options) => 15 | GalleryInfoBuilder(options.config['staticImageServer']); 16 | 17 | /// Builder used to generate the API page for the gallery from a 18 | /// @GallerySectionConfig-annotated class. 19 | Builder componentApiBuilder(BuilderOptions options) => ComponentApiBuilder(); 20 | 21 | /// Builder used to generate the page for a stand alone example app and a 22 | /// summary used in building the gallery from a @GallerySectionConfig-annotated 23 | /// class. 24 | Builder gallerySectionBuilder(BuilderOptions options) => MultiplexingBuilder([ 25 | GallerySectionBuilder(), 26 | GallerySectionSummaryBuilder(), 27 | ]); 28 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/builder/gallery_section_summary_builder.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'dart:async'; 6 | import 'dart:convert'; 7 | 8 | import 'package:build/build.dart'; 9 | import 'package:glob/glob.dart'; 10 | import 'package:angular_gallery_section/resolved_config.dart'; 11 | 12 | /// A builder for generating a summary of the API page for an Angular component. 13 | /// 14 | /// The "summary" is generated with the known filename 15 | /// (gallery_section_summary.json) so it can be read across packages while 16 | /// generating the gallery library. It is a json dictionary naming the important 17 | /// features of the gallery section API page. 18 | class GallerySectionSummaryBuilder extends Builder { 19 | @override 20 | Future build(BuildStep buildStep) async { 21 | final inputId = buildStep.inputId; 22 | final summaries = List>(); 23 | 24 | // Extract details from @GallerySectionConfig annotations. 25 | await for (var assetId 26 | in buildStep.findAssets(Glob('**/*.gallery_info.json'))) { 27 | final infoList = 28 | (jsonDecode(await buildStep.readAsString(assetId)) as List) 29 | .map((info) => ResolvedConfig.fromJson(info)); 30 | 31 | if (infoList.isEmpty) continue; 32 | 33 | summaries.addAll(infoList.map((info) => { 34 | 'displayName': info.displayName, 35 | 'dartImport': _toApiTemplatePath(assetId.uri.toString()), 36 | 'componentClass': '${info.classSafeName}Api', 37 | 'docs': info.docs.map((doc) => doc.name).toList(), 38 | })); 39 | } 40 | 41 | final newAssetId = 42 | AssetId(inputId.package, 'lib/gallery_section_summary.json'); 43 | buildStep.writeAsString(newAssetId, jsonEncode(summaries)); 44 | } 45 | 46 | @override 47 | Map> get buildExtensions => { 48 | r'$lib$': const ['gallery_section_summary.json'], 49 | }; 50 | 51 | String _toApiTemplatePath(String path) => 52 | '${path.substring(0, path.lastIndexOf('.gallery_info.json'))}' 53 | '.api.template.dart'; 54 | } 55 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/builder/template/component.api.dart.mustache: -------------------------------------------------------------------------------- 1 | import 'package:angular/angular.dart'; 2 | import 'package:angular_gallery_section/components/gallery_component/gallery_component.dart'; 3 | import 'package:angular_gallery_section/components/gallery_component/gallery_info.dart'; 4 | 5 | // Import each demonstration script. 6 | {{#demoImports}} 7 | import '{{{dartImport}}}'; 8 | {{/demoImports}} 9 | 10 | {{#apiComponents}} 11 | @Component( 12 | selector: '{{selector}}-api', 13 | template: '', 14 | directives: const [GalleryComponent]) 15 | class {{component}}Api { 16 | 17 | GalleryInfo model = new GalleryInfo( 18 | docs: [ 19 | {{#docs}} 20 | new Doc('{{name}}', '{{selector}}', '{{exportAs}}', '{{path}}', r"""{{comment}}""", [ 21 | {{#inputs}} 22 | new Property( 23 | '{{annotation}}', 24 | '{{name}}', 25 | '{{bindingAlias}}', 26 | '{{type}}', 27 | r"""{{comment}}""", 28 | '{{classPath}}', 29 | {{deprecated}}, 30 | '{{deprecatedMessage}}' 31 | ), 32 | {{/inputs}} 33 | ], [ 34 | {{#outputs}} 35 | new Property( 36 | '{{annotation}}', 37 | '{{name}}', 38 | '{{bindingAlias}}', 39 | '{{type}}', 40 | r"""{{comment}}""", 41 | '{{classPath}}', 42 | {{deprecated}}, 43 | '{{deprecatedMessage}}' 44 | ), 45 | {{/outputs}} 46 | ]), 47 | {{/docs}} 48 | ], 49 | demos: [ 50 | {{#demos}} 51 | new Demo({{className}}NgFactory, '{{className}}', '{{examplePath}}'), 52 | {{/demos}} 53 | ], 54 | benchmarks: [ 55 | {{#benchmarks}} 56 | '{{.}}', 57 | {{/benchmarks}} 58 | ], 59 | owners: [ 60 | {{#owners}} 61 | '{{.}}', 62 | {{/owners}} 63 | ], 64 | uxOwners: [ 65 | {{#uxOwners}} 66 | '{{.}}', 67 | {{/uxOwners}} 68 | ], 69 | relatedUrls: { 70 | {{#relatedUrls}} 71 | '{{key}}': '{{value}}', 72 | {{/relatedUrls}} 73 | }, 74 | showGeneratedDocs: {{showGeneratedDocs}}); 75 | } 76 | {{/apiComponents}} 77 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/builder/template/gallery_section.dart.mustache: -------------------------------------------------------------------------------- 1 | import 'package:angular/angular.dart'; 2 | import 'package:angular_components/laminate/popup/module.dart'; 3 | 4 | // Import each demo. 5 | {{#imports}} 6 | import '{{{dartImport}}}'; 7 | {{/imports}} 8 | 9 | // Import each API page. 10 | {{#apis}} 11 | import '{{{apiImport}}}'; 12 | {{/apis}} 13 | 14 | final _showDocs = Uri.base.queryParameters['showDocs']; 15 | 16 | @Component( 17 | selector: 'gallery-section', 18 | providers: const [popupBindings], 19 | template: r''' 20 |
21 |
Show Gallery Page
22 | {{#demos}} 23 | <{{selector}}> 24 | {{/demos}} 25 |
26 |
27 |
Show Demo Only
29 | {{#apis}} 30 | {{#docs}} 31 | <{{selector}}> 32 | {{/docs}} 33 | {{/apis}} 34 |
''', 35 | directives: const [ 36 | NgIf, 37 | {{#demos}} 38 | {{className}}, 39 | {{/demos}} 40 | {{#apis}} 41 | {{#docs}} 42 | {{className}}, 43 | {{/docs}} 44 | {{/apis}} 45 | ], 46 | styles: const ['.docs-toggle {color: #4285f4; cursor: pointer;}'], 47 | ) 48 | class GallerySection { 49 | bool get paramShowDocs => _showDocs != null; 50 | bool _showDocsPage = _showDocs != null; 51 | bool get showDocsPage => _showDocsPage; 52 | void toggleDocsPage() => _showDocsPage = !showDocsPage; 53 | } 54 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/components/content/delayed_content.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'dart:async'; 6 | 7 | import 'package:angular/angular.dart'; 8 | import 'package:angular_components/material_progress/material_progress.dart'; 9 | 10 | /// `delayed-content` is a simple pass-thru content container which, when 11 | /// initialized, delays the revealing of its content. 12 | /// 13 | /// During the delay, the component displays a progress bar.The component does 14 | /// this only once on init, so it illustrates the fact that it is created 15 | /// just-in-time by using [DeferredContentDirective]. 16 | /// 17 | /// Only use this component in demos. 18 | /// 19 | /// __Inputs:__ 20 | /// 21 | /// - `delay: num` -- Delay in seconds to wait before showing content. 22 | @Component( 23 | selector: 'delayed-content', 24 | templateUrl: 'delayed_content.html', 25 | styleUrls: ['delayed_content.scss.css'], 26 | directives: [MaterialProgressComponent, NgIf], 27 | // TODO(google): Change preserveWhitespace to false to improve codesize. 28 | preserveWhitespace: true, 29 | ) 30 | class DelayedContentComponent implements OnInit { 31 | bool resolved = true; 32 | 33 | @Input() 34 | int delay; 35 | 36 | @override 37 | void ngOnInit() { 38 | if (delay != null) { 39 | resolved = false; 40 | Timer(Duration(seconds: delay), _resolve); 41 | } else { 42 | resolved = true; 43 | } 44 | } 45 | 46 | void _resolve() { 47 | resolved = true; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/components/content/delayed_content.html: -------------------------------------------------------------------------------- 1 | 6 | 8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/components/content/delayed_content.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | :host { 6 | flex-basis: 100%; 7 | } 8 | 9 | material-progress { 10 | display: block; 11 | } 12 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/components/content/named_content.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | 7 | /// Simple pass-thru content container which announces its construction and 8 | /// displays a label (in a

tag) above the content. 9 | /// Only use this component in demos. 10 | /// 11 | /// __Attributes__ 12 | /// `name: string` -- Name of component. 13 | @Component( 14 | selector: 'named-content', 15 | template: r''' 16 |

{{label}}

17 | ''', 18 | // TODO(google): Change preserveWhitespace to false to improve codesize. 19 | preserveWhitespace: true, 20 | ) 21 | class NamedContentComponent { 22 | String get label => '$_componentName Content'; 23 | final String _componentName; 24 | NamedContentComponent(@Attribute('name') this._componentName) { 25 | print('Named Component "$_componentName" instantiated'); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/components/gallery_component/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | /// A mixin to customize the color scheme of the gallery component. 6 | @mixin gallery-component-theme($primary-color) { 7 | ::ng-deep .toc { 8 | border-left-color: $primary-color; 9 | } 10 | 11 | ::ng-deep h2, 12 | .doc ::ng-deep strong, 13 | ::ng-deep .property-type { 14 | color: $primary-color; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /angular_gallery_section/lib/src/common_extractors.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:analyzer/analyzer.dart'; 6 | import 'package:build/build.dart'; 7 | 8 | /// [AstVisitor] to extract a [SimpleStringLiteral]s, [AdjacentStrings] or 9 | /// [SimpleIdentifier]s. 10 | class StringExtractor extends SimpleAstVisitor { 11 | @override 12 | visitSimpleStringLiteral(SimpleStringLiteral node) => node.value; 13 | 14 | @override 15 | visitAdjacentStrings(AdjacentStrings node) => 16 | node.strings.map((literal) => literal.accept(this)).join(''); 17 | 18 | @override 19 | visitStringInterpolation(StringInterpolation node) { 20 | log.severe('The example gallery generator does support String ' 21 | 'interpolation in annotations.'); 22 | return null; 23 | } 24 | 25 | @override 26 | visitSimpleIdentifier(SimpleIdentifier node) => node.name; 27 | } 28 | 29 | /// [AstVisitor] to extract a [BooleanLiteral]. 30 | class BoolExtractor extends SimpleAstVisitor { 31 | @override 32 | visitBooleanLiteral(BooleanLiteral node) => node.value; 33 | } 34 | 35 | /// [AstVisitor] to extract a [ListLiteral]. 36 | class ListStringExtractor extends SimpleAstVisitor> { 37 | @override 38 | visitListLiteral(ListLiteral node) => 39 | node.elements.map((element) => element.accept(StringExtractor())); 40 | } 41 | 42 | /// [AstVisitor] to extract a [MapLiteral] and [MapLiteralEntry]. 43 | class MapStringExtractor extends SimpleAstVisitor> { 44 | @override 45 | visitMapLiteral(MapLiteral node) => 46 | Map.fromEntries(node.entries.map((entry) => MapEntry( 47 | entry.key.accept(StringExtractor()), 48 | entry.value.accept(StringExtractor())))); 49 | } 50 | -------------------------------------------------------------------------------- /angular_gallery_section/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: angular_gallery_section 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | analyzer: ^0.32.4 7 | angular: ^5.0.0 8 | angular_components: 0.9.1 9 | build: '>=0.11.1 <0.13.0' 10 | build_config: '>=0.2.6 <0.4.0' 11 | glob: ^1.1.5 12 | markdown: ^2.0.0 13 | mustache: ^1.0.0 14 | path: ^1.6.1 15 | -------------------------------------------------------------------------------- /example/angular_components_example/build.yaml: -------------------------------------------------------------------------------- 1 | global_options: 2 | build_web_compilers|dart_source_cleanup: 3 | release_options: 4 | enabled: false 5 | targets: 6 | $default: 7 | builders: 8 | angular|angular: 9 | enabled: true 10 | angular_gallery|angular_gallery: 11 | options: 12 | styleUrls: ["gallery.scss.css"] 13 | galleryTitle: "AngularDart Gallery" 14 | examples: "app_layout_example,material_button_example,material_card_example,material_checkbox_example,material_chips_example,material_datepicker_example,material_dialog_example,material_expansionpanel_example,material_icon_example,material_input_example,material_list_example,material_menu_example,material_popup_example,material_progress_example,material_radio_example,material_select_example,material_slider_example,material_spinner_example,material_stepper_example,material_tab_example,material_toggle_example,material_tooltip_example,material_tree_example,material_yes_no_buttons_example,scorecard_example" 15 | angular_components|scss_builder: 16 | enabled: true 17 | angular_gallery_section: 18 | enabled: false 19 | build_web_compilers|dart2js_archive_extractor: 20 | release_options: 21 | filter_outputs: false 22 | build_web_compilers|entrypoint: 23 | generate_for: 24 | - web/main.dart 25 | options: 26 | dart2js_args: 27 | - --fast-startup 28 | - --minify 29 | - --trust-primitives 30 | - --omit-implicit-checks 31 | - --dump-info 32 | -------------------------------------------------------------------------------- /example/angular_components_example/lib/gallery/home.html: -------------------------------------------------------------------------------- 1 | 6 |

Material design components for AngularDart

7 |

8 | Powering some of Google's most sophisticated and mission-critical 9 | applications. 10 |

11 |

12 | This productive and stable set of widgets, contributed to by hundreds of 13 | Googlers, make debugging and deploying your app easier. Strict latency and 14 | testing policies make these widgets an excellent fit for projects using the 15 | Angular package. 16 |

17 |

Get Started

18 | 32 |

Resources

33 | 58 |

Start here if you are new to AngularDart

59 | 73 | -------------------------------------------------------------------------------- /example/angular_components_example/lib/gallery/home.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/css/material/shadow'; 7 | 8 | :host { 9 | display: block; 10 | padding: $mat-grid * 4; 11 | max-width: $mat-grid * 90; 12 | 13 | h1 { 14 | @include mat-font-display-1(); 15 | color: $mat-blue; 16 | } 17 | 18 | h2 { 19 | @include mat-font-headline(); 20 | } 21 | 22 | h3 { 23 | @include mat-font-subhead(); 24 | } 25 | 26 | .links { 27 | list-style-type: none; 28 | 29 | li > a { 30 | @include mat-link(); 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/angular_components_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: angular_components_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | 6 | dependencies: 7 | angular: ^5.0.0 8 | angular_components: 0.9.1 9 | angular_gallery: 10 | path: ../../angular_gallery 11 | app_layout_example: 12 | path: ../app_layout_example 13 | build_config: '>=0.2.6 <0.4.0' 14 | material_button_example: 15 | path: ../material_button_example 16 | material_card_example: 17 | path: ../material_card_example 18 | material_checkbox_example: 19 | path: ../material_checkbox_example 20 | material_chips_example: 21 | path: ../material_chips_example 22 | material_datepicker_example: 23 | path: ../material_datepicker_example 24 | material_dialog_example: 25 | path: ../material_dialog_example 26 | material_expansionpanel_example: 27 | path: ../material_expansionpanel_example 28 | material_icon_example: 29 | path: ../material_icon_example 30 | material_input_example: 31 | path: ../material_input_example 32 | material_list_example: 33 | path: ../material_list_example 34 | material_menu_example: 35 | path: ../material_menu_example 36 | material_popup_example: 37 | path: ../material_popup_example 38 | material_progress_example: 39 | path: ../material_progress_example 40 | material_radio_example: 41 | path: ../material_radio_example 42 | material_select_example: 43 | path: ../material_select_example 44 | material_slider_example: 45 | path: ../material_slider_example 46 | material_spinner_example: 47 | path: ../material_spinner_example 48 | material_stepper_example: 49 | path: ../material_stepper_example 50 | material_tab_example: 51 | path: ../material_tab_example 52 | material_toggle_example: 53 | path: ../material_toggle_example 54 | material_tooltip_example: 55 | path: ../material_tooltip_example 56 | material_tree_example: 57 | path: ../material_tree_example 58 | material_yes_no_buttons_example: 59 | path: ../material_yes_no_buttons_example 60 | scorecard_example: 61 | path: ../scorecard_example 62 | 63 | dev_dependencies: 64 | build_runner: ^0.10.0 65 | build_web_compilers: ^0.4.0 66 | -------------------------------------------------------------------------------- /example/app_layout_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | angular_gallery_section|angular_gallery_section: 7 | options: 8 | staticImageServer: "https://raw.githubusercontent.com" 9 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/app_layout_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/app_layout/material_persistent_drawer.dart'; 7 | import 'package:angular_components/content/deferred_content.dart'; 8 | import 'package:angular_components/material_button/material_button.dart'; 9 | import 'package:angular_components/material_icon/material_icon.dart'; 10 | import 'package:angular_components/material_list/material_list.dart'; 11 | import 'package:angular_components/material_list/material_list_item.dart'; 12 | import 'package:angular_components/material_toggle/material_toggle.dart'; 13 | 14 | @Component( 15 | selector: 'mat-drawer-demo', 16 | directives: [ 17 | DeferredContentDirective, 18 | MaterialButtonComponent, 19 | MaterialIconComponent, 20 | MaterialPersistentDrawerDirective, 21 | MaterialToggleComponent, 22 | MaterialListComponent, 23 | MaterialListItemComponent, 24 | ], 25 | templateUrl: 'app_layout_example.html', 26 | styleUrls: [ 27 | 'app_layout_example.scss.css', 28 | 'package:angular_components/app_layout/layout.scss.css', 29 | ], 30 | ) 31 | class MaterialDrawerExample { 32 | bool customWidth = false; 33 | bool end = false; 34 | } 35 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/app_layout_example.html: -------------------------------------------------------------------------------- 1 | 6 | 9 | 10 |
11 |
12 | 13 | Inbox 14 | 15 | 16 | Star 17 | 18 | 19 | Sent Mail 20 | 21 | 22 | Drafts 23 | 24 |
25 |
26 |
Tags
27 | 28 | Favorites 29 | 30 |
31 | 32 | 33 |
34 |
35 |
36 | 38 | 39 | 40 | Simple Layout 41 |
42 | 45 | 48 | 51 |
52 |
53 |
54 | Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 55 | et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 56 | veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 57 | legere iriure blandit. Veri iisque accusamus an pri. 58 |
59 |
60 |

Options

61 | 62 | 63 | 64 | 65 |
66 |
67 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/app_layout_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/app_layout/mixins'; 6 | 7 | :host { 8 | border: 1px solid; 9 | display: block; 10 | height: 400px; 11 | margin: 16px; 12 | overflow: hidden; 13 | position: relative; 14 | width: 800px; 15 | } 16 | 17 | .controls { 18 | align-items: flex-start; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .custom-width { 24 | @include mat-drawer-width(50%); 25 | @include mat-temporary-drawer-width(50%); 26 | } 27 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/examples.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular_components/app_layout/material_persistent_drawer.dart'; 6 | import 'package:angular_components/app_layout/material_temporary_drawer.dart'; 7 | import 'package:angular_components/app_layout/material_stackable_drawer.dart'; 8 | import 'stacking_drawer_example.dart'; 9 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 10 | 11 | import 'app_layout_example.dart'; 12 | import 'mobile_app_layout_example.dart'; 13 | 14 | @GallerySectionConfig( 15 | displayName: 'App Layout', 16 | docs: [ 17 | 'package:angular_components/app_layout/README.md', 18 | MaterialPersistentDrawerDirective, 19 | MaterialTemporaryDrawerComponent, 20 | MaterialStackableDrawerComponent, 21 | ], 22 | demos: [ 23 | MaterialDrawerExample, 24 | MaterialDrawerMobileExample, 25 | MaterialStackingDrawerExample, 26 | ], 27 | relatedUrls: { 28 | 'Material Spec (Drawer)': 29 | 'https://material.io/design/components/navigation-drawer.html', 30 | 'Material Spec (App Bar)': 31 | 'https://material.io/design/components/app-bars-top.html', 32 | }, 33 | showGeneratedDocs: true, 34 | ) 35 | class MaterialDrawerExamples {} 36 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/mobile_app_layout_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/app_layout/material_persistent_drawer.dart'; 7 | import 'package:angular_components/app_layout/material_temporary_drawer.dart'; 8 | import 'package:angular_components/content/deferred_content.dart'; 9 | import 'package:angular_components/material_button/material_button.dart'; 10 | import 'package:angular_components/material_icon/material_icon.dart'; 11 | import 'package:angular_components/material_toggle/material_toggle.dart'; 12 | 13 | @Component( 14 | selector: 'mat-drawer-mobile-demo', 15 | directives: [ 16 | DeferredContentDirective, 17 | MaterialButtonComponent, 18 | MaterialIconComponent, 19 | MaterialPersistentDrawerDirective, 20 | MaterialTemporaryDrawerComponent, 21 | MaterialToggleComponent, 22 | ], 23 | templateUrl: 'mobile_app_layout_example.html', 24 | styleUrls: [ 25 | 'app_layout_example.scss.css', 26 | 'package:angular_components/app_layout/layout.scss.css', 27 | ], 28 | ) 29 | class MaterialDrawerMobileExample { 30 | bool customWidth = false; 31 | bool end = false; 32 | bool overlay = false; 33 | } 34 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/mobile_app_layout_example.html: -------------------------------------------------------------------------------- 1 | 6 | 10 |
11 | Here is some drawer content. 12 |
13 | 14 |
15 |
16 |
17 | 18 | 19 | 20 | Mobile Layout 21 |
22 | 25 | 28 | 31 |
32 |
33 |
34 | Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 35 | et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 36 | veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 37 | legere iriure blandit. Veri iisque accusamus an pri. 38 |
39 |
40 |

Options

41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |
51 |
52 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/stacking_drawer_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/app_layout/material_stackable_drawer.dart'; 7 | import 'package:angular_components/content/deferred_content.dart'; 8 | import 'package:angular_components/material_button/material_button.dart'; 9 | import 'package:angular_components/material_icon/material_icon.dart'; 10 | import 'package:angular_components/material_toggle/material_toggle.dart'; 11 | 12 | @Component( 13 | selector: 'mat-stacking-drawer-demo', 14 | directives: [ 15 | DeferredContentDirective, 16 | MaterialButtonComponent, 17 | MaterialIconComponent, 18 | MaterialStackableDrawerComponent, 19 | MaterialToggleComponent, 20 | ], 21 | templateUrl: 'stacking_drawer_example.html', 22 | styleUrls: [ 23 | 'app_layout_example.scss.css', 24 | 'package:angular_components/app_layout/layout.scss.css', 25 | 'stacking_drawer_example.scss.css', 26 | ], 27 | ) 28 | class MaterialStackingDrawerExample { 29 | bool end = false; 30 | bool overlay = false; 31 | 32 | bool drawerVisible = false; 33 | bool drawer2Visible = false; 34 | } 35 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/stacking_drawer_example.html: -------------------------------------------------------------------------------- 1 | 6 | 9 |
10 | Here is some drawer content. 11 | 12 | Click for more. 13 | 14 | 17 |
18 | Here is some more drawer content. 19 |
20 | 21 |
22 | 23 |
24 |
25 |
26 | 27 | 28 | 29 | Stacking Drawers 30 |
31 | 34 | 37 | 40 |
41 |
42 |
43 | Lorem ipsum dolor sit amet, ad erat postea ullamcorper nec, veri veniam quo 44 | et. Diam phaedrum ei mea, quaeque voluptaria efficiantur duo no. Eu adhuc 45 | veritus civibus nec, sumo invidunt mel id, in vim dictas detraxit. Per an 46 | legere iriure blandit. Veri iisque accusamus an pri. 47 |
48 |
49 |

Options

50 | 51 | 52 | 53 | 54 | 55 | 56 |
57 |
58 | -------------------------------------------------------------------------------- /example/app_layout_example/lib/stacking_drawer_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/app_layout/mixins'; 6 | 7 | .drawer1 { 8 | @include mat-temporary-drawer-width(50%); 9 | } 10 | -------------------------------------------------------------------------------- /example/app_layout_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: app_layout_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_button_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_button_example/lib/buttons.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_button/material_button.dart'; 7 | import 'package:angular_components/material_icon/material_icon.dart'; 8 | 9 | @Component( 10 | selector: 'buttons', 11 | templateUrl: 'buttons.html', 12 | directives: [MaterialButtonComponent, MaterialIconComponent], 13 | ) 14 | class ButtonsExampleComponent {} 15 | -------------------------------------------------------------------------------- /example/material_button_example/lib/buttons.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |

Flat

8 | Default 9 | Colored 10 | Disabled 11 | Compact 12 |
13 | 14 |
15 |

Raised

16 | Raised 17 | Colored 18 | Disabled 19 | Dense 20 | Compact 21 |
22 | 23 |
24 |

Icons

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | Mail 35 | 36 | 37 |
38 | -------------------------------------------------------------------------------- /example/material_button_example/lib/material_button_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_button/material_button.dart'; 7 | import 'package:angular_components/material_button/material_fab.dart'; 8 | import 'buttons.dart'; 9 | import 'package:angular_components/material_icon/material_icon.dart'; 10 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 11 | import 'package:angular_components/theme/dark_theme.dart'; 12 | 13 | @GallerySectionConfig( 14 | displayName: 'Material Button', 15 | docs: [ 16 | MaterialButtonComponent, 17 | MaterialFabComponent, 18 | ], 19 | demos: [MaterialButtonExample], 20 | benchmarks: [ 21 | 'material_button_100_init', 22 | ], 23 | showGeneratedDocs: true, 24 | ) 25 | class MaterialButtonGalleryConfig {} 26 | 27 | @Component( 28 | selector: 'material-button-example', 29 | directives: [ 30 | ButtonsExampleComponent, 31 | DarkThemeDirective, 32 | MaterialButtonComponent, 33 | MaterialFabComponent, 34 | MaterialIconComponent, 35 | ], 36 | templateUrl: 'material_button_example.html', 37 | styleUrls: ['material_button_example.scss.css'], 38 | preserveWhitespace: true, 39 | ) 40 | class MaterialButtonExample { 41 | String content = 'click me'; 42 | } 43 | -------------------------------------------------------------------------------- /example/material_button_example/lib/material_button_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_button/mixins'; 7 | 8 | 9 | @mixin colorize($selector, $color) { 10 | $raised: $selector + '[raised]'; 11 | @include button-background-color($raised, $color); 12 | @include button-color($raised, $mat-white); 13 | 14 | $not-raised: $selector + ':not([raised])'; 15 | @include button-color($not-raised, $color); 16 | } 17 | 18 | :host { 19 | font-family: Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif; 20 | 21 | @include colorize("material-button.red", $mat-red); 22 | @include colorize("material-button.blue", $mat-blue); 23 | @include colorize("material-button.green", $mat-green); 24 | @include colorize("material-fab.red", $mat-red); 25 | @include colorize("material-fab.blue", $mat-blue); 26 | @include colorize("material-fab.green", $mat-green); 27 | @include icon-button-color("material-button.blue-icon", $mat-blue); 28 | @include raised-button('material-button.raised-color-example', $mat-blue); 29 | @include raised-button('.raised-example'); 30 | @include button-dense-theme('.dense-example'); 31 | } 32 | 33 | material-button, 34 | material-fab { 35 | font-size: 1; 36 | 37 | &.no-mixin-red { 38 | background-color: $mat-red; 39 | color: $mat-white; 40 | } 41 | } 42 | 43 | h2 { 44 | color: #222; 45 | font-family: Roboto,"Helvetica Neue",Arial,Helvetica,sans-serif; 46 | font-size: 16px; 47 | font-weight: normal; 48 | line-height: 40px; 49 | margin: 20px; 50 | } 51 | 52 | [card] { 53 | display: inline-flex; 54 | flex: 1; 55 | flex-direction: column; 56 | border-radius: 3px; 57 | margin-top: $mat-grid; 58 | padding: $mat-grid * 2; 59 | } 60 | 61 | .dark-theme { 62 | color: $mat-white; 63 | background: $mat-grey-800; 64 | } 65 | 66 | [flex] { 67 | justify-content: space-between; 68 | } 69 | -------------------------------------------------------------------------------- /example/material_button_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_button_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_card_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_card_example/lib/material_card_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_button/material_button.dart'; 7 | import 'package:angular_components/material_icon/material_icon.dart'; 8 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 9 | 10 | @GallerySectionConfig( 11 | displayName: 'Material Card', 12 | docs: ['package:angular_components/material_card/README.md'], 13 | demos: [MaterialCardExample], 14 | benchmarks: [], 15 | showGeneratedDocs: true, 16 | relatedUrls: { 17 | 'Material Spec': 'https://material.io/design/components/cards.html', 18 | }, 19 | ) 20 | class MaterialButtonGalleryConfig {} 21 | 22 | @Component( 23 | selector: 'material-card-example', 24 | directives: [ 25 | MaterialButtonComponent, 26 | MaterialIconComponent, 27 | ], 28 | templateUrl: 'material_card_example.html', 29 | styleUrls: [ 30 | // This is a wrapper around mdc-card styling to allow it to be imported 31 | // in dart. 32 | 'package:angular_components/css/mdc_web/card/mdc-card.scss.css', 33 | 'material_card_example.scss.css' 34 | ], 35 | ) 36 | class MaterialCardExample {} 37 | -------------------------------------------------------------------------------- /example/material_card_example/lib/material_card_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | // This file is mostly a port from the mdc-card example here: 6 | // https://github.com/material-components/material-components-web/blob/master/demos/card.scss 7 | 8 | @import 'package:angular_components/css/material/material'; 9 | 10 | $mdc-card-image: 'http://material-components-web.appspot.com/images/16-9.jpg'; 11 | 12 | :host { 13 | display: flex; 14 | } 15 | 16 | // Provide a size for the card. Cards normally take up the complete space of 17 | // their parent. 18 | .demo-size { 19 | width: $mat-grid * 44; 20 | } 21 | 22 | // Provide material styling for the title. 23 | .demo-card__title { 24 | @include mat-font-title; 25 | line-height: 1em; // legacy setting 26 | margin: 0; 27 | } 28 | 29 | // Provider material styling for the subtitle. 30 | .demo-card__subtitle { 31 | @include mat-font-subhead; 32 | margin: 0; 33 | } 34 | 35 | // Use the same image as the mdc-web example. 36 | .demo-card__media { 37 | background-image: url($mdc-card-image); 38 | } 39 | 40 | .demo-card__primary { 41 | padding: $mat-grid * 2; 42 | } 43 | 44 | .demo-card__secondary { 45 | @include mat-font-body; 46 | padding: 0 $mat-grid * 2 $mat-grid; 47 | } 48 | 49 | section { 50 | display: block; 51 | 52 | + section { 53 | margin-left: $mat-grid * 4; 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /example/material_card_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_card_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_checkbox_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_checkbox_example/lib/material_checkbox_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_forms/angular_forms.dart'; 7 | import 'package:angular_components/material_button/material_button.dart'; 8 | import 'package:angular_components/material_checkbox/material_checkbox.dart'; 9 | import 'package:angular_components/material_icon/material_icon.dart'; 10 | import 'package:angular_components/material_input/material_input.dart'; 11 | import 'package:angular_components/material_toggle/material_toggle.dart'; 12 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 13 | 14 | @GallerySectionConfig( 15 | displayName: 'Material Checkbox', 16 | docs: [MaterialCheckboxComponent], 17 | demos: [MaterialCheckboxExample], 18 | benchmarks: [ 19 | 'material_checkbox_init', 20 | ], 21 | showGeneratedDocs: true, 22 | ) 23 | class MaterialCheckboxGalleryConfig {} 24 | 25 | @Component( 26 | selector: 'material-checkbox-example', 27 | directives: [ 28 | MaterialButtonComponent, 29 | MaterialCheckboxComponent, 30 | MaterialIconComponent, 31 | materialInputDirectives, 32 | MaterialToggleComponent, 33 | NgFor, 34 | NgModel, 35 | NgFormControl 36 | ], 37 | templateUrl: 'material_checkbox_example.html', 38 | styleUrls: ['material_checkbox_example.scss.css'], 39 | preserveWhitespace: true, 40 | ) 41 | class MaterialCheckboxExample { 42 | /// Todo list example 43 | List todos; 44 | String todoText; 45 | 46 | MaterialCheckboxExample() { 47 | todos = [ 48 | Todo('learn angular', true), 49 | Todo('build an angular app', false), 50 | Todo('profit!', false), 51 | ]; 52 | } 53 | 54 | Control newTodo = Control(""); 55 | 56 | void addTodo() { 57 | todos.add(Todo(newTodo.value, false)); 58 | newTodo.updateValue(""); 59 | } 60 | 61 | int remaining() => todos.where((todo) => !todo.done).length; 62 | 63 | /// Custom example 64 | bool disabledState = false; 65 | bool checkedState = false; 66 | bool indeterminateState = false; 67 | bool indeterminateBehavior = false; 68 | String customLabel = "custom label"; 69 | Control newLabel = Control(""); 70 | String statusStr = "???"; 71 | 72 | void setLabel() { 73 | customLabel = newLabel.value; 74 | newLabel.updateValue(""); 75 | } 76 | } 77 | 78 | class Todo { 79 | String text; 80 | bool done; 81 | 82 | Todo(this.text, this.done); 83 | } 84 | -------------------------------------------------------------------------------- /example/material_checkbox_example/lib/material_checkbox_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_checkbox/mixins'; 7 | 8 | :host { 9 | @include material-checkbox-color($mat-pink-500, $modifier: '.custom-theme'); 10 | } 11 | 12 | .limited-width { 13 | width: $mat-grid * 20; 14 | } 15 | 16 | .debug-info { 17 | background: $mat-grey-200; 18 | } 19 | 20 | .help-icon { 21 | margin: 0 $mat-grid-type; 22 | } 23 | 24 | material-checkbox.top { 25 | align-items: flex-start; 26 | } 27 | 28 | .material-checkbox-no-left-margin { 29 | @include checkbox-no-left-margin; 30 | } 31 | -------------------------------------------------------------------------------- /example/material_checkbox_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_checkbox_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_forms: ^2.0.0 9 | angular_gallery_section: 10 | path: ../../angular_gallery_section 11 | build_config: '>=0.2.6 <0.4.0' 12 | -------------------------------------------------------------------------------- /example/material_chips_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_chips_example/lib/material_chips_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_chips/mixins'; 7 | 8 | div.control-bar { 9 | margin: $mat-grid; 10 | } 11 | 12 | @include material-chip-theme( 13 | $primary-bgcolor: $mat-red-500, 14 | $primary-bgcolor-hover: $mat-green-500, 15 | $left-icon-color: $mat-white, 16 | $left-icon-bgcolor: $mat-green-800, 17 | $chip-selector: '.my-theme' 18 | ); 19 | 20 | @include material-chip-theme( 21 | $chip-selector: '.left-icon-bg', 22 | $left-icon-bgcolor: $mat-blue-500, 23 | $primary-bgcolor: $mat-grey-600, 24 | $primary-bgcolor-hover: $mat-grey-700, 25 | $primary-bgcolor-selected: $mat-grey-700 26 | ); 27 | 28 | .left-icon-bg material-icon { 29 | color: $mat-white; 30 | fill: $mat-white; 31 | } 32 | 33 | .clickable { 34 | @include material-chips-clickable(); 35 | } 36 | 37 | .dense { 38 | @include chips-dense-theme(); 39 | } 40 | 41 | -------------------------------------------------------------------------------- /example/material_chips_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_chips_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_datepicker_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/combined_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular_components/material_datepicker/date_input.dart'; 6 | import 'package:angular_components/material_datepicker/date_range_input.dart'; 7 | import 'package:angular_components/material_datepicker/material_calendar_picker.dart'; 8 | import 'package:angular_components/material_datepicker/material_date_range_picker.dart'; 9 | import 'package:angular_components/material_datepicker/material_date_time_picker.dart'; 10 | import 'package:angular_components/material_datepicker/material_datepicker.dart'; 11 | import 'package:angular_components/material_datepicker/material_month_picker.dart'; 12 | import 'package:angular_components/material_datepicker/material_time_picker.dart'; 13 | import 'date_input_demo.dart'; 14 | import 'date_range_input_demo.dart'; 15 | import 'material_calendar_picker_demo.dart'; 16 | import 'material_date_range_picker_demo.dart'; 17 | import 'material_date_time_picker_demo.dart'; 18 | import 'material_datepicker_demo.dart'; 19 | import 'material_month_picker_demo.dart'; 20 | import 'material_time_picker_demo.dart'; 21 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 22 | 23 | @GallerySectionConfig( 24 | displayName: 'Material Datepicker', 25 | docs: [ 26 | MaterialDateRangePickerComponent, 27 | MaterialDatepickerComponent, 28 | MaterialCalendarPickerComponent, 29 | MaterialMonthPickerComponent, 30 | MaterialTimePickerComponent, 31 | MaterialDateTimePickerComponent, 32 | DateInputDirective, 33 | DateRangeInputComponent 34 | ], 35 | demos: [ 36 | MaterialDateRangePickerDemoComponent, 37 | MaterialDatepickerDemoComponent, 38 | MaterialCalendarPickerDemoComponent, 39 | MaterialMonthPickerDemoComponent, 40 | MaterialTimePickerDemoComponent, 41 | MaterialDateTimePickerDemoComponent, 42 | DateInputDemoComponent, 43 | DateRangeInputDemoComponent 44 | ], 45 | benchmarks: ['acxMaterialCalendarPickerNg2:createDestroy'], 46 | showGeneratedDocs: true, 47 | ) 48 | class CombinedDemoComponent {} 49 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/date_input_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/date_input.dart'; 7 | import 'package:angular_components/material_datepicker/module.dart'; 8 | import 'package:angular_components/material_input/material_input.dart'; 9 | import 'package:angular_components/model/date/date.dart'; 10 | 11 | @Component( 12 | selector: 'date-input-demo', 13 | directives: [DateInputDirective, materialInputDirectives], 14 | providers: [datepickerBindings], 15 | templateUrl: 'date_input_demo.html', 16 | ) 17 | class DateInputDemoComponent { 18 | Date requiredDate = Date.today(); 19 | Date optionalDate; 20 | 21 | Date get today => Date.today(); 22 | 23 | String formatDate(Date date) => date == null ? '(null)' : date.toString(); 24 | } 25 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/date_input_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

date-input

7 |

This directive globs onto a material-input and automatically tries to parse 8 | dates on change events (enter or blur). It recognizes a bunch of localized 9 | formats:

10 | 11 |
    12 |
  • 7/20/2015 (or 20/7/2015, depending on locale)
    • 13 |
  • Mon, 7/20/2015 (or Mon, 20/7/2015)
    • 14 |
  • Jul 20, 2015
    • 15 |
  • Mon, Jul 20, 2015
    • 16 |
  • July 20, 2015
    • 17 |
  • Monday, July 20, 2015
    • 18 |
  • 2015-07-20 (ISO format)
    • 19 |
20 | 21 |

When a valid date is entered, this directive will reformat the input. It 22 | defaultly chooses the "Jul 20, 2015" format, but this can be changed using the 23 | [date-format] property.

24 | 25 |

If the input date has a two-digit year, then the input will try to guess what 26 | the input actually means. E.g. 8/3/89 would get interpreted as August 3, 1989. 27 | (Until some point in the distant future, when it'll start interpreting that as 28 | 2089).

29 | 30 |
31 | Date (optional): 32 | 34 | 35 |
36 |
37 | Selected date in ISO format: {{formatDate(optionalDate)}} 38 |
39 |
40 |
41 | Date (required): 42 | 45 | 46 |
47 |
48 | Selected date in ISO format: {{formatDate(requiredDate)}} 49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/date_range_input_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/date_range_input.dart'; 7 | import 'package:angular_components/material_datepicker/module.dart'; 8 | import 'package:angular_components/model/date/date.dart'; 9 | 10 | @Component( 11 | selector: 'date-range-input-demo', 12 | template: ''' 13 |

date-range-input

14 | It's two date-inputs glued together. 15 |
16 | 17 |
18 | Selected range: {{range}} 19 | ''', 20 | styles: ['date-range-input { width: 400px; }'], 21 | directives: [DateRangeInputComponent], 22 | providers: [datepickerBindings], 23 | ) 24 | class DateRangeInputDemoComponent { 25 | DateRange range = DateRange(Date.today().add(days: -7), Date.today()); 26 | } 27 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_calendar_picker_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/calendar.dart'; 7 | import 'package:angular_components/material_datepicker/material_calendar_picker.dart'; 8 | import 'package:angular_components/material_datepicker/module.dart'; 9 | import 'package:angular_components/model/date/date.dart'; 10 | import 'package:angular_components/utils/browser/window/module.dart'; 11 | 12 | @Component( 13 | selector: 'material-calendar-picker-demo', 14 | directives: [MaterialCalendarPickerComponent], 15 | providers: [windowBindings, datepickerBindings], 16 | templateUrl: 'material_calendar_picker_demo.html', 17 | styleUrls: ['material_calendar_picker_demo.scss.css'], 18 | ) 19 | class MaterialCalendarPickerDemoComponent { 20 | static Date date(int days) => Date.today().add(days: days); 21 | 22 | CalendarState plainModel = 23 | CalendarState.selected([CalendarSelection('range', date(-4), date(4))]); 24 | 25 | CalendarState colorfulModel = CalendarState.selected([ 26 | CalendarSelection('range', date(4), date(8)), 27 | CalendarSelection('comparison', date(-1), date(3)) 28 | ]); 29 | 30 | CalendarState overlapModel = CalendarState.selected([ 31 | CalendarSelection('range', date(-1), date(8)), 32 | CalendarSelection('comparison', date(-5), date(3)) 33 | ]); 34 | 35 | CalendarState mutableModel = 36 | CalendarState.selected([CalendarSelection('range', date(0), date(4))]); 37 | 38 | void creepForward() { 39 | var current = mutableModel.selection('range'); 40 | mutableModel = mutableModel.setSelection(CalendarSelection( 41 | 'range', current.start.add(days: 1), current.end.add(days: 1))); 42 | } 43 | 44 | CalendarState singleDateModel = 45 | CalendarState.selected([CalendarSelection('range', date(0), date(0))]); 46 | 47 | CalendarState dateRangeModel = 48 | CalendarState.selected([CalendarSelection('range', date(-7), date(0))]); 49 | } 50 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_calendar_picker_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

material-calendar-picker

7 |
8 |

Default calendar

9 | 10 | 11 |
12 | 13 |
14 |

With custom colors

15 | 16 | 17 |
18 | 19 |
20 |

With overlapping selections

21 | 22 | 23 |
24 | 25 |
26 |

Selection updating

27 | 28 | 29 | 30 | 31 |
32 | 33 |
34 |

Single date selection

35 |

Click on the calendar to select a single date.

36 |

Selected date: {{singleDateModel.selection('range').start}}

37 | 38 | 39 |
40 | 41 |
42 |

Date range selection

43 |

Drag the dates on the calendar to select date ranges.

44 |

Clicking two different dates is also supported.

45 |

Selected range: {{dateRangeModel.selection('range')}}

46 | 47 | 48 |
49 | 50 |
51 |

Compact calendar

52 | 53 | 54 |
55 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_calendar_picker_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_datepicker/mixins'; 7 | 8 | .calendar { 9 | height: 400px; 10 | } 11 | 12 | .inline-block { 13 | display: inline-block; 14 | } 15 | 16 | // Some custom calendar colors 17 | @include calendar-highlights('.pretty', ( 18 | range: $mat-deep-purple-map, 19 | comparison: $mat-pink-map, 20 | )); 21 | 22 | // More custom colors: blue for the selected range; google-yellow for the 23 | // comparison range; green if they overlap. 24 | @include calendar-highlights('.overlap', ( 25 | range: $mat-blue-map, 26 | comparison: $mat-google-yellow-map, 27 | range comparison: $mat-green-map, 28 | )); 29 | 30 | // Remove the padding from the circle around the current date if it falls on 31 | // the edge of the comparison highlight, but keep it if it falls on the edge 32 | // of the range highlight. 33 | @include calendar-today-circle-remove-padding( 34 | '.overlap', 35 | comparison, 36 | $exclude: range 37 | ); 38 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_date_range_picker_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/css/material/shadow'; 7 | 8 | .main-example { 9 | display: flex; 10 | } 11 | 12 | .options-pane { 13 | @include material-shadow; 14 | 15 | margin: 0 $mat-grid * 4; 16 | padding: $mat-grid * 2 $mat-grid; 17 | width: $mat-grid * 42; 18 | } 19 | 20 | h4 { 21 | margin: $mat-grid; 22 | margin-top: 0; 23 | } 24 | 25 | .limit-label { 26 | margin: $mat-grid $mat-grid 0; 27 | } 28 | 29 | date-range-input { 30 | display: inline-flex; 31 | width: 100%; 32 | } 33 | 34 | .selection-label { 35 | margin: 0 $mat-grid; 36 | } 37 | 38 | .simplified-example { 39 | display: inline-block; 40 | margin: 0 $mat-grid * 4; 41 | } 42 | 43 | .message-bar { 44 | border-top: 1px solid $mat-gray-300; 45 | display: flex; 46 | } 47 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_date_time_picker_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/material_date_time_picker.dart'; 7 | import 'package:angular_components/material_datepicker/module.dart'; 8 | import 'package:angular_components/utils/browser/window/module.dart'; 9 | 10 | @Component( 11 | selector: 'material-date-time-picker-demo', 12 | providers: [windowBindings, datepickerBindings], 13 | directives: [MaterialDateTimePickerComponent], 14 | templateUrl: 'material_date_time_picker_demo.html', 15 | ) 16 | class MaterialDateTimePickerDemoComponent { 17 | DateTime dateTime = DateTime.now(); 18 | DateTime optionalTime; 19 | } 20 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_date_time_picker_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

material-date-time-picker

7 |
8 |

Required

9 | 11 | 12 |
13 |
14 |

Optional

15 | 17 | 18 |
19 |
20 |

Disabled

21 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_datepicker_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:quiver/time.dart'; 7 | import 'package:angular_components/material_datepicker/date_range_input.dart'; 8 | import 'package:angular_components/material_datepicker/material_datepicker.dart'; 9 | import 'package:angular_components/material_datepicker/module.dart'; 10 | import 'package:angular_components/material_datepicker/range.dart'; 11 | import 'package:angular_components/model/date/date.dart'; 12 | import 'package:angular_components/utils/browser/window/module.dart'; 13 | 14 | @Component( 15 | selector: 'material-datepicker-demo', 16 | providers: [windowBindings, datepickerBindings], 17 | directives: [MaterialDatepickerComponent, DateRangeInputComponent], 18 | templateUrl: 'material_datepicker_demo.html', 19 | ) 20 | class MaterialDatepickerDemoComponent { 21 | Date date = Date.today(); 22 | Date optionalDate; 23 | DateRange limitToRange = DateRange(Date.today().add(years: -5), Date.today()); 24 | List predefinedDates; 25 | 26 | MaterialDatepickerDemoComponent() { 27 | var clock = Clock(); 28 | predefinedDates = [ 29 | today(clock), 30 | yesterday(clock), 31 | ]; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_datepicker_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

material-datepicker

7 |
8 |

Required

9 |

Selected: {{date}}

10 | 14 | 15 |
16 |
17 |

Optional

18 |

Selected: {{optionalDate}}

19 | 23 | 24 |
25 |
26 |

Compact

27 |

Selected: {{date}}

28 | 33 | 34 |
35 | 36 |
37 |

Presets

38 |

Selected: {{date}}

39 | 44 | 45 |
46 | 47 |
Limit to date range: 48 | 51 | 52 |
53 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_month_picker_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/calendar.dart'; 7 | import 'package:angular_components/material_datepicker/date_range_input.dart'; 8 | import 'package:angular_components/material_datepicker/material_month_picker.dart'; 9 | import 'package:angular_components/material_datepicker/module.dart'; 10 | import 'package:angular_components/model/date/date.dart'; 11 | 12 | @Component( 13 | selector: 'material-month-picker-demo', 14 | providers: [datepickerBindings], 15 | directives: [DateRangeInputComponent, MaterialMonthPickerComponent], 16 | templateUrl: 'material_month_picker_demo.html', 17 | styleUrls: ['material_month_picker_demo.scss.css'], 18 | ) 19 | class MaterialMonthPickerDemoComponent { 20 | static Date monthsFromNow(int months) => Date.today().add(months: months); 21 | 22 | DateRange limitToRange = 23 | DateRange(Date.today().add(years: -5), Date.today().add(years: 5)); 24 | 25 | CalendarState plainModel = CalendarState.selected( 26 | [CalendarSelection('default', monthsFromNow(-4), monthsFromNow(4))], 27 | resolution: CalendarResolution.months); 28 | 29 | CalendarState singleDateModel = CalendarState.selected( 30 | [CalendarSelection('default', monthsFromNow(0), monthsFromNow(0))], 31 | resolution: CalendarResolution.months); 32 | 33 | CalendarState dateRangeModel = CalendarState.selected( 34 | [CalendarSelection('default', monthsFromNow(-7), monthsFromNow(0))], 35 | resolution: CalendarResolution.months); 36 | } 37 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_month_picker_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

material-month-picker

7 |
8 |

Default month picker

9 | 10 | 11 |
12 | 13 |
14 |

Single month selection

15 |

Click on the calendar to select a single month.

16 |

Selected date: {{singleDateModel.selection(singleDateModel.currentSelection).start}}

17 | 22 | 23 |
24 | 25 |
26 |

Month range selection

27 |

Drag the month on the calendar to select month ranges.

28 |

Clicking two different months is also supported.

29 |

Selected range: {{dateRangeModel.selection(dateRangeModel.currentSelection)}}

30 | 35 | 36 |
37 | 38 |

39 | Limit to date range: 40 | 43 | 44 |

45 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_month_picker_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | 7 | .calendar { 8 | height: 40 * $mat-grid; 9 | } 10 | 11 | .inline-block { 12 | display: inline-block; 13 | } 14 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_time_picker_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_datepicker/material_time_picker.dart'; 7 | import 'package:angular_components/material_datepicker/module.dart'; 8 | import 'package:angular_components/utils/browser/window/module.dart'; 9 | 10 | @Component( 11 | selector: 'material-time-picker-demo', 12 | providers: [windowBindings, datepickerBindings], 13 | directives: [MaterialTimePickerComponent], 14 | templateUrl: 'material_time_picker_demo.html', 15 | ) 16 | class MaterialTimePickerDemoComponent { 17 | DateTime time = DateTime.now(); 18 | DateTime optionalTime; 19 | } 20 | -------------------------------------------------------------------------------- /example/material_datepicker_example/lib/material_time_picker_demo.html: -------------------------------------------------------------------------------- 1 | 6 |

material-time-picker

7 |
8 |

Required

9 | 11 | 12 |
13 |
14 |

Optional

15 | 17 | 18 |
19 |
20 |

Disabled

21 | 24 | 25 |
26 | -------------------------------------------------------------------------------- /example/material_datepicker_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_datepicker_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | quiver: '>=0.24.0 <0.30.0' 12 | -------------------------------------------------------------------------------- /example/material_dialog_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_dialog_example/lib/material_dialog_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_dialog/mixins'; 7 | 8 | material-button[raised] { 9 | background: $mat-blue; 10 | color: $mat-white; 11 | margin: 0 $mat-grid $mat-grid 0; 12 | } 13 | 14 | .basic-dialog, 15 | .basic-scrolling-dialog, 16 | .max-height-dialog, 17 | .headered-dialog { 18 | width: $mat-grid * 60; 19 | 20 | [footer] material-button:not([disabled]) { 21 | color: $mat-blue; 22 | } 23 | } 24 | 25 | .basic-scrolling-dialog { 26 | height: $mat-grid * 40; 27 | 28 | [footer] { 29 | padding-top: $mat-grid; 30 | } 31 | } 32 | 33 | .max-height-dialog { 34 | max-height: 60vh; 35 | 36 | [footer] { 37 | padding-top: $mat-grid; 38 | } 39 | } 40 | 41 | .info-dialog { 42 | width: $mat-grid * 40; 43 | } 44 | 45 | .dialog-with-error { 46 | width: $mat-grid * 40; 47 | 48 | material-button { 49 | margin: $mat-grid 0; 50 | 51 | &.close-button { 52 | margin: $mat-grid 0 0 0; 53 | } 54 | } 55 | } 56 | 57 | .custom-colors-dialog { 58 | @include material-dialog-header-color($mat-white); 59 | @include material-dialog-header-shadow; 60 | background-color: $mat-gray-100; 61 | width: $mat-grid * 40; 62 | 63 | [header] h3 { 64 | color: $mat-transparent-black; 65 | } 66 | } 67 | 68 | .no-header-footer-dialog { 69 | @include material-dialog-body-padding; 70 | width: $mat-grid * 40; 71 | 72 | p { 73 | margin: 0; 74 | padding: $mat-grid * 3; 75 | } 76 | 77 | material-button { 78 | margin: 0 0 $mat-grid * 3 $mat-grid * 3; 79 | } 80 | } 81 | 82 | .fullscreen-dialog { 83 | @include material-dialog-fullscreen($mat-grid * 100, $mat-grid * 80); 84 | 85 | &.fullscreen-mode { 86 | @include material-dialog-header-padding($mat-grid $mat-grid * 2); 87 | 88 | [header] { 89 | align-items: center; 90 | display: flex; 91 | 92 | material-button { 93 | color: $mat-white; 94 | margin-right: $mat-grid * 2; 95 | } 96 | 97 | h1 { 98 | margin: $mat-grid-type / 2 0 0; 99 | } 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /example/material_dialog_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_dialog_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_expansionpanel_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_expansionpanel_example/lib/material_expansionpanel_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_expansionpanel/mixins'; 7 | @import 'package:angular_components/material_yes_no_buttons/mixins'; 8 | 9 | .dark { 10 | @include expansionpanel-dark-theme; 11 | } 12 | 13 | .dense { 14 | @include expansionpanel-dense-theme; 15 | } 16 | 17 | .reminder { 18 | color: $mat-blue; 19 | margin-right: $mat-grid-type; 20 | vertical-align: text-top; 21 | } 22 | 23 | .action { 24 | padding: $mat-grid 0; 25 | } 26 | 27 | .flat-panels material-expansionpanel { 28 | width: $mat-grid * 40; 29 | } 30 | 31 | .expand-on-left-panels material-expansionpanel { 32 | width: $mat-grid * 60; 33 | } 34 | 35 | .independent-panels material-expansionpanel { 36 | width: $mat-grid * 75; 37 | } 38 | 39 | .custom-toolbelt-buttons { 40 | @include material-yes-button-text-color($mat-blue); 41 | } 42 | 43 | .custom-toolbelt-panel [toolbelt] { 44 | align-items: center; 45 | display: flex; 46 | justify-content: space-between; 47 | color: $mat-light-transparent-black; 48 | padding-right: $mat-grid * 3; 49 | } 50 | 51 | .confirmation-dialog { 52 | height: $mat-grid * 18; 53 | text-align: center; 54 | width: $mat-grid * 40; 55 | 56 | h3 { 57 | @include mat-type-subhead; 58 | } 59 | 60 | material-yes-no-buttons { 61 | display: block; 62 | } 63 | } 64 | 65 | .left-align-action-buttons { 66 | @include expansionpanel-left-align-action-buttons; 67 | } 68 | 69 | .bottom-header-action { 70 | @include expansionpanel-bottom-header-action; 71 | } 72 | -------------------------------------------------------------------------------- /example/material_expansionpanel_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_expansionpanel_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_forms: ^2.0.0 9 | angular_gallery_section: 10 | path: ../../angular_gallery_section 11 | build_config: '>=0.2.6 <0.4.0' 12 | -------------------------------------------------------------------------------- /example/material_icon_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_icon_example/lib/material_icon_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_button/material_button.dart'; 7 | import 'package:angular_components/material_icon/material_icon.dart'; 8 | import 'package:angular_components/material_input/material_input.dart'; 9 | import 'package:angular_components/model/ui/icon.dart'; 10 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 11 | 12 | @GallerySectionConfig( 13 | displayName: 'Material Icon', 14 | docs: [MaterialIconComponent], 15 | demos: [MaterialIconDemoComponent], 16 | benchmarks: [ 17 | 'material_icon_init', 18 | 'material_icon_100_init', 19 | 'material_icon_100_binding_init', 20 | ], 21 | showGeneratedDocs: true, 22 | ) 23 | class GlyphGalleryConfig {} 24 | 25 | @Component( 26 | selector: 'material-icon-demo', 27 | directives: [ 28 | MaterialButtonComponent, 29 | MaterialIconComponent, 30 | MaterialInputComponent 31 | ], 32 | exports: [done, doneAll, doneOutline], 33 | templateUrl: 'material_icon_demo.html', 34 | styleUrls: ['material_icon_demo.scss.css'], 35 | preserveWhitespace: true, 36 | ) 37 | class MaterialIconDemoComponent { 38 | Icon iconModel = done; 39 | String iconColor = 'blue'; 40 | String iconName = 'alarm'; 41 | } 42 | 43 | const done = Icon('done'); 44 | const doneAll = Icon('done_all'); 45 | const doneOutline = Icon('done_outline'); 46 | -------------------------------------------------------------------------------- /example/material_icon_example/lib/material_icon_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_icon/mixins'; 7 | 8 | .custom-size { 9 | @include material-icon-size($mat-grid * 5); 10 | } 11 | 12 | material-input { 13 | width: 250px; 14 | } 15 | -------------------------------------------------------------------------------- /example/material_icon_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_icon_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_input_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_input_example/lib/gallery_section_config.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular_components/material_input/material_auto_suggest_input.dart'; 6 | import 'package:angular_components/material_input/material_input.dart'; 7 | import 'package:angular_components/material_input/material_number_accessor.dart'; 8 | import 'package:angular_components/material_input/material_percent_directive.dart'; 9 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 10 | 11 | import 'material_auto_suggest_input_demo.dart'; 12 | import 'material_input_demo.dart'; 13 | import 'material_input_mixins.dart'; 14 | import 'material_input_number_value_accessor_demo.dart'; 15 | import 'material_percent_input_demo.dart'; 16 | 17 | @GallerySectionConfig( 18 | displayName: 'Material Input', 19 | docs: [ 20 | MaterialInputComponent, 21 | MaterialMultilineInputComponent, 22 | MaterialAutoSuggestInputComponent, 23 | MaterialNumberValueAccessor, 24 | MaterialPercentInputDirective, 25 | ], 26 | demos: [ 27 | MaterialInputDemoComponent, 28 | MaterialAutoSuggestInputDemoComponent, 29 | MaterialPercentInputDemoComponent, 30 | MaterialInputMixinDemoComponent, 31 | MaterialInputNumberValueAccessorDemoComponent, 32 | ], 33 | benchmarks: [ 34 | 'material_auto_suggest_input_init', 35 | 'material_auto_suggest_input_100_init', 36 | 'material_input_init', 37 | 'material_number_input_init', 38 | ], 39 | showGeneratedDocs: true, 40 | ) 41 | class MaterialInputGallerySection {} 42 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_auto_suggest_input_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/css/material/shadow'; 7 | 8 | .example { 9 | @include shadow-elevation(2); 10 | margin-bottom: $mat-grid * 3; 11 | padding: $mat-grid * 2; 12 | max-width: $mat-grid * 84; 13 | 14 | &.example-with-options { 15 | display: flex; 16 | } 17 | } 18 | 19 | .example-pane { 20 | flex: 1; 21 | 22 | material-auto-suggest-input { 23 | width: $mat-grid * 25; 24 | } 25 | } 26 | 27 | .options-pane { 28 | flex: 1; 29 | padding: $mat-grid * 2; 30 | background: $mat-gray-200; 31 | 32 | material-checkbox { 33 | margin-left: 0; 34 | } 35 | 36 | material-input { 37 | width: 17 * $mat-grid; 38 | margin-right: 2 * $mat-grid; 39 | } 40 | } 41 | 42 | h2 { 43 | margin-top: 0; 44 | } 45 | 46 | [header], 47 | [footer] { 48 | display: flex; 49 | align-items: center; 50 | height: $mat-grid * 4; 51 | padding: $mat-grid; 52 | 53 | &.end-justified { 54 | justify-content: flex-end; 55 | } 56 | 57 | material-button { 58 | color: $mat-blue; 59 | } 60 | } 61 | 62 | [header] { 63 | border-bottom: 1px solid $mat-border-light; 64 | } 65 | 66 | [footer] { 67 | border-top: 1px solid $mat-border-light; 68 | } 69 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | 7 | material-button { 8 | background: $mat-blue; 9 | color: $mat-white; 10 | } 11 | 12 | p { 13 | margin: 0; 14 | } 15 | 16 | .auto-focus-section { 17 | height: $mat-grid * 10; 18 | 19 | material-button { 20 | width: $mat-grid * 13; 21 | } 22 | } 23 | 24 | .align-with-font-size { 25 | font-size: $mat-headline-font-size; 26 | line-height: $mat-body-font-size; 27 | } 28 | 29 | .align-with-line-height { 30 | font-size: $mat-body-font-size; 31 | line-height: $mat-headline-font-size; 32 | } 33 | 34 | .fill-width { 35 | align-items: baseline; 36 | border: 1px solid $mat-transparent-black; 37 | display: flex; 38 | padding: $mat-grid; 39 | width: $mat-grid * 100; 40 | 41 | material-input { 42 | flex-grow: 1; 43 | margin-left: $mat-grid; 44 | } 45 | } 46 | 47 | .block-width { 48 | display: block; 49 | width: $mat-grid * 40; 50 | } 51 | 52 | [tooltipTarget] { 53 | color: $mat-light-transparent-black; 54 | cursor: pointer; 55 | outline: none; 56 | 57 | &:hover, 58 | &:focus { 59 | color: $mat-blue-700; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_mixins.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_input/material_input.dart'; 7 | 8 | @Component( 9 | selector: 'material-input-mixins', 10 | templateUrl: 'material_input_mixins.html', 11 | styleUrls: ['material_input_mixins.scss.css'], 12 | directives: [materialInputDirectives], 13 | preserveWhitespace: true, 14 | ) 15 | class MaterialInputMixinDemoComponent {} 16 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_mixins.html: -------------------------------------------------------------------------------- 1 | 6 |
7 | Label overridden 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 23 | 24 | 25 | 27 | 28 | 29 |
30 | 31 | 34 | 35 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_mixins.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_input/mixins'; 7 | 8 | material-input { 9 | &.red { 10 | @include input-label-color($mat-red); 11 | } 12 | 13 | &.blue { 14 | @include input-label-color($mat-blue); 15 | } 16 | } 17 | 18 | .grey-glyph { 19 | @include input-leading-glyph-color($mat-grey-400); 20 | } 21 | 22 | .disabled-black { 23 | @include material-input-disabled-input-color($mat-black); 24 | } 25 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_number_value_accessor_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_forms/angular_forms.dart'; 7 | import 'package:intl/intl.dart'; 8 | import 'package:angular_components/material_button/material_fab.dart'; 9 | import 'package:angular_components/material_input/material_number_accessor.dart'; 10 | 11 | @Component( 12 | selector: 'material-input-number-value-accessor-demo', 13 | directives: [ 14 | formDirectives, 15 | FourDecimalsNumberFormat, 16 | MaterialFabComponent, 17 | materialNumberInputDirectives, 18 | ], 19 | templateUrl: 'material_input_number_value_accessor_demo.html', 20 | preserveWhitespace: true, 21 | ) 22 | class MaterialInputNumberValueAccessorDemoComponent { 23 | num value = 123; 24 | Control form; 25 | num decimalValue = 123.45678; 26 | 27 | MaterialInputNumberValueAccessorDemoComponent() { 28 | form = Control(321, (c) { 29 | if (c.value == null) return null; // Handled by number accessor 30 | return c.value > 1000 ? {'TooLargeKey': 'Too large'} : null; 31 | }); 32 | } 33 | 34 | void increaseValue() { 35 | value += 1; 36 | } 37 | 38 | void increaseFormValue() { 39 | form.updateValue(form.value + 2); 40 | } 41 | } 42 | 43 | @Directive( 44 | selector: '[fourDecimals]', 45 | providers: [ 46 | FactoryProvider( 47 | NumberFormat, FourDecimalsNumberFormat.createNumberFormat) 48 | ], 49 | ) 50 | class FourDecimalsNumberFormat { 51 | static NumberFormat createNumberFormat() => 52 | NumberFormat.decimalPattern()..maximumFractionDigits = 4; 53 | } 54 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_input_number_value_accessor_demo.html: -------------------------------------------------------------------------------- 1 | 6 | 9 | 10 |
11 | Number value (changes on keypress): {{value}} 12 | 15 | +1 16 | 17 |
18 | 19 |

Form API

20 | 22 | 23 |
24 | Form value (changes on blur): {{form.value}} 25 | 28 | +2 29 | 30 |
31 | 32 |

NumberFormat

33 | 34 |
35 | Edit: 36 | 39 | 40 |
41 | Raw value: {{decimalValue}} 42 | 43 | 44 |

Default format

45 | 49 | 50 | 51 |

Custom format (4 decimals):

52 | 57 | 58 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_percent_input_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_forms/angular_forms.dart'; 7 | import 'package:angular_components/material_input/material_percent_directive.dart'; 8 | 9 | @Component( 10 | selector: 'material-percent-input-demo', 11 | styles: ['material-input[type=percent] { width: 120px; }'], 12 | templateUrl: 'material_percent_input_demo.html', 13 | directives: [ 14 | formDirectives, 15 | materialNumberInputDirectives, 16 | MaterialPercentInputDirective, 17 | NgFor 18 | ], 19 | preserveWhitespace: true, 20 | ) 21 | class MaterialPercentInputDemoComponent { 22 | num effort = 110; 23 | num initialValue = 87; 24 | List changes = []; 25 | void recordChange(num change) { 26 | changes.add(change); 27 | if (changes.length > 5) changes.removeAt(0); 28 | } 29 | 30 | Control formControl = Control(44); 31 | } 32 | -------------------------------------------------------------------------------- /example/material_input_example/lib/material_percent_input_demo.html: -------------------------------------------------------------------------------- 1 | 6 | Effort level: 7 | 8 |
9 | At work, I always give {{effort}}% effort. 10 | 11 | 12 |

With manual event listeners

13 | 17 | 18 |
    19 |
  • Percentage changed to {{change}}
    • 20 |
21 | 22 |

With forms API

23 | 24 | 25 |
26 | {{formControl.value}}: {{formControl.status}} 27 | 28 | -------------------------------------------------------------------------------- /example/material_input_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_input_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_forms: ^2.0.0 9 | angular_gallery_section: 10 | path: ../../angular_gallery_section 11 | build_config: '>=0.2.6 <0.4.0' 12 | intl: '>=0.14.0 <0.16.0' 13 | -------------------------------------------------------------------------------- /example/material_list_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_list_example/lib/examples.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular_components/material_list/material_list.dart'; 6 | import 'package:angular_components/material_list/material_list_item.dart'; 7 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 8 | 9 | import 'material_list_demo.dart'; 10 | 11 | @GallerySectionConfig( 12 | displayName: 'Material List', 13 | docs: [ 14 | MaterialListComponent, 15 | MaterialListItemComponent, 16 | ], 17 | demos: [MaterialListDemoComponent], 18 | benchmarks: ['material_list_item_init', 'material_list_init'], 19 | showGeneratedDocs: true, 20 | ) 21 | class MaterialListExamples {} 22 | -------------------------------------------------------------------------------- /example/material_list_example/lib/material_list_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/focus/focus_item.dart'; 7 | import 'package:angular_components/focus/focus_list.dart'; 8 | import 'package:angular_components/material_icon/material_icon.dart'; 9 | import 'package:angular_components/material_list/material_list.dart'; 10 | import 'package:angular_components/material_list/material_list_item.dart'; 11 | import 'package:angular_components/material_select/material_select_item.dart'; 12 | import 'package:angular_components/model/selection/selection_model.dart'; 13 | 14 | @Component( 15 | selector: 'material-list-demo', 16 | directives: [ 17 | FocusItemDirective, 18 | FocusListDirective, 19 | MaterialIconComponent, 20 | MaterialListComponent, 21 | MaterialListItemComponent, 22 | MaterialSelectItemComponent, 23 | NgFor 24 | ], 25 | templateUrl: 'material_list_demo.html', 26 | styleUrls: ['material_list_demo.scss.css'], 27 | ) 28 | class MaterialListDemoComponent { 29 | SelectionModel colorSelection = SelectionModel.single(); 30 | String get selectedColor => colorSelection.selectedValues.isEmpty 31 | ? 'red' 32 | : colorSelection.selectedValues.first; 33 | 34 | SelectionModel itemSelection = SelectionModel.multi(); 35 | 36 | void toggleItem(key) { 37 | if (itemSelection.isSelected(key)) { 38 | itemSelection.deselect(key); 39 | } else { 40 | itemSelection.select(key); 41 | } 42 | } 43 | 44 | MaterialListDemoComponent() { 45 | itemSelection.select(2); 46 | } 47 | 48 | List get sizes => MaterialListSize.values; 49 | 50 | void selectColor(String color) { 51 | colorSelection.select(color); 52 | } 53 | 54 | String growingItemLabel = "Growing item label"; 55 | } 56 | -------------------------------------------------------------------------------- /example/material_list_example/lib/material_list_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/material_list/mixins'; 7 | 8 | .bordered-list { 9 | border: 1px solid $mat-black; 10 | border-radius: $mat-grid; 11 | margin: $mat-grid; 12 | overflow: hidden; 13 | } 14 | 15 | @include inline-material-list(':not(.stretched-list)'); 16 | -------------------------------------------------------------------------------- /example/material_list_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_list_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_menu_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_menu_example/lib/demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular_components/material_menu/material_fab_menu.dart'; 6 | import 'package:angular_components/material_menu/material_menu.dart'; 7 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 8 | 9 | import 'material_fab_menu_demo.dart'; 10 | import 'material_menu_demo.dart'; 11 | 12 | @GallerySectionConfig( 13 | displayName: 'Material Menu', 14 | docs: [ 15 | MaterialMenuComponent, 16 | MaterialFabMenuComponent, 17 | ], 18 | demos: [ 19 | MaterialMenuDemoComponent, 20 | MaterialFabMenuDemoComponent, 21 | ], 22 | benchmarks: [ 23 | 'material_menu_simple_init', 24 | 'material_menu_nested_init', 25 | ], 26 | showGeneratedDocs: true, 27 | ) 28 | class MaterialMenuExamples {} 29 | -------------------------------------------------------------------------------- /example/material_menu_example/lib/material_fab_menu_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_menu/material_fab_menu.dart'; 7 | import 'package:angular_components/model/menu/menu.dart'; 8 | import 'package:angular_components/model/ui/icon.dart'; 9 | 10 | @Component( 11 | selector: 'material-fab-menu-demo', 12 | directives: [MaterialFabMenuComponent], 13 | templateUrl: 'material_fab_menu_demo.html', 14 | ) 15 | class MaterialFabMenuDemoComponent { 16 | final MenuItem menuItem = MenuItem('your label', 17 | icon: Icon('add'), 18 | subMenu: MenuModel([ 19 | MenuItemGroup([ 20 | MenuItem('item1-1', tooltip: 'your tooltip'), 21 | MenuItem('item1-2', tooltip: 'your second tooltip') 22 | ], 'group1'), 23 | MenuItemGroup([MenuItem('item2-1'), MenuItem('item2-2')], 'group2'), 24 | ])); 25 | } 26 | -------------------------------------------------------------------------------- /example/material_menu_example/lib/material_fab_menu_demo.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |

Material FAB Menu

8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /example/material_menu_example/lib/material_menu_demo.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |

Material Menu Component

8 | Use the menu to change color 10 | 11 | 12 | 13 | 14 | 15 |
16 | Customized button 17 | 18 |
19 | 20 | 21 |
22 | 23 |
24 |

Nested Material Menu

25 | 26 | 27 |

With dropdown style

28 | 31 | 32 | 33 |

With dropdown style (nounderline)

34 | 38 | 39 | 40 |

With single- and multi-select menu groups

41 | 44 | 45 | 46 |

With menu item affixes

47 | 50 | 51 |
52 | -------------------------------------------------------------------------------- /example/material_menu_example/lib/material_menu_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/material_menu/mixins'; 6 | 7 | .nounderline { 8 | @include dropdown-menu-nounderline; 9 | } 10 | -------------------------------------------------------------------------------- /example/material_menu_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_menu_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | observable: ^0.22.1+3 12 | -------------------------------------------------------------------------------- /example/material_popup_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_popup_example/lib/material_popup_example.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material'; 6 | @import 'package:angular_components/css/material/shadow'; 7 | @import 'package:angular_components/material_popup/mixins'; 8 | 9 | .card { 10 | margin: $mat-grid; 11 | padding: $mat-grid; 12 | display: flex; 13 | flex-direction: column; 14 | flex: 1; 15 | 16 | @include shadow-elevation(); 17 | 18 | material-dropdown-select { 19 | width: $mat-grid * 25; 20 | padding: $mat-grid * 2 0; 21 | } 22 | } 23 | 24 | .flex-column { 25 | display: flex; 26 | flex-direction: column; 27 | flex: 1; 28 | } 29 | 30 | .flex-row { 31 | display: flex; 32 | flex-direction: row; 33 | flex: 1; 34 | } 35 | 36 | .centered-trigger { 37 | height: $mat-grid * 10; 38 | display: flex; 39 | align-items: center; 40 | 41 | .trigger { 42 | margin: 0 auto; 43 | } 44 | } 45 | 46 | .dont-panic { 47 | height: $mat-grid * 20; 48 | padding: $mat-grid; 49 | width: $mat-grid * 60; 50 | } 51 | 52 | .scroll-container { 53 | height: 400px; 54 | width: 400px; 55 | overflow: auto; 56 | } 57 | 58 | .content-container { 59 | height: 600px; 60 | width: 600px; 61 | background: radial-gradient( 62 | $mat-white, 63 | $mat-white $mat-grid, 64 | $mat-blue-100 $mat-grid, 65 | $mat-blue-100 2 * $mat-grid) center repeat; 66 | background-size: 2 * $mat-grid; 67 | } 68 | 69 | $top-right: $mat-grid * 2; 70 | $top-left: $mat-grid * 3; 71 | $bottom-right: $mat-grid * 4; 72 | $bottom-left: $mat-grid * 5; 73 | 74 | .custom-border-radius { 75 | @include material-popup-border-radius( 76 | $top-left $top-right $bottom-right $bottom-left); 77 | } 78 | 79 | .custom-background { 80 | @include material-popup-background-color($mat-blue); 81 | } 82 | -------------------------------------------------------------------------------- /example/material_popup_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_popup_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_progress_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_progress_example/lib/material_progress_demo.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_components/material_progress/material_progress.dart'; 7 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 8 | 9 | @GallerySectionConfig( 10 | displayName: 'Material Progress', 11 | docs: [MaterialProgressComponent], 12 | demos: [MaterialProgressDemoComponent], 13 | benchmarks: ['material_progress_init'], 14 | showGeneratedDocs: true, 15 | ) 16 | class MaterialProgressExamples {} 17 | 18 | @Component( 19 | selector: 'material-progress-demo', 20 | templateUrl: 'material_progress_demo.html', 21 | styleUrls: ['material_progress_demo.scss.css'], 22 | directives: [MaterialProgressComponent], 23 | ) 24 | class MaterialProgressDemoComponent {} 25 | -------------------------------------------------------------------------------- /example/material_progress_example/lib/material_progress_demo.html: -------------------------------------------------------------------------------- 1 | 6 |
7 |

Active progress only

8 |
9 | 10 |
11 | 12 |

Active and secondary progress

13 |
14 | 17 | 18 | 21 | 22 |
23 | 24 |

Indeterminate

25 |
26 | 27 |
28 | 29 |
30 |

Custom theme

31 |
32 |

material-progress-theme($indeterminate-color: $mat-red-100, $active-color: 33 | $mat-red-500, $secondary-color: $mat-red-200)

34 | 37 | 38 | 39 |
40 |
41 |
42 | -------------------------------------------------------------------------------- /example/material_progress_example/lib/material_progress_demo.scss: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | @import 'package:angular_components/css/material/material', 6 | 'package:angular_components/material_progress/mixins'; 7 | 8 | 9 | h2 { 10 | color: $mat-grey; 11 | font-family: Roboto, "Helvetica Neue", Arial, Helvetica, sans-serif; 12 | font-size: 16px; 13 | font-weight: normal; 14 | line-height: 40px; 15 | margin: 20px; 16 | } 17 | 18 | .custom-theme { 19 | @include material-progress-theme( 20 | $indeterminate-color: $mat-red-100, 21 | $active-color: $mat-red-500, 22 | $secondary-color: $mat-red-200); 23 | } 24 | -------------------------------------------------------------------------------- /example/material_progress_example/pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: material_progress_example 2 | author: Dart Team 3 | environment: 4 | sdk: '>=2.0.0-dev.68 <3.0.0' 5 | dependencies: 6 | angular: ^5.0.0 7 | angular_components: 0.9.1 8 | angular_gallery_section: 9 | path: ../../angular_gallery_section 10 | build_config: '>=0.2.6 <0.4.0' 11 | -------------------------------------------------------------------------------- /example/material_radio_example/build.yaml: -------------------------------------------------------------------------------- 1 | targets: 2 | $default: 3 | builders: 4 | angular_components|scss_builder: 5 | enabled: True 6 | -------------------------------------------------------------------------------- /example/material_radio_example/lib/material_radio_example.dart: -------------------------------------------------------------------------------- 1 | // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file 2 | // for details. All rights reserved. Use of this source code is governed by a 3 | // BSD-style license that can be found in the LICENSE file. 4 | 5 | import 'package:angular/angular.dart'; 6 | import 'package:angular_forms/angular_forms.dart'; 7 | import 'package:angular_components/material_icon/material_icon.dart'; 8 | import 'package:angular_components/material_radio/material_radio.dart'; 9 | import 'package:angular_components/material_radio/material_radio_group.dart'; 10 | import 'package:angular_components/model/selection/selection_model.dart'; 11 | import 'package:angular_gallery_section/annotation/gallery_section_config.dart'; 12 | 13 | @GallerySectionConfig( 14 | displayName: 'Material Radio', 15 | docs: [MaterialRadioComponent, MaterialRadioGroupComponent], 16 | demos: [MaterialRadioExample], 17 | benchmarks: [ 18 | 'material_radio_100_init', 19 | ], 20 | showGeneratedDocs: true, 21 | ) 22 | @Component( 23 | selector: 'material-radio-example', 24 | directives: [ 25 | NgFor, 26 | NgFormControl, 27 | NgModel, 28 | MaterialIconComponent, 29 | MaterialRadioComponent, 30 | MaterialRadioGroupComponent, 31 | ], 32 | templateUrl: 'material_radio_example.html', 33 | styleUrls: ['material_radio_example.scss.css'], 34 | ) 35 | class MaterialRadioExample { 36 | /// Example without a group 37 | bool custom = false; 38 | bool unselected = false; 39 | bool preselected = true; 40 | bool impossible = false; 41 | bool always = true; 42 | 43 | /// Example 1 using group 44 | List