angulardart / angular_components Goto Github PK

The official Material Design components for AngularDart. Used at Google in production apps.

Home Page: https://pub.dev/packages/angular_components

Dart 75.84% HTML 4.50% Shell 0.23% SCSS 18.28% Mustache 1.16%

angular_components's Introduction

Material design components for AngularDart. Powering some of Google's most sophisticated and mission-critical applications.

The AngularDart Components Gallery contains live examples and documentation.

This productive and stable set of widgets, contributed to by hundreds of Googlers, make debugging and deploying your app easier. Strict latency and testing policies make these widgets an excellent fit for projects using AngularDart.

The following packages provide the components as well as code generation for the AngularDart Components gallery.

angular_components

The actual components package that is published to pub.

angular_gallery

Code generators that create the gallery containing pages generated by the angular_gallery_section package.

angular_gallery_section

Code generators that create a gallery page containing documentation and examples from a @GallerySectionConfig annotation.

examples

Example packages for each of the components. Additionally, the examples/angular_components_example subdirectory contains the base package for building the AngularDart gallery.

angular_components's People

Contributors

Stargazers

Watchers

Forkers

filiph ilikerobots ronlobo dougroyal gtaylor20 arashbi denebdesign chalin kleopatra999 matanlurey ligustah vikdet serates sportsbitenews storagebot misterlobo takayuki-hayashi kal93 dglux alexanderjohr camsteffen nshahan ezhangle saraileon ebarahona xvrh amitport caoyarzom lejard-h yuandong jonahwilliams melmepham adjentz dart-land marianvilla zanuka-labs kartset nithya96 cuzmix tempbottle leftyio e-belair dalavancloud sabareeshkumar ctlr solid-software bilobi anse14 swissarmybud liviacirnu raymondzhaoy ayushin kulomon 7lynd tomcfoglio koji-k sanjay-k7r dzolotov hamidrezabstn dominickj-tdi christina-piereder gathe idohertyr 0xdw onlyangel michalpie richehmer datacoper ikakarov andesappal cooler-king timmmm aefalcon zainabed drochaoliveira caybear jmichiels hootchocolate ag-dart venkatalakshmi514 lexor90 edyu jirigranat martinory kfiross ccscoder jonhodgson silizza lukaszkolodziejczyk yuan-kuan icemanbsi kaialexis dangolbeeker vvoox mit-mit jlefley cnosltd angulardart-community solid-dmytrotkachuk insinfo

angular_components's Issues

Does not start in pub serve mode

Can't start using because of exception trown in pub serve mode:

ORIGINAL EXCEPTION: No top-level method '_url' declared.

NoSuchMethodError: method not found: '_url'
Receiver: top-level
Arguments: [...](anonymous function) @ VM9598:1

ORIGINAL STACKTRACE:(anonymous function) @ VM9598:1
#0      NoSuchMethodError._throwNew (dart:core-patch/errors_patch.dart:184)
#1      _url (package:angular2_components/src/framework_stabilizers/testability.dart:18:25)
#2      testabilitiesEnabled (package:angular2_components/src/framework_stabilizers/testability.dart:21:35)
#3      testabilitiesEnabled (package:angular2_components/src/framework_stabilizers/testability.dart:21:12)
...

in release mode after 'pub build' seems started properly.

No icons

Glyph component doesn't show the icon, just the title of it.

How about tests?

Angular components can be tested?
I'm looking for some way to test components.

MaterialRadio and other components break project

Hi. Upon upgrading from Angular 2.1.1 to Angular 2.2.0, my project instantly broke. Here is the otuput from attempting to load the angular2 transformer:

[Error from DirectiveMetadataLinker on angular2_components|lib/src/components/material_radio/material_radio.ng_summary.json with input angular2_components|lib/src/components/material_radio/material_radio.ng_meta.json]:
Missing identifier "MaterialRadioGroupComponent" needed by "MaterialRadioComponent" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "MaterialExpansionPanelSet" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "MaterialRadioGroupComponent" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "ReorderItemDirective" needed by "root" from metadata map
[Error from DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json with input angular2_components|lib/angular2_components.ng_meta.json]:
Missing identifier "ReorderListComponent" needed by "root" from metadata map
Multiple errors occurred:

