ng-lightning / ng-lightning Goto Github PK

View Code? Open in Web Editor NEW

915.0 30.0 122.0 59.66 MB

Native Angular components & directives for Lightning Design System

Home Page: http://ng-lightning.github.io/ng-lightning/

License: MIT License

TypeScript 84.01% JavaScript 2.16% Pug 13.30% SCSS 0.53%

ng-lightning angular lightning salesforce-lightning

ng-lightning's Introduction

ng-lightning

This library contains native Angular components and directives written from scratch in TypeScript using the Lightning Design System CSS framework.

We are looking for community help to find and fix bugs, improve demo site and create new components.

Installation

Install through npm:

npm install --save ng-lightning

Dependencies

This library depends on Salesforce's LDS markup and CSS (tested with 2.9). We don't ship any CSS file, but you have to take care of including LDS CSS rules in your page. There are various ways to achieve this, for example compiling through their source files (@salesforce-ux/design-system) or by adding this into your <head>:

<link rel="stylesheet" href="https://unpkg.com/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css">

SVG Icons

Because of various cross-domain issues, if you want to use SLDS icons, you must provide a copy of the various sprite files (ie @salesforce-ux/design-system/assets/icons/action-sprite/svg/symbols.svg), served locally through your server.

IE11 support

Unfortunately, IE11 does not support two important features.

SVG External Content, used to load SVG icons from a spritemap. In order to support this, you will need to use a small script called svg4everybody.
Available on npm cdn here.
Element.classList on SVG elements, used by Angular's renderer.setElementClass. See here for more information. Use classList.js shim, available on npm cdn here.

Typically, these shims should be placed within the <head> element.

Usage & Demo

http://ng-lightning.github.io/ng-lightning/

Contributing

We are always looking for high quality contributions! Please check the CONTRIBUTING.md doc for guidelines.

Need help?

For questions on how to use ng-lightning or how to contribute, please post questions to using the ng-lightning tag. If you find a bug in the source code or a mistake in the documentation, you can help us by submitting an issue to our GitHub Repository.

Companies using ng-lightning

Browsers

We support the same browsers and versions supported by both Angular and Salesforce's Lightning Design System.
Cross browser/environment testing is performed through Saucelabs.

ng-lightning's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger esarbanis sadesyllas bekos lefkarag szwork2013 kevspadillo quinntynebrown jorgeucano chaabni miladhamzelou qcobber jjk3yz michaelpwilson nangal tmessini dballance breeze2 fox36rus kabangi clozanosanchez marceswan orlaqp samridh90 rahulbussa chegarg osdamv ihym chyngyz bekkere kgalanop jarvens amitkverma padamshrestha crazyants coopaq hhh1994 zhongzhong0505 bryongwang seckardt areebaaroosh maksymzav 0zonet jerry-goodboy adrian-d-hidalgo ludgerpeters fhchina ronnyek muhassaf zhucl1006 surithn nucllear conrad777 shidatonglin limingli0707 pankajhingane georotzen unix abiramir-hexaware andywsy rogervaas brunohcastro cheikh-tijani prokyon smile2014 adamunchained arsalankhatri davidadebayo1999 loicdfl niccolascosta junpei-takagi guille-mas edwards1101 supercargo tony534 sunsreng lebsral vivek121095 kevinj04 abenassi87 cdoru madve2 hhy5277 kaka900 cah-anagha-pethe psahni angrax raktimchatterjee pedmarquez alvarigno pepelee 51m0 jesusbarcenilla geekbusinesslab av1v3k belavadi rahman123 dezkyanto azazanafaa gxenakis

ng-lightning's Issues

Pass custom icon on `Ratings` component

Internet Explorer

Hey there,

Really nice work going on here!

I had a question about the support for Internet Explorer. I see only Edge is supported, but is there any reason to why IE 10 or 11 isn't supported?

Is there any potential for a possible fix?

feat(forms): multiselect dropdown

https://www.lightningdesignsystem.com/components/menus/

feat(nglPick): support checkboxes behavior

Customizing modal window

Hello,

Still working on modal windows and right now can't figure out how to make a custom window.
It would be awesome if you could help.

Is there only 3 size of modal windows? Is it possible to make a custom size?
Tried to put different value into size but without succeed.
2)Structure of the modal windows is permanent? With 3 elements like header, body, and footer it looks strange when i just don't want to have header but it still there.
By the way, is it possible to change font-size or style of the header?
3)Buttons on the bottom. For example - I need "back" and "next" buttons and obviously put them in opposite sides of the modal window. It's a little complicated.

Thank you very much for your hard work. Hope to hear from u soon.

ngl-icon: please, don't use class 'slds-icon-text-default' by default

In some cases, as is the case of the pill component, class 'slds-icon-text-default' does not allow correct rendering of icons.

layout and activity timeline

hi, I come from bootstrap design and material design, I want to change and saleforce's design, it seems clean and beautiful I hope you will fast integrate "activity timeline" for angular2, is this in your short list ?

do you have a short list? just to see when others features will come.

ps: I'm not allowed to create new question on stackoverflow because there is not question on stackoverflow, damage

thanks

Request: Update to use RC5 components

Please update to use RC5

implement slds notifications (alerts and toasts)

We need to implement alerts and toasts as found here.

fix(nglIcon): ability to add extra classes on the SVG element

cc @sadesyllas

Demo watch & reload is buggy

support for filtering data in datatable

Hi there,

Is there any possibility to add support for filtering data in the datatable?
Could be on column level or table level (all columns).

Thanks in advance :)

Laurent

Ratings: Outline showing in when focused

When focusing the component, in order to select a rating, the outline is showing.

Datepicker: choose first day of week

Hi,

It would be great to be able to define the first day of the week (sunday in US but monday in many countries).
BTW thanks for this great library.
Regards.

Stéphane

Support for header template in datatable

(feat): Custom language for datepicker

Hello!

Is it possible to set custom language (for month) in datepicker?

Dropdown shouldn’t close when inner nglPill is removed

Lookup component hangs in Safari, must be force quit.

Angular 2.0.0-beta.14
ng-lightning v0.7.0
Safari 9.1.1

What you did: Type text in lookup and attempt to select a value.

What you expected to happen: Desired value to become selected.

What actually happened: Cursor becomes spinner and Safari browser is unresponsive, has to be force quit. I attempted to wait for an extended period of time (~14 minutes) to see it I could at least get a console error but it continued to be unresponsive.

I tested this on Safari in the component demo at http://ng-lightning.github.io/ng-lightning/ and the error is consistent. Error does not occur in Chrome, Firefox, or Microsoft Edge.

Problems with rxJs

Hello,

I joined your module to display a modal , but I have a concern with your version of angular and RxJS I think. I have the following error:

/node_modules/ng-lightning/pick/pick.d.ts:2:33 
Cannot find module 'rxjs/subject/BehaviorSubject'.

Thx.

feat(lookups): support polymorphic lookups

Please support polymorphic lookups

Datepicker: support for disabled dates

Hi, thanks for your awesome components.

One thing I am missing with the datepicker is the ability to disable specific dates, e.g
['21.12.2012', '22.12.2012']

but also to disable dates before a certain date, e.g. disable all dates before 'today'.

Cheers!

Add event listener on row click in datatable

systemjs

Hello!

I'd like to use ng-lightning with system js (as in the official angular2 document), but I can't find the right way to import ng-lightning in this new angular 2.0.0, NgModule formula. Somebody could send me a working example? I use the standard systemjs config from the official document.

Should this work with webpack instead of system.js

So I've only recently become aware of ng-lightning and trying to consume it in an already built ng2 app that uses webpack. I added ng-lightning/ng-lightning to my webpack.config for inclusion into my vendor stuff, but as soon as it starts getting called, it blows up. I cant tell from this if the problem is in ng-lightning or not.

Exception: Call to Node module failed with error: C:\source\IssueTrackerWeb\node_modules\ng-lightning\ng-lightning.js:1
(function (exports, require, module, __filename, __dirname) { import { NgModule } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\source\IssueTrackerWeb\ClientApp\dist\main-server.js:535:19)
at __webpack_require__ (C:\source\IssueTrackerWeb\ClientApp\dist\main-server.js:20:30)

feat(forms): pill component

https://www.lightningdesignsystem.com/components/pills/

How to setup this project with angular-cli ?

Hi I have a project in angular-cli how can I setup this ng-lightning in angular-cli

Support for i18n in pagination

datepicker on input

Is there any way how to put the datepicker as a directive on an input so it will be shown when the user focuses that input ? Since displaying just the datepicker straight on the page does not have many usecases right ?
Something like: https://www.youtube.com/watch?v=UZtvQazYX8A - 2:03
Regards

feat(modals): support no footer

1 millions rows (virtual scroll)

It's envisageable to implement something like this must-have feature in your datatable ? https://developers.google.com/web/updates/2016/07/infinite-scroller

I think nowadays we manipulate a large set of data and we are led to manipulate that better/faster DOM recycling technic may be good approach , so let me know if you can have this in your vision

thx

Where should I put some documentation?

I am a little noob with angular2, for example the installation documentation doesn't mention anything about the need of add the '@salesforce-ux/design-system' to the project, by npm or the style tag.

I would love make some documentation about that but where?

Angular 2.0 Support

Do we need to do anything to make this work with angular 2.0 release? If we do, maybe we should know and make a pull request?

Regards

Template Parse error when using some form elements

I get Unhandled Promise rejection: Template parse errors: only when I use these form elements: ngl-form-checkbox, ngl-form-group-element. All other components works fine.

Angular version: 2.0.1
Boilerplate: https://github.com/preboot/angular2-webpack

Installation error caused by typings

I'm trying to install ng-lightning to an ASP.MVC 5 project using Visual Studio.NET 2015 and packages.config and I'm getting this error on installation:

====Executing command 'npm install'====

npm http GET https://registry.npmjs.org/ng-lightning
npm http 304 https://registry.npmjs.org/ng-lightning
> [email protected] postinstall D:\Projects\xxx\Source\Management\Management.Web.UI\node_modules\ng-lightning
> typings install
typings ERR! message Unable to resolve Typings dependencies
npm ERR! [email protected] postinstall: `typings install`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is most likely a problem with the ng-lightning package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get their info via:
npm ERR!     npm owner ls ng-lightning
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 6.2.9200
npm ERR! command "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\\\node\\node" "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\Extensions\\Microsoft\\Web Tools\\External\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! cwd D:\Projects\xxx\Source\Management\Management.Web.UI
npm ERR! node -v v0.10.31
npm ERR! npm -v 1.4.9
npm ERR! code ELIFECYCLE
npm

====npm command completed with exit code 1====

My packages.config file:

{
    "version": "1.0.0",
    "name": "ASP.NET",
    "private": true,
    "dependencies": {
        "angular2": "2.0.0-beta.15",
        "systemjs": "0.19.26",
        "es6-promise": "^3.1.2",
        "es6-shim": "^0.35.0",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.2",
        "zone.js": "0.6.10",
        "bootstrap": "^3.3.6",
        "jquery": "^2.2.3",
        "underscore": "1.8.3",
        "fontawesome": "4.5.0",
        "bootstrap-material-design": "^0.5.9",
        "typings": "0.8.1",
        "ng-lightning": "0.7.0"
    },
    "devDependencies": {
        "gulp": "3.9.1",
        "gulp-clean": "0.3.2",
        "gulp-concat": "2.6.0",
        "gulp-continuous-concat": "0.1.1",
        "gulp-watch": "4.3.5"
    }
}

Any ideas?

ng-lightning does not work with rc6?(works with rc5 though)

found this issue rencently,

Error: TypeError: core_1.provide is not a function
at Object.provideNglConfig (https://npmcdn.com/[email protected]/ng-lightning.bundle.js:3753:24)

Reduce logging on tdd

When running on tdd mode there is too much logging info from [watcher], displaying all the files that are changed to .js, which is normal as all files are transpiled from typescript to javascript.

I would suggest an option --verbose and by default the logging to display only errors and warnings.

feat(forms): textarea component

Working on textarea component.
https://www.lightningdesignsystem.com/components/forms/#textarea

Bare button icons not showing with empty attribute.

When having nglButtonIcon or [nglButtonIcon=""] the bar class appears in the class list but the default class is not removed, which result in having a bordered button icon.

feat(lookups): add template property

Support for custom message when no results found in Lookup

Need help with multiple modal windows.

Hi,

Right now I'am working with modal windows. It's quite easy to add a single modal window.
But what about several modal windows with different body elements on a single page?
Tried many variants and it's not working for me.
Could you show a simple example?

Thanks.

Error: XHR error (404 Not Found) tether

Hi,

As soon as I load provideNglConfig() into my bootstrap command, I see the errors below.

My bootstrap file is quite simple:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { HTTP_PROVIDERS } from '@angular/http';
import { APP_ROUTER_PROVIDERS } from './app.routes';
import {provideNglConfig} from 'ng-lightning/ng-lightning';

bootstrap(AppComponent, [ HTTP_PROVIDERS, APP_ROUTER_PROVIDERS, provideNglConfig() ]);

import { NGL_DIRECTIVES } from 'ng-lightning/ng-lightning';

This also occurs on a component if I add NGL_DIRECTIVES to the directives.

directives: [ AppHeaderComponent, NGL_DIRECTIVES ]

In both cases, if I leave the import statements there, but take out the mentioned components, all works fine again.

login:41 Error: (SystemJS) Error: XHR error (404 Not Found) loading
http://localhost:3000/tether(…)(anonymous function) @ login:41ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:101 GET http://localhost:3000/tether 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM35636:3fetchTextFromURL @ system.src.js:1059(anonymous function) @ system.src.js:1767ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1766(anonymous function) @ system.src.js:2795(anonymous function) @ system.src.js:3365(anonymous function) @ system.src.js:3677(anonymous function) @ system.src.js:4069(anonymous function) @ system.src.js:4532(anonymous function) @ system.src.js:4801(anonymous function) @ system.src.js:413ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426

zone.js:101 GET http://localhost:3000/tether 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM35636:3fetchTextFromURL @ system.src.js:1059(anonymous function) @ system.src.js:1767ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1766(anonymous function) @ system.src.js:2795(anonymous function) @ system.src.js:3365(anonymous function) @ system.src.js:3677(anonymous function) @ system.src.js:4069(anonymous function) @ system.src.js:4532(anonymous function) @ system.src.js:4801(anonymous function) @ system.src.js:413ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426

feat(forms): add radio component

Working on radio component
https://www.lightningdesignsystem.com/components/forms/#radio

feat(app): add breadcrumbs component

Proposed API:

<ngl-breadcrumbs assistive-text="You are here">
   <ngl-breadcrumb href="#">Parent Entity</ngl-breadcrumb>
   <ngl-breadcrumb href="#">Parent Record Name</ngl-breadcrumb>
</ngl-breadcrumbs>

Support for white icons

Regarding Lightning Design System, icons are white by default. Then, as a user, you can change the color using the following classes:

.slds-icon-text-default: same as default text
.slds-icon-text-warning: yellow
.slds-icon-text-error: red

The problem is that ngl-icon component sets by default the class .slds-icon-text-default. So, there is no possibility to use white icons.

A possible solution is to force users to use the attribute type="default" if they want to add .slds-icon-text-default. In this case, if the user does not fill the type attribute, then the icon is white.

Another possible solution is to add a new type 'white' in order that users can choose white icons. In this case, if users choose type='white', the .slds-icon-text-default is not added.

for not made components

If the components are not made yet. What should I do? Just use the original library? I know this is a stupid question, but could you give me some suggestions for my project now?

Support for header & footer on lookups

Hi,

Please add support for custom header and footer to be shown before and after the result list respectively.
It would be very helpful especially for custom templates.

Thanks

Install fail caused by postinstall 'typings install'

I run following command.

mkdir ng2test
cd ng2test
npm init
npm install --save ng-lightning

Output is here:

C:\_Projects\ng2test2>npm install --save ng-lightning

> [email protected] postinstall C:\_Projects\ng2test2\node_modules\ng-lightning
> typings install

typings ERR! message Unable to resolve Typings dependencies
typings ERR! caused by Unable to find "typings.json" from "C:\_Projects\ng2test2\node_modules\ng-lightning"

typings ERR! cwd C:\_Projects\ng2test2\node_modules\ng-lightning
typings ERR! system Windows_NT 10.0.10586
typings ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Sumiyoshi\\AppData\\Roaming\\npm\\node_modules\\typings\\dist\\bin.js" "install"
typings ERR! node -v v5.10.1
typings ERR! typings -v 0.8.1

typings ERR! If you need help, you may report this error at:
typings ERR!   <https://github.com/typings/typings/issues>
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @salesforce-ux/design-system@^1.0.0 but none was installed.
npm WARN [email protected] requires a peer of tether@^1.2.0 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save" "ng-lightning"
npm ERR! node v5.10.1
npm ERR! npm  v3.8.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: `typings install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script '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 ng-lightning package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     typings install
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ng-lightning
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ng-lightning
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\_Projects\ng2test2\npm-debug.log

So why "typings.json" file does not there in package root folder? Or am i missed something?

can not find module 'ng-lightning' installed via jspm

Hi @ppolyzos ,

I am getting this error during typescript compilation "can not find module ng-lightning". I have installed this package via jspm install npm:ng-lightning.

Any help would be grateful.

error tether module not resolve

I have this error when import and run my angular/angular2-seed app

trigger.js:3 Uncaught Error: Cannot find module "tether"webpackMissingModule @ trigger.js:3(anonymous function) @ trigger.js:3__webpack_require__ @ bootstrap c18197d…:50(anonymous function) @ directives.js:3__webpack_require__ @ bootstrap c18197d…:50(anonymous function) @ ng-lightning.js:28__webpack_require__ @ bootstrap c18197d…:50(anonymous function) @ app.ts:4__webpack_require__ @ bootstrap c18197d…:50(anonymous function) @ main.browser.ts:7__webpack_require__ @ bootstrap c18197d…:50(anonymous function) @ main.bundle.js:6__webpack_require__ @ bootstrap c18197d…:50webpackJsonpCallback @ bootstrap c18197d…:21(anonymous function) @ main.bundle.js:1 client:45 [WDS] Errors while compiling. client:47 ./~/ng-lightning/popovers/trigger.js Module not found: Error: Cannot resolve module 'tether' in C:\Users\e.begovic\WebstormProjects\ng2seed\angular2-seed\node_modules\ng-lightning\popovers