fuelinteractive / fuel-ui Goto Github PK

Hey all,

I'mm currently getting this error when i'm trying to use fuel-ui. Would anyone have any idea why this is occuring? and would angular rc3 be breaking this?

This occurs whenever I try to use any fuel-ui component

Hi,

I'm using Gulp (just migrated from ng-cli) to build our angular2 project where I use Fuel-ui.

We have a strange error. We use Fuel-ui's alert component in one of our components. If I reference fuel-ui from
node_modules/fuel-ui folder in system.config.js everything is fine. If I reference it from build/vendor/fuel-ui, it fails with the following error:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'
platform-browser.umd.js:1900 EXCEPTION: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'BrowserDomAdapter.logError @ platform-browser.umd.js:1900
platform-browser.umd.js:1900 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:1900
platform-browser.umd.js:1900 Error: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'
    at new BaseException$1 (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:971:27)
    at CompileMetadataResolver.getViewDirectivesMetadata (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:12539:27)
    at RuntimeCompiler._getCompiledTemplate (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14619:40)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14637:84)
    at eval (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:81)
    at Array.forEach (native)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:45)
    at eval (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:81)
    at Array.forEach (native)
    at RuntimeCompiler._getTransitiveCompiledTemplates (http://127.0.0.1:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:14640:45)BrowserDomAdapter.logError @ platform-browser.umd.js:1900
zone.min.js:1 Error: Error: Unexpected directive value 'undefined' on the View of component 'MyAlertComponent'(…)e.invoke @ zone.min.js:1

Relevant part of systemjs.config.js:

works, no error:

    var map = {
        ...

    "fuel-ui":                     "node_modules/fuel-ui/bundles",
    ...
        };

doesn't work, gives exception:

    var map = {
        ...

    "fuel-ui":                     "build/vendor/fuel-ui/bundles",
    ...
        };

Relevant part of the component:

import {Component, Input,ElementRef} from '@angular/core';
import {Alert} from 'fuel-ui/fuel-ui';

@Component({
  host: {
    '(document:click)': 'onClick($event)',
  },
  selector: 'my-alert',
  templateUrl: './app/components/shared/my-alert.component.html',
  directives: [ Alert ]  
})
export class MyAlertComponent {

A part of package.json:

    "fuel-ui": "0.3.9",
    "jquery": "2.1.3",
    "ng2-bootstrap": "1.0.24",
    "node-sass": "^3.7.0",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^1.3.2",

The files are identical in both locations. The fuel-ui.js is loaded in both cases. No 404 errors anywhere. The load order of the loaded js files is the same in both cases.

Still the first config works, the second doesn't.
I tried to do the same with all the other referenced packages in system.config.js, everything works with any location I want to use, except fuel-ui.

Do you have any ideas what went wrong here?

thanks for the hard work guys, its awesome. another awesome option to angular2 component.
i've got a list of feature & improvement, sorry to be a nuisance.

feature:

• sidebar

improvement:

• the scroller inside navbar is kind of annoying, a slimscroll could be a nice improvement.
• when we click the open menu button to expand the sidebar, the menu & menu item kind of expanded initially and then collapsed quickly. i dont think it should be showed

sorry, i've only got those right now.

thanks, cheers.

Pushed up a branch feature/Update_To_Beta0

Getting some errors I need to figure out

Expression 'isActive in DemoComponent@64:6' has changed after it was checked. Previous value: 'false'. Current value: 'true' in [isActive in DemoComponent@64:6]

Related to:
angular/angular#5950

When I copy paste this example in my app, I got
main.browser.ts:25 Error: Template parse errors:

Can't bind to 'columns' since it isn't a known property of 'table-sortable'.
1. If 'table-sortable' is an Angular component and it has 'columns' input, then verify that it is part of this module.
2. If 'table-sortable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("

    <table-sortable
      [ERROR ->][columns]="columns"
      [data]="rows"
      [sort]="sorting">
"): About@4:6
Can't bind to 'data' since it isn't a known property of 'table-sortable'.
1. If 'table-sortable' is an Angular component and it has 'data' input, then verify that it is part of this module.
2. If 'table-sortable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
    <table-sortable
      [columns]="columns"
      [ERROR ->][data]="rows"
      [sort]="sorting">
      Loading table...
"): About@5:6
Can't bind to 'sort' since it isn't a known property of 'table-sortable'.
1. If 'table-sortable' is an Angular component and it has 'sort' input, then verify that it is part of this module.
2. If 'table-sortable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
      [columns]="columns"
      [data]="rows"
      [ERROR ->][sort]="sorting">
      Loading table...
    </table-sortable>
"): About@6:6
'table-sortable' is not a known element:
1. If 'table-sortable' is an Angular component, then verify that it is part of this module.
2. If 'table-sortable' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
    <h1>About</h1>

    [ERROR ->]<table-sortable
      [columns]="columns"
      [data]="rows"
"): About@3:4

when I add directive itself? Is there any remedy for this one?

I have an error in npm install:

Inserting a floating point number as a step value, will cause an buffer overflow.

Is there a straight forward way to have the daterangepicker dropdown under just one field. If anyone knows please share.

It would be nice if there is some documentation around how to use the library with angular-cli

Hey again,

Any idea how I can set the initial value of the start and end dates of a DateRangePicker instance? I tried using the [value]="dateRange" attribute and setting dateRange = new DateRange(new Date(), new Date()) but it does not see to want to display the values in the inputs.

I also seen some more Inputs() on DateRangePicker.ts called inputEndDate & inputStartDate but neither of those were working either. Is this possible?

Is it possible to use this library with bootstrap 3 (and materialize)? If not out of the box, are there any ways how to do it ?

This issue also affects infinite scroller, due to the new strategy to hide the scrollbar in FF and IE.

Hi

This is not an issue.
You are doing a great job.
Fuel UI is a nice component library which I think should be listed at https://angular.io/resources/.
I think you will need to fill the form at https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1

Thanks

Started work on an infiniteScroller in the Update_To_Alpha53 branch.

The current api uses a Component and Directive pair, usage would be similar to the following

<infinite-scroller (next)="getNext()" (prev)="getPrev()" distance="2">
    <div *ngFor="#item in items" infinite-scroll-item>
        {{item}}
    </div>
</infinite-scroller>

I'm open to ideas on the api

For some reason and on specific cases only, I was receiving that t.toLowerCase() is not functioning. I managed to overpass this issue by editing the following:

if((isNaN(parseFloat(a)) || !isFinite(a)) || (isNaN(parseFloat(b)) || !isFinite(b))){
//Isn't a number so lowercase the string to properly compare
if(a.toString().toLowerCase() < b.toString().toLowerCase()) return -1;
if(a.toString().toLowerCase() > b.toString().toLowerCase()) return 1;
}
else{
//Parse strings as numbers to compare properly
if(parseFloat(a) < parseFloat(b)) return -1;
if(parseFloat(a) > parseFloat(b)) return 1;
}

Could you please check that?

Best
George

Hi

In my app I'm now getting the following messages even though I'm not directly referencing the Carousel component after upgrading to ng2 rc3 and your latest version. Not sure what I'm doing wrong or if there is a bug.

node_modules/fuel-ui/src/components/Carousel/Carousel.ts(150,47): error TS2304: Cannot find name 'Hammer'.
node_modules/fuel-ui/src/components/Carousel/Carousel.ts(151,30): error TS2304: Cannot find name 'Hammer'.
node_modules/fuel-ui/src/components/Carousel/Carousel.ts(152,38): error TS7006: Parameter 'ev' implicitly has an 'any' type.
node_modules/fuel-ui/src/components/Carousel/Carousel.ts(155,37): error TS7006: Parameter 'ev' implicitly has an 'any' type.

Uncommenting the import/export for Carousel in the node module fixes my problem locally.

I have the node_modules folder excluded in my tsconfig.json file however the typescript compiler attempts to build the fuel-ui module.

tsconfig.json:

{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"inlineSourceMap": true,
"inlineSources": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"rootDir": "app",
"outDir": "dist"
 },
"exclude": [
"node_modules",
"bower_components",
"typings/main",
"typings/main.d.ts",
"dist/node_modules"
]
}

Many of these errors are created:

error TS6059: File 'C:/Users/golear/Documents/GitHub/ShoppingAssist/node_modules/fuel-ui/src/utilities/utilities.ts' is not under 'rootDir' 'app'. 'rootDir' is expected to contain all source files.

No other modules I use actually include the .ts files in their npm package so this is the only one for which I get this error.

Hey there, great package!

I did notice something that I'm not totally on board with. in the TableSortable.html file, you are iterating through the rows like this:

<tr *ngFor="#object of data | orderBy : convertSorting()">
    <td *ngFor="#key of object | mapToIterable; #i = index" [innerHtml]="object[columns[i].variable] | format : columns[i].filter"></td>
</tr>

So you're iterating over the rows (data) and calling the variable key on columns to get the value with object[columns[i].variable]. The reason I have issues with this is that if you pass the tablesortable component rows that include other keys that you do not plan to display in the table, you get undefined errors on columns[i].variable because you don't want to see certain row values, you didn't add them to the columns array and because you are iterating over the rows, it errors.

What I'd like to propose is iterating over the columns themselves - so that you're only ever calling for what actually has been defined to display from the rows. Something like this:

<tr *ngFor="#object of data | orderBy : convertSorting()">
    <td *ngFor="#column of columns; #i = index" [innerHtml]="object[column.variable] | format : column.filter"></td>
</tr>

This way, we don't need to handle / reduce / process the rows array any further after getting it from the backend / API, and only the items placed in columns will be shown.

What do you think?

Could we have some ways or options to provide date format rather than the default DD/MM/YYYY?
<date-picker value="2016-12-11" dateFormat="YYYY-MM-DD" ...></date-picker>

Animations are pushing the next frame out of view on firefox.

May want to look into another approach to support swiping on mobile

¡Hola!

I am looking for the optimal way to use your orderBy pipe on my ionic 2 project, but I can't find any docs on that. It would be enough if I can get orderBy only, or all the pipes in a npm way.

Is it possible, or do I need to workarround?

BTW, I tried to npm install fuel-ui --save, but It seems to have a lot of extra dependencies I really don't need/want. :)

Thank you for all the good work!

We need something similar to this, maybe a bit prettier

https://htmlpreview.github.io/?https://github.com/angular-ui/ui-slider/master/demo/index.html

Hey,

I've tried installing this on two different environments and both time's I've gotten the same error. I'm not really sure what it means but it stops from creating all the files needed in the dist folder and then I can't use fuel-ui. Any help or clues into getting this working?

Error: [email protected] postinstall: bower install && typings install
29678 verbose stack Exit status 1
29678 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
29678 verbose stack at emitTwo (events.js:106:13)
29678 verbose stack at EventEmitter.emit (events.js:191:7)
29678 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
29678 verbose stack at emitTwo (events.js:106:13)
29678 verbose stack at ChildProcess.emit (events.js:191:7)
29678 verbose stack at maybeClose (internal/child_process.js:850:16)
29678 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
29679 verbose pkgid [email protected]
29680 verbose cwd /Users/joe/ng2-play
29681 error Darwin 15.0.0
29682 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
29683 error node v6.1.0
29684 error npm v3.8.6
29685 error code ELIFECYCLE
29686 error [email protected] postinstall: bower install && typings install
29686 error Exit status 1
29687 error Failed at the [email protected] postinstall script 'bower install && typings install'.
29687 error Make sure you have the latest version of node.js and npm installed.
29687 error If you do, this is most likely a problem with the fuel-ui package,
29687 error not with npm itself.
29687 error Tell the author that this fails on your system:
29687 error bower install && typings install
29687 error You can get information on how to open an issue for this project with:
29687 error npm bugs fuel-ui
29687 error Or if that isn't available, you can get their info via:
29687 error npm owner ls fuel-ui
29687 error There is likely additional logging output above.
29688 verbose exit [ 1, true ]

Currently breaks Carousel and Collapse since AnimationBuilder has been removed in RC2

Reference

After getting #102 for RC5, we'll get started on something for the webpack guys.

Update to Angular2 RC5

Update providers to use new NgModules

Ongoing work in branch https://github.com/FuelInteractive/fuel-ui/tree/feature/RC5

While browsing the demo app-

Using Chrome 51.0.2704.103 m: The slide animation is always around 250ms. Changing the duration value has no effect.

Using Firefox 47: No slide animation shown.

Same results in my own local test app. The animation duration is always the same in chrome and no animation shown in firefox.

Can you please add following features,
1.multiselect
2. accordion
3. tags
4. timepicker and
5. toaster

The current DatePicker is kind of a wreck.

Create a mobile first version using infinite scrolling instead of animation for changing months.

My evnt. is

node v4.5.0
npm v3.10.3
[email protected]
[email protected]

When I install fuel-ui as below

npm install fuel-ui

I've got a error like this:

npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "i"
npm ERR! node v4.5.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: bower install && typings install
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'bower install && typings install'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the fuel-ui package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! bower install && typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs fuel-ui
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls fuel-ui
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/kerovieux/webProject/testWebapp/ng-fuel-cli/npm-debug.log

What can I do to resolve...

Hi. Planing you to add Select Component? It will be wery nice. Thanks!

i found error in your DateRangePicker, and i dont think its because of my connection.

edit: and everything failed after it. need to refresh the page to make another page working again.

Hi the dateRangePicker has some strange behaviour

When gaining focus it runs an animation. on IE11 and FF the window has a scrollbar instead of being controlled by the buttons.

http://screencast.com/t/HAElVMo80
http://screencast.com/t/O0wM12Vz

On FF the binding has issues.

Update for beta.16: breaking changes

transform(input: any, ...config: string[]): any {

        if (config.length === 0) {
            config = ["+"];
        }

Am using this seed https://github.com/preboot/angular2-webpack and am not able to
import {DateRange, DATE_PICKER_PROVIDERS} from 'fuel-ui/fuel-ui';
I get error TS2307: Cannot find module 'nouislider'. and unexpected token export see screenshoot.
any ideas. Am on ubuntu and chrome 51.0.2704.103 (64-bit)

transform(input: any, config: string = '+'): any {
        if (input) {
        }
}

It seems that into the transform you need to check if array exists. Could you please verify that?

Best
George

I installed fuel ui using the 'manual' install process, on an existing project. Trying to import from 'fuel-ui/fuel-ui' gives the following errors:

ERROR in ./~/fuel-ui/fuel-ui.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/components/components in ..../node_modules/fuel-ui
 @ ./~/fuel-ui/fuel-ui.js 5:9-48

ERROR in ./~/fuel-ui/fuel-ui.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/directives/directives in ..../node_modules/fuel-ui
 @ ./~/fuel-ui/fuel-ui.js 6:9-48

ERROR in ./~/fuel-ui/fuel-ui.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/pipes/pipes in ..../node_modules/fuel-ui
 @ ./~/fuel-ui/fuel-ui.js 7:9-38

ERROR in ./~/fuel-ui/fuel-ui.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./dist/utilities/utilities in ..../node_modules/fuel-ui
 @ ./~/fuel-ui/fuel-ui.js 8:9-46

Looking under ./node_modules/fuel-ui/ I don't see a dist folder. Not sure if that's supposed to be there, but that's the error.

My project is using webpack, cloned from the angular2-redux starter here: https://github.com/rangle/angular2-redux-starter

See branch Update_To_Alpha53
Working on the updating the angular2 version but I'm having trouble getting systemjs to see the angular2/bootstrap include path.

Also still need to work out the variable casing as soon as we can see exceptions return.

Cool project. I tried to run the examples: npm install went fine, gulp (default) run OK, but while loading the index.html page I go this:

Failed to load resource: the server responded with a status of 404 (Not Found)
config.js:1 Uncaught ReferenceError: System is not defined
localhost/:9 Uncaught ReferenceError: System is not defined

For info I'm using:

node 4.1.2
npm 3.3.6

Per the reddit comment, should we make the demo responsive?
Also the menu is covering the Mobile version of the date picker

As based on
https://medium.com/@mweststrate/how-to-create-strongly-typed-npm-modules-1e1bda23a7f4#.j61901h5k

I get exceptions when entering DateRangePicker demo page:

Also in Accordion Demo I get exception if I press "Last Items:..." button first time I enter that page:

I am using FF 47.0

• Make date fields editable
• Add toggleable year selector
• Include Time selector
  • Include precision settings