- Transform DirectiveProcessor on angular2_components|lib/src/components/material_expansionpanel/material_expansionpanel_set.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class MaterialExpansionPanelSet
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal/iterable.dart 416                                        MappedListIterable.elementAt
  dart:_internal/iterable.dart 222                                        ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  dart:async/future.dart 144                                              Future.Future.microtask.<fn>
  dart:async/zone.dart 1150                                               _rootRun
  dart:async/zone.dart 1026                                               _CustomZone.run
  dart:async/zone.dart 953                                                _CustomZone.bindCallback.<fn>
  dart:async/schedule_microtask.dart 41                                   _microtaskLoop
  dart:async/schedule_microtask.dart 50                                   _startMicrotaskLoop
  dart:isolate-patch/isolate_patch.dart 96                                _runPendingImmediateCallback
  dart:isolate-patch/isolate_patch.dart 149                               _RawReceivePortImpl._handleMessage
  
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal                                                          ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  
- Transform DirectiveProcessor on angular2_components|lib/src/components/material_radio/material_radio_group.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class MaterialRadioGroupComponent
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal/iterable.dart 416                                        MappedListIterable.elementAt
  dart:_internal/iterable.dart 222                                        ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  dart:async/future.dart 144                                              Future.Future.microtask.<fn>
  dart:async/zone.dart 1150                                               _rootRun
  dart:async/zone.dart 1026                                               _CustomZone.run
  dart:async/zone.dart 953                                                _CustomZone.bindCallback.<fn>
  dart:async/schedule_microtask.dart 41                                   _microtaskLoop
  dart:async/schedule_microtask.dart 50                                   _startMicrotaskLoop
  dart:isolate-patch/isolate_patch.dart 96                                _runPendingImmediateCallback
  dart:isolate-patch/isolate_patch.dart 149                               _RawReceivePortImpl._handleMessage
  
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal                                                          ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  
- Transform DirectiveProcessor on angular2_components|lib/src/components/reorder_list/reorder_list.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class ReorderListComponent
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal/iterable.dart 416                                        MappedListIterable.elementAt
  dart:_internal/iterable.dart 222                                        ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  dart:async/future.dart 144                                              Future.Future.microtask.<fn>
  dart:async/zone.dart 1150                                               _rootRun
  dart:async/zone.dart 1026                                               _CustomZone.run
  dart:async/zone.dart 953                                                _CustomZone.bindCallback.<fn>
  dart:async/schedule_microtask.dart 41                                   _microtaskLoop
  dart:async/schedule_microtask.dart 50                                   _startMicrotaskLoop
  dart:isolate-patch/isolate_patch.dart 96                                _runPendingImmediateCallback
  dart:isolate-patch/isolate_patch.dart 149                               _RawReceivePortImpl._handleMessage
  
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal                                                          ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  
- Transform DirectiveProcessor on angular2_components|lib/src/components/scorecard/scoreboard.dart threw error: Queries inside constructors are deprecated, please replace with query annotations on fields in class ScoreboardComponent
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal/iterable.dart 416                                        MappedListIterable.elementAt
  dart:_internal/iterable.dart 222                                        ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  dart:async/future.dart 144                                              Future.Future.microtask.<fn>
  dart:async/zone.dart 1150                                               _rootRun
  dart:async/zone.dart 1026                                               _CustomZone.run
  dart:async/zone.dart 953                                                _CustomZone.bindCallback.<fn>
  dart:async/schedule_microtask.dart 41                                   _microtaskLoop
  dart:async/schedule_microtask.dart 50                                   _startMicrotaskLoop
  dart:isolate-patch/isolate_patch.dart 96                                _runPendingImmediateCallback
  dart:isolate-patch/isolate_patch.dart 149                               _RawReceivePortImpl._handleMessage
  
  package:angular2/src/transform/common/type_metadata_reader.dart 1280:3  _reportDeprecation
  package:angular2/src/transform/common/type_metadata_reader.dart 1256:7  _getCompileDiDependencyMetadata.<fn>
  dart:_internal                                                          ListIterable.toList
  package:angular2/src/transform/common/type_metadata_reader.dart 1270:6  _getCompileDiDependencyMetadata
  package:angular2/src/transform/common/type_metadata_reader.dart 229:13  _CompileTypeMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 673:10  _DirectiveMetadataVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:angular2/src/transform/common/type_metadata_reader.dart 72:10   TypeMetadataReader.readTypeMetadata
  package:angular2/src/transform/directive_processor/rewriter.dart 98:10  _NgMetaVisitor.visitClassDeclaration
  package:analyzer/src/dart/ast/ast.dart 1847:15                          ClassDeclarationImpl.accept
  package:analyzer/src/dart/ast/ast.dart 7688:20                          NodeListImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 92:30  _NgMetaVisitor.visitCompilationUnit
  package:analyzer/src/dart/ast/ast.dart 2439:15                          CompilationUnitImpl.accept
  package:angular2/src/transform/directive_processor/rewriter.dart 52:16  createNgMeta.<async>.<fn>.<async>
  
- Transform DirectiveMetadataLinker on angular2_components|lib/src/components/material_radio/material_radio.ng_summary.json threw error: Missing identifier "MaterialRadioGroupComponent" needed by "MaterialRadioComponent" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "MaterialExpansionPanelSet" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "MaterialRadioGroupComponent" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "ReorderItemDirective" needed by "root" from metadata map
- Transform DirectiveMetadataLinker on angular2_components|lib/angular2_components.ng_summary.json threw error: Missing identifier "ReorderListComponent" needed by "root" from metadata map
dart:isolate  _RawReceivePortImpl._handleMessage

Formatting option on material-input

I'm using a material-input field inside a panel with a background color.
The whole material-input inherits the background color, but I'd like to assign the input element (not the underline below) a clearer color (not necessarily white) because it is a wide standard to have input fields with a light color background.
Anyway, I thing it could be useful to have the possibility to style the input element background and text colors.
Is there a way to do this that I couldn't figure out or shoudl this be considered a request?

material-input and material-button next to each other using all space

Is there a way to put a material-input next to a material-button and let the input use up all available space horizontally? Something like flex-grow or similar?

Roadmap

Is it any roadmap about the elements that will be available and when. I saw in dart summit the ACX gallery with all elements. Any plans?

Popup position incorrect

When using a flex layout the popup appears off screen/behind the screen making a x-scrollbar appear in the process. You can see scrollbar appear on the body in the screen shots.

Also there is currently no way that I can see to force the top right alignment. This type of option would also alleviate this issue.

Help with material-tooltip-text

Original question by @dejan-marlovic

hi, can you please help me? I know that this is not the right place to ask for help about this but I could not find solution to this anywhere else

im trying to use:
<span tooltipTarget #ref="tooltipTarget">
Explicitly declare a tooltip component

<material-tooltip-text [for]="ref">
Allows for formatted text.

and I get an error:
Transform TemplateCompiler on tooltip|lib/app_component.ng_meta.json threw error: Template parse errors:
line 4, column 21 of AppComponent: ParseErrorLevel.FATAL: There is no directive with "exportAs" set to "tooltipTarget"
#ref="tooltipTarget"

I can use other components fine

Glyph breakage due to disconnect.me strict protection mode in Firefox

This is an edge case and I am not sure where to log it.

The sample page (https://dart-lang.github.io/angular2_components_example/) has glyphs fetched from font.googleapis.com. These glyphs are not displayed when the disconnect.me strict protection mode is enabled in Firefox.

OS - Ubuntu 16.04.1
Browser - Firefox 49.0
Steps to reproduce -

Menu -> Preferences -> Privacy -> Change Block List.
Select the Disconnect.me strict protection option.
Navigate to https://dart-lang.github.io/angular2_components_example/.
Expected - Glyphs are shown
Actual - Placeholder text is shown instead of glyphs. Additionally, a shield icon is shown on the address bar next to the green lock.

Lottery Simulator example doesn't work with version 0.2.2 - tabs don't show

Hello,

I've followed all the example but with the latest Dart/Angular2/angular2_components.
Everything works except for the last step when the divs are replaced by "material-tab".
To be sure that I made no mistake I replaced the code by the "step-4" from github and it still doesn't work.
I managed to run the "component example" page with the same versions, and the tabs are ok, so there must just be something missing in the demo.

Steps to reproduce:

git clone https://github.com/dart-lang/one-hour-codelab.githttps://github.com/dart-lang/one-hour-codelab.git
cd one-hour-codelab\angular2_components\4-final\
pub get
pub deps
pub serve

Here everything is working :)

vi pubspec.yaml

pub get
Resolving dependencies...
> angular2 2.2.0 (was 2.1.1)
> angular2_components 0.2.2 (was 0.2.0)
Changed 2 dependencies!

pub deps
pub serve

Here it doesn't work...

Glyph touch button

Is the a way to implement de touch glyph button inside an input.
For example a glyph button to show the password content.

material-input of type number does not validate

I try to let the user only input a number in a material-input and therefore set the type accordingly.
In the source of the material-input is stated:

/// - errorMsg -- The error msg to be shown on the input if the max characters
/// are hit or the msg for an invalid number in the case of type = "number"

But no error is shown on invalid user input?

Make material-input read-only

I could not find any way to make a material-input field readonly.
Am I wrong?

radio-group ngModel radio element not selected after change

The simple app from this repo runs as expected initially and displays this radio group with the currentHero selected:

This is an excerpt from the template used to generate the view:

    <material-radio-group [(ngModel)]="currentHero">
        <material-radio *ngFor="let h of heroes" [value]="h">
            {{h.name}} ({{h.id}})
        </material-radio>
    </material-radio-group>

But if you click "Reset Heroes", the current hero is no longer selected in the radio group:

The reset action code is:

  void resetHeroes() {
    heroes = Hero.mockHeroes.map((hero) => new Hero.copy(hero)).toList();
    currentHero = heroes[0];
  }

The full source for this demo (generated from a stagehand Angular web app base), is here.
This app uses 3.0.0-alpha+1 version of Angular and the latest ACX.

This issue was originally discovered while working on the AngularDart 3.x sample for the Template Syntax page.

cc @kwalrath @filiph

feature request - drag and drop support

me and few others use this to do drag and drop with Dart apps.
https://github.com/marcojakob/dart-dnd

But we are wondering if you already support it, or are planning to support Drag and Drop in this library anyway ?
marcojakob/dart-dnd#16

It will help us to know the best roadmap for the library.

ExpansionPanel expanded attribute does not work.

The problem is that the isExpanded setter requires a bool input, but a String value is passed in instead, therefore it is always went to the else clause.

@Input('expanded')
  set isExpanded(bool value) {
    if (value == _isExpanded) return;
    if (value) {
      expand(byUserAction: false);
    } else {
      collapse(byUserAction: false);
    }
  }

In the following function, the ctx.expanded is true (bool), but import11.interpolate0(ctx.expanded) returns a string value "true".

void detectChangesInternal() {
    bool changed = true;
    dbg(0,0,2);
    changed = false;
    dbg(0,1,27);
    final currVal_0 = import11.interpolate0(ctx.expanded);
    if (import11.checkBinding(_expr_0,currVal_0)) {
      _MaterialExpansionPanel_0_4.isExpanded = currVal_0;
      changed = true;
      _expr_0 = currVal_0;
    }
    dbg(0,0,59);
    final currVal_1 = 'Algo Server Debug';
    if (import11.checkBinding(_expr_1,currVal_1)) {
      _MaterialExpansionPanel_0_4.name = currVal_1;
      changed = true;
      _expr_1 = currVal_1;
    }
    dbg(0,1,51);
    final currVal_2 = import11.interpolate0(false);
    if (import11.checkBinding(_expr_2,currVal_2)) {
      _MaterialExpansionPanel_0_4.showSaveCancel = currVal_2;
      changed = true;
      _expr_2 = currVal_2;
    }
    if (changed) { _appEl_0.componentView.markAsCheckOnce(); }
    if ((identical(this.cdState, ChangeDetectorState.NeverChecked) && !import11.AppViewUtils.throwOnChanges)) { _MaterialExpansionPanel_0_4.ngOnInit(); }
    this.detectContentChildrenChanges();
    this.detectViewChildrenChanges();
  }

dynamic interpolate0(dynamic p) {
  if (p is SafeValue) return p;
  return p == null ? '' : (p is String ? p : p.toString());
}

Why set isExpanded(bool value) does not complain a wrong type is provided (in Dartium, it does not complain, seems wrong to me )?

Material icons

Material icons needs to import an external css inside the html. My question is if there is any way to include inside the css selector inside the component like this:
styleUrls: const ['app_component.css','https://fonts.googleapis.com/icon?family=Material+Icons'],

Provide explanation why to use these components over the Polymer ones

The Polymer project implements a whole range of Material components. These are supposed to be usable from any framework and there is even a PolymerDart implementation of (most of?) them.

It is not clear to the user (incl. me) what the added value is of using these components over the ones of the Polymer project.
I think it would be helpful to have a small explanatory section on this in the README.

Incorrect Import statement in Glyph Documentation

The class docs for the Glyph component say to include the following link at the top of the page.

<link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/icon?family=Material+Icons+Extended">

However, none of the icons show up using this link. The example code uses this link instead:

<link rel="stylesheet" type="text/css" 
    href="https://fonts.googleapis.com/icon?family=Material+Icons">

which works properly.

I think this is because the Glyph component adds the .material-icons class to a tag, but that class is called .material-icons-extended in the extended stylesheet.

The docs should be changed to reflect this, and I guess the extended set of icons should be supported eventually.

Glyphs - Could not find asset angular2|lib/src/platform/dom/dom_renderer.dart

Apparently there is an error in this line.

I am attempting to use a GlyphComponent, and here is dartjs's output:

Loading source assets...
Loading angel_configuration, dart_to_js_script_rewriter and angular2/transform/codegen transformers...
Loading angular2 transformers...
Building angel...
[Info from Dart2JS]:
Compiling angel|web/main.dart...
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:11:1:
Can't read 'package:angular2/src/platform/dom/dom_renderer.dart' (Could not find asset angular2|lib/src/platform/dom/dom_renderer.dart.).
import 'package:angular2/src/platform/dom/dom_renderer.dart'
    show DomRootRenderer;
[Warning from Dart2JS]:
web/main.dart:1:78:
Library 'package:angular2/platform/browser_static.dart' doesn't export a 'initReflector' declaration.
Try removing 'initReflector' from the 'show' clause.
import 'package:angular2/platform/browser_static.dart' show bootstrapStatic, initReflector;import 'main.template.dart' as ngStaticInit;
                                                                             ^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:12:10:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
    show DomRootRenderer;
         ^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.template.dart:31:67:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
export 'package:angular2/src/platform/dom/dom_renderer.dart' show DomRootRenderer;
                                                                  ^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.dart:20:10:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
    show DomRootRenderer;
         ^^^^^^^^^^^^^^^
[Warning from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/utils/browser/dom_service/angular_2.template.dart:19:67:
Library 'package:angular2/src/platform/dom/dom_renderer.dart' doesn't export a 'DomRootRenderer' declaration.
Try removing 'DomRootRenderer' from the 'show' clause.
import 'package:angular2/src/platform/dom/dom_renderer.dart' show DomRootRenderer;
                                                                  ^^^^^^^^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
                                                    ^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
                                                    ^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
                                                    ^^^^^^^^
[Error from Dart2JS on angel|web/main.dart]:
packages/angular2_components/src/components/focus/keyboard_only_focus_indicator.template.dart:27:53:
Not a compile-time constant.
const [const <dynamic>[ElementRef], const <dynamic>[Renderer], const <dynamic>[DomService]],
                                                    ^^^^^^^^
[Dart2JS on angel|web/main.dart]:
10 warning(s) and 1 hint(s) suppressed in package:angular2_components.
[Info from Dart2JS]:
Took 0:00:13.267029 to compile angel|web/main.dart.
Build failed.

Not sure why this would occur. If you need any more information about the error, let me know, and I will provide it. :)

TODO when Angular2 supports conditionally adding/removing attributes

https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/material_button/material_button.dart#L13

angular/angular#2869 is fixed

A value of null causes the attribute to be removed.

MaterialInputComponent with required attribute invalid even though untouched

When adding a material-input to a form with the required attribute set, it will be marked as invalid immediately as soon as the page loads, is there any way to test/mark the invalid state of the component only after the user has interacted with it?

Material Toolbar Component

I actually built one last night out of necessity (using these components in a project), and once I get home, I'll upload it to Github and share the link here.

Feel free to include it in this package. It's more or less a port of the Polymer paper-toolbar.

material-expansionpanel-set seems not to work under a material-tab

The problem is rather simple, see the template below:

<material-tab-panel>
  <material-tab label="test">
    <material-expansionpanel-set>
      <material-expansionpanel name="panel 1">
        Test 1
      </material-expansionpanel>
      <material-expansionpanel name="panel 2">
        Test 2
      </material-expansionpanel>
    </material-expansionpanel-set>
  </material-tab>
</material-tab-panel>

The Dartium browser renders nothing. If I remove the surrounding material-tab-panel and material-tab the expansion-panels are rendered with the expected accordion behavior. In reverse without the expensionpanel-set the tab is rendered correctly. It seems that the combination causes the problem. Compiling to JavaScript does not change this outcome.

Modal shieldScroll

It would be great to have an optional scroll shield, because when i use a modal i doesn't want to allow the user to scroll the background.

material-input inputText binding not working

Hello,

I can't get the example from https://www.dartdocs.org/documentation/angular2_components/0.1.1/angular2_components/MaterialInputComponent-class.html to work:

<material-input [(inputText)]="text">

Basically, there is no way how to set the value of the input. Am I missing something obvious?

Thanks

Position of the popup is not updated when MDL drawer expands or collapses

Radio buttons are distorted on IE11, see pictures attached

both photos taken from the live example, first one is on IE11, second is Opera

List should keep highlighting selected item even after losing focus

When the list doesn't have focus it's not clear what item is selected

with focus it's shown fine

I think it should highlight the selected option also when the list doesn't have the focus.

Is there a way to achieve that?

Setting button as disabled does not prevent triggering a click event

When a button is disabled and the user moves the mouse over it the cursor changes to 'disabled' but if the user desides to click the button anyway a click event is generated.

To reproduce the issue:

<material-button (click)="clicked()" disabled>Disabled</material-button>
	
void clicked() {
    print('clickety-click !!');
}

Open Max Height Dialog - max-height style does not work correctly in IE 11

In IE Version 11.0.9600.18524

If I do the following:
https://dart-lang.github.io/angular2_components_example/
Open the "Modal Dialogs" "Basic no-frills dialogs" "Open Max Height" and then keep clicking "Add Some Text", eventually the footer moves below the display pane.

In Example Gallery, Reorder list, reorder fails on Android Chrome

In Example Gallery, "Reorder List" sample, reordering items on Android Chrome just make items disappear.

If you tap and hold an item, the item will simply disappear (after the haptic feedback)

Os Android 6.0.1
Chrome 54.0.2840.85

material-tab-panel does not update labels when material-tab label is changed.

Inside a material-tab-panel I have the following:

    <material-tab *ngFor="let tab of tabs" [label]="tab.title"></material-tab>

In other code, I am able to update the tab.title, but do not see results in browser.

I am able to see results in browser for <div *ngFor="let tab of tabs">{{tab.title}}

glyph icons don't work with ViewEncapsulation.Native

When ViewEncapsulation.Native is used the fonts don't render. You have to include the glyph icons import / css on every component where you want to use the icon.

Can the components be constructed so they always work correctly regardless of the encapsulation method used?

Note: I'm using Polymer for the main layout components and trying to use angular2_components for everything else where possible.

dropdown animation doesn't consider size from PopupSizeProvider

During the animation the full size of the content is used and only afterwards the size from the provider is applied.
This makes the vertical window scrollbar appear during the animation.

Meta issue: Expose our SASS theming API to end-users

Support the file input type (file uploader)

Currently the file cannot be passed as a type to the MaterialInput component.

Material button glyph

When use an icon button i have problems styling. I got a 50x50px material button but the glyph icon doesn't center inside. It generates a div ng-content not centered. Also i want to ask if is possible a rectangular icon button instead of using the glyph ripple effect.

[Q] Any plans to provide layout components ?

Layout components are super helpful and are the building block of your app layout. Many material design component libraries provide these layout components out of the box.

Eg: Material Design Lite (https://getmdl.io/components/index.html#layout-section)

Does it make sense to provide these as dart angular2 components?

Fixed material-tab height

It would be great to get the ability to control a material tabs height. Making it take up the remaining height in the material-tab-panel.

Changing theme

Is it currently possible to change what colors are using for the material elements?

MaterialInputComponents should fire a DOM event on user key press

Say I have a form:

<form (submit)="handleSubmit()">
  <material-input floatingLabel label="Username" [(ngModel)]="username"></material-input>
  <material-button (click)="handleSubmit()" raised>Submit</material-button>
</form>

It is impossible for me automatically submit the form when the user presses enter inside the textbox. It would be great if there were an EventEmitter such as:

<material-input onKeyDown="handleKeyDown($event)"></material-input>

material-input doesn't work with pageloader package

Here is a sample of what i try to do everything work except one thing.
The PageLoaderElement type method doesn't work on the material-input component.

The value of username and password are not modified.
Do you have any idea why this doesn't work ?

Any documentation

No way to see some examples of use or some documentation to start with the component.

Pubspec needs to be stricter: recommend >=2.10 < 2.2.0

We have API changes and deprecations in 2.2.0 that could affect components.

No provider for ManagedZone! with material-button

I added a button to my application

<material-button raised #dialog.show()>Show Dialog</material-button>

Now I get

Observatory listening at http://127.0.0.1:46411/
>EXCEPTION: Error in asset:angular2_components/lib/src/components/material_button/material_button.html:10:0
  EXCEPTION: Error in asset:angular2_components/lib/src/components/material_button/material_button.html:10:0
  ORIGINAL EXCEPTION: No provider for ManagedZone!
  ORIGINAL STACKTRACE:
  #0      _NullInjector.get (package:angular2/src/core/di/injector.dart:11:7)
#1      MapInjector.get (package:angular2/src/core/di/map_injector.dart:28:25)
#2      ReflectiveInjectorImpl._getByKeyDefault (package:angular2/src/core/di/reflective_injector.dart:804:18)
#3      ReflectiveInjectorImpl._getByKey (package:angular2/src/core/di/reflective_injector.dart:770:14)
#4      ReflectiveInjectorImpl.get (package:angular2/src/core/di/reflective_injector.dart:528:17)
#5      ElementInjector.get (package:angular2/src/core/linker/element_injector.dart:17:37)
#6      ElementInjector.get (package:angular2/src/core/linker/element_injector.dart:17:37)
#7      ViewMaterialButtonComponent0.createInternal (package:angular2_components/src/components/material_button/material_button.template.dart:99:166)
#8      AppView.createComp (package:angular2/src/core/linker/app_view.dart:159:12)
#9      DebugAppView.createComp (package:angular2/src/debug/debug_app_view.dart:63:30)

Color implements equals operator but not hashCode

The Color class implements equals operator (==) but not hashCode

[Q] Make intl package optional

Hello, would it be possible to make the intl package optional or decrease its size?
It takes around 400kb and as far as I have seen it is only used to get localization for default texts and messages.
I guess there is no way to use tree-shaking to reduce the size?

material-ripple takes entire screen

i'm setting up a showcase page based on the project showcase. I defined a simple custom card component, but adding a material-ripple to it, it takes the entire visibile content above the fold (if the page is scrollable, the ripple doesn't extend to the part below the fold).
this is a screenshot while clicking on the page lower right:

<div class="simple-card">
  <img class="simple-card__image"
       [src]="imageUrl"/>
  <p class="simple-card__text">
    {{text}}
  </p>
  <material-ripple></material-ripple>
</div>

.simple-card {
    display: flex;
    align-items: center;
    height: 56px;
    min-width: 288px;
    max-width: 368px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';

@Component(
    selector: 'qui-simple-card',
    styleUrls: const ['qui_simple_card.css'],
    templateUrl: 'qui_simple_card.html',
    directives: const [
      materialDirectives,
      materialInputDirectives
    ],
    providers: const [materialProviders])
class QuiSimpleCardComponent {
  @Input('img-src')
  String imageUrl;

  @Input()
  String text;
}

I expected the ripple to be confined inside my card borders. Am I doing something wrong or is this a bug?
using latest dart 1.20.1 and angular2 2.0