mseemann / angular2-mdl-ext Goto Github PK

We could use https://github.com/mseemann/angular2-mdl/tree/5da242caa9878f8b651aca03956bbf44f58776f2/src/app/prism

Maybe it could be extracted into simple npm package?

Hi :)

You made a change a few days ago, this change resolves an error that appears when lazy loading a module that includes expansion panels. Could you please push up a new version to NPM?

I'm using the expansion panel with an *ngFor loop

<mdl-expansion-panel-group #panelGroup>
<mdl-expansion-panel *ngFor="let user of users; let i = index">
...

The toggles now work seperately from each other. So panel 1 does not collapse panel 2 when it is expanded etc

For example
<button (click)="panelGroup.getPanel(0).toggle()">Toggle 1</button
will expand and collapse the first panel, but it does nothing with a second or third panel

I'm using the mdl-select with cascading selects.
I have 3 select in a vertical layout.
I have a problem when I select the second one. It has a long list (10 options), so instead of opening down (I guess because it feels there is no space) it opens upward. The problem is that I have e fixed navbar and the list goes under it, so I'm not able to reach and select the first couple of items on the list.
This is happening on iOS safari not on desktop.

Is there a way to always open the option list down?

When installing select via npm, I get the following error:

ERROR in ./~/@angular2-mdl-ext/select/select.js
Module not found: Error: Can't resolve '../popover' in '/home/simon/Projekte/stay-and-charge-app/node_modules/@angular2-mdl-ext/select'

Installing popover solves the issue.

Not sure what is happening, but yarn install deletes the extensions packages. Any ideas?

Version 2.1.2 of gulp-clean-css just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As gulp-clean-css is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I'm getting the following error /node_modules/@angular-mdl/expansion-panel/expansion-panel.component.ts (20,38): Cannot find module '@angular/platform-browser/ani
mations'.)

I think this is because is targeting Angular 4.

I don't know how to install a package version for Angular 2.2.4

I'd like to have gray colored text label for placeholder of mdl-select, coherently to other mdl fields.

See the plnkr:
http://plnkr.co/edit/3GHZHgxOGhDdrfAQHlv2?p=preview

Some recent changes from #140 may have affected the placeholder for #116 and this issue might need some discussion to decide on how the placeholder text on the select should work.

The work done in #116 assumed that if a value wasn't present in an option the the placeholder should appear instead of the text of whatever the field was. If this isn't clear, the demo app has an example where "County" is the placeholder and selecting none used to revert back to the placeholder "County" instead of displaying the selected "None" label (like it does now).

I prefer the way it originally worked because it allowed a user to default back to the original state with a placeholder. Feel free to discuss.

I get the following error when I build in Windows, but I don't get it with a Nix platform.

Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\components\select\option.ts:15:12
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\components\select\select.ts:39:14
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\app\app.component.ts:14:12
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\app\app.component.ts:29:12
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\app\app.component.ts:30:11
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\app\popover\popover.component.ts:12:12
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\app\select\select.component.ts:16:12
Cannot find name 'require'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\main.ts:5:4
Cannot find name 'process'.

ERROR in [default] C:\Users\user\Documents\GitHub\angular2-mdl-ext\src\e2e-app\polyfills.ts:3:0
Cannot find name 'require'.

I installed @angular2-mdl-ext yesterday and received an error that there was a missing variable $popover-direction-up-bottom-offset.

I added the $popover-direction-up-bottom-offset: 20px; to my styles.scss file to make the error go away. Everything is working now. Have I missed something?

Hey guys! Wanted to know, if it's possible to use this component not only with MDL, but with also with MDC-Web?

Thanks!

Version 3.12.3 of node-sass just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As node-sass is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

What am I missing?

I get the error Can't construct a query for the property "optionComponents" of "MdlSelectComponent" since the query selector wasn't defined. when I try to use the select component.

My code is:

    <mdl-select [(ngModel)]="heroId">
        <mdl-option *ngFor="let h of heroes" [value]="h.id">{{h.name}}</mdl-option>
    </mdl-select>

The code is very similar to the sample in docs, I think the problem is the update in Angular2.

• generate the module metadata with ngc
• generate es2015 modules (esm)
• add module property to package.json
• provide a umd bundle verison

Select with autocomplete.

Hello team,

I am referring the single panel expansion example from here, but I am not able to close or toggle the expansion panel. Following is my HTML code:

<mdl-expansion-panel> <mdl-expansion-panel-header> <mdl-expansion-panel-header-list-content>Primary Title</mdl-expansion-panel-header-list-content> <mdl-expansion-panel-header-secondary-content>Secondary value</mdl-expansion-panel-header-secondary-content> </mdl-expansion-panel-header> <mdl-expansion-panel-content> <mdl-expansion-panel-body> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </mdl-expansion-panel-body> <mdl-expansion-panel-footer> <mdl-button>Cancel</mdl-button> <mdl-button>Save</mdl-button> </mdl-expansion-panel-footer> </mdl-expansion-panel-content> </mdl-expansion-panel>

This is the exact code copied from the above url.

How to make expansion panel opened by default instead of closed?

When using the expansion panel in a group, content is misaligned if the mdl-expansion-panel-header-list-content text content is not the same for each expansion panel.

until now npm publish fails if the version didn't changed. try to find a way to only publish npm packages with a changed version number

Hi,
I followed the steps given on the demo site. But my select dropdown is always open.

<mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}

Do I need to set any property for the default behavior?

There is a post on stack overflow for the same issue: http://stackoverflow.com/questions/42543821/how-to-configure-css-associated-to-mdl-select-on-angular-2-quickstart-solution

BTW, I am using Angular CLI and Angular2-MDL.

Version 3.13.0 of node-sass just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As node-sass is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

We are not able to navigate using tab button from mdl-textfield to mdl-select component. mdl-select focusing is omited.

changing 1 to 0 for line

Hi @mseemann, currently, the module only support disabled option for mdl-select.
Could you please add disabled option for mdl-option also?

For now, I am using workaround by adding a .disabled css class to mdl-option as follow,

mdl-select {
  mdl-option.disabled {
    pointer-events: none;
    cursor: default;
  }
}

However, when I click on the disabled option, mdl-popover is still closed.

Theming customization are not applied. You can see it by looking at the active selection text color - its not $palette-blue-500;.

We need to fix it in e2e-app and document how to apply customization.

This requires manual import of SCSS per component?

What is the need for BrowserModule being imported ? Please use CommonModule so the component can be used in lazy loaded modules, rather than top level module.

I'm using latest angular 4 with mdl select and I used the code given in the demo . And it is behaving like this

Specification given here:

https://material.google.com/components/expansion-panels.html#

Continued from mseemann/angular2-mdl#116

hi!

When you try use dalogServiceAlert angular says:

ERROR Error: Renderer.animate is no longer supported! at RendererAdapter.animate (core.es5.js:10470) [angular] at MdlDialogHostComponent.show (mdl-dialog-host.component.js:79) [angular] at vendor.bundle.js:29645:39 [angular] at Object.onInvokeTask (core.es5.js:4116) [angular] at ZoneDelegate.invokeTask (zone.js:397) [angular] at Zone.runTask (zone.js:165) [<root> => angular] at ZoneTask.invoke (zone.js:460) [<root>] at timer (zone.js:1540) [<root>]

Change detection is not working correctly within Select component, when the options set is replaced.

Steps to reproduce:

1. Include the following component into your code:

   import { Component, ViewChild } from '@angular/core';
   
   @Component({
   selector: 'app-select-bug',
   template: `
     <mdl-select
       placeholder="From"
       [(ngModel)]="selectOne"
       (change)="handleChange($event, 'from')">
       <mdl-option *ngFor="let option of groupOne" [value]="option">
         {{option}}
       </mdl-option>
     </mdl-select>
     <mdl-select
       #select
       placeholder="To"
       [(ngModel)]="selectTwo"
       (change)="handleChange($event, 'to')">
       <mdl-option *ngFor="let option of groupTwo" [value]="option">
         {{option}}
       </mdl-option>
     </mdl-select>
   `
   })
   export class SelectBugComponent {
   groupTwoPure: string[] = ['two', 'three', 'four', 'five'];
   groupOne: string[] = ['one', 'two', 'three'];
   groupTwo: string[];
   selectOne:string;
   selectTwo:string;
   data:string;
   @ViewChild('select') select;
   constructor() {
     this.groupTwo = [...this.groupTwoPure];
   }
   
   handleChange(value, handler) {
     if(handler === 'from') {
       this.groupTwo = this.groupTwoPure.filter((value, index) => {
         return index >= this.groupOne.indexOf(this.selectOne) - 1;
       });
       this.select.reset();
     }
   
     this.data = `From ${this.selectOne} to ${this.selectTwo}`;
     console.log(this.data);
   }
   
   }

2. Pick three from the first select

3. Pick one from the first select

4. Try picking two from the second select

As a workaround I have added a change subscription to optionsComponent's ngAfterViewInit method, as seen here:

public ngAfterViewInit() {
        this.optionComponents.changes.subscribe( change => {
          this.bindOptions();
        });
        this.bindOptions();
        this.renderValue(this.ngModel);
    }

Another workaround is to wrap reset method in setTimeout to give the change detection mechanism enough time to digest changes, but it is not reliable and results in bad UX (visual delay on pick).

When set people https://github.com/mseemann/angular2-mdl-ext/blob/master/src/e2e-app/app/select/select.component.ts#L23 async, i.e.

  people: any[] = [];
  
  ngOnInit() {
    // ...
    setTimeout(() => {
      this.people = null;
      this.people = [
        {id: 1, name: 'Bryan Cranston'},
        {id: 2, name: 'Aaron Paul'},
        {id: 3, name: 'Bob Odenkirk'},
        {id: 4, name: 'Dean Norris'},
        {id: 5, name: 'Jonathan Banks'},
        {id: 6, name: 'Seal Henry Olusegun Olumide Adeola Samuel'},
        {id: 7, name: 'Rami Malek'},
        {id: 8, name: 'Christian Slater'},
        {id: 9, name: 'Martin Wallström'},
        {id: 10, name: 'Angela Sarafyan'},
        {id: 11, name: 'Robert Pattinson'},
        {id: 12, name: 'Billy Bob Thornton'}
      ];
    }, 250);
  }

then initial selection of is not rendered.

Dont know how to fix it yet.

after importing [email protected] inside my angular server side render 4.0.1 project i have "ReferenceError: Event is not defined" on node server

__metadata('design:paramtypes', [Event])
in this snippet
__decorate$2([
_angular_core.HostListener('document:click', ['$event']),
__metadata$2('design:type', Function),
__metadata$2('design:paramtypes', [Event]),
__metadata$2('design:returntype', void 0)
], MdlPopoverComponent.prototype, "onDocumentClick", null);

after i commented this code new error popup: KeyboardEvent is not defined __metadata('design:paramtypes', [KeyboardEvent]),

on client side render angular 2.4 it works fine

This module stops other modules from using animations. This shouldn't be within the package. Only for testing purposes.

https://github.com/mseemann/angular2-mdl-ext/blob/master/src/components/expansion-panel/expansion-panel.component.ts#L208

onArrowDown method does not select option, for case, where there is no already selected option.

Already fixed here: https://github.com/adasq/angular2-mdl-ext/commit/9ad19178583650b7208ff47b2aadba19db2c1a2d

In your demo site, currently, I can double click to select the text inside input field (e.g 'France') of mdl-select when mdl-select.disabled is set to true.

<mdl-select [(ngModel)]="countryCode" placeholder="Select country" disabled="true">
  <mdl-option *ngFor="let c of countries" [value]="c.code">{{c.name}}</mdl-option>
</mdl-select>

It is not possible with the default html . It would be nice if you can fix the problem.

currently the popover will open right of the target that opens it. This should be configurable to open left, right, up, down, etc. It should also be smart enough to know when it's reached the edge of the window. It currently opens to the right, OFF the screen and has no ability to open to the left of it. This makes the component unusable for targets that sit on the right side of the screen.

1. Component's height ignores being out of view. A possible solution might be to check available height via JS. But issue is fixable on users' end, using custom css. ( As a side issue, you have !important here, which seems to be unnecessary, and forces user to use !important as well)
   
2. Text overflow is ignored when select is focused and options list is closed as seen here:
   

Hello,

I was wondering if support for 'required' attribute for mdl-select was planned anytime soon ?

Thanks !

Version 0.36.4 of rollup just got published.

This version is covered by your current version range and after updating it in your project the build failed.

As rollup is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Your Greenkeeper Bot 🌴

I would think the arrow keys should work like they do for a single select. But with maybe enter or spacebar toggling the selection and esc closing the dropdown.

Not familiar yet with Webpack 2, but would you be able to help?

Here's my module.rules settings:

        {
          test: /\.scss$/,
          use: [
            'raw-loader',
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  '../node_modules/@angular2-mdl-ext/popover',
                  '../node_modules/@angular2-mdl-ext/select'
                ]
              }
            }
          ]
        },

Popover requires peer dependency of exact version of [email protected] resulting in this:

[email protected]
├── @angular2-mdl-ext/[email protected] 
├── @angular2-mdl-ext/[email protected] 
└── UNMET PEER DEPENDENCY [email protected]

Am I missing something here, or package.json needs to be updated ?

If possible I'd like that mdl-support will support reactive forms.

I try to use mdl-popover.
When the popover is shown it does not hide when I click outside the popover area.
(only when I explicit call the toggle method)

unsuccessfully i am trying to pick first value of an array of objects. but without multiple="true" this code works fine

 sphere =[{id:0,name:'wewe'},{id:1,name:'ghjghj'}]

<mdl-select [(ngModel)]="sphere" multiple="true" placeholder="Select countries">
      <mdl-option mdl-ripple *ngFor="let c of work_sphere" [value]="c.id">{{c.name}}</mdl-option>
</mdl-select>

I tried to create a plunk with a minimal reproduction but could not find any public deploys of this repository:

http://plnkr.co/edit/6crj2W

The use case is, I have a component that is pulling in data, creating child components and passing in populated forms. I see that the initial value is working fine using static forms so I'm not 100% sure this isn't something I'm doing wrong either.

• Clone project https://github.com/racerhere/test-angular-mdl
• npm install
• Go to http://localhost:4200/eager. Everything works when modules are eagerly loaded.
• Go to http://localhost:4200/lazy. See console for

Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.

• Comment the import of MdlExpansionPanelModule in src\app\shared\shared.module.ts (lines 8 and 19).
• Go to http://localhost:4200/lazy. Works fine now.

Setting up a simple mdl-select (as per sample) and the dropdown is always displayed and the down arrow is located underneath the text area and not to the right.

<mdl-select *ngFor="let f of filters" [(ngModel)]="selectedFilters" multiple="true" placeholder="Select {{f.name}}">
    <mdl-option *ngFor="let v of f.values" [value]="v.id">{{v.name}}</mdl-option>
</mdl-select>

Even if I copy/paste the sample app code from github it still renders incorrectly.

Or am I doing something wrong?