np-ui-lib / np-ui-lib

Native Angular UI Components and Design Framework

np-ui-lib

Native Angular UI Components and Design Framework

Click here for full documentation

Click here for source code

Release Notes

NPM package manager

NPM Command to add package to application

npm i np-ui-lib --save

List of components:

1	2	3	4	5	6
Input Text	Textarea	Date Picker	Time Picker	Color Picker	Switch
Dropdown	Auto Complete	Tags	Number Box	File Upload	Slider
Checkbox	Radio Button	Rich Text	Menubar	Panel Menubar	Breadcrumb
Toolbar	Data Grid	Paginator	Calendar	Timeline	Alert
Notification	Tooltip	Popover	Panel	Accordion	Tabs
Steps	Card	Progress	Loader	BlockUi	Carousel
Modal	Dialog	Tree View	List	Virtual Scroll	Sidepanel
Masking	Defer	i18N	Themes and Framework CSS	Grid Layout	Padding and Margin
Button and Button Group	Badges	Form

Modules to be pre-installed

"@angular/common": "^15.0.0",
"@angular/core": "^15.0.0",
"@angular/cdk": "^15.0.0",
"@angular/forms": "^15.0.0",
"@angular/router": "^15.0.0",
"rxjs": "~7.5.0",

Import below css to your application, or add in styles section in angular.json

@import "~@angular/cdk/overlay-prebuilt.css";
@import "np-ui-lib/styles/default-theme.scss";

How to Run this project?

Run below commands in sequence
$ ng build np-ui-lib --watch
$ npm run copy-assets
$ ng serve

License

This project is licensed under the MIT License.

np-ui-lib's Issues

Not start after import SCSS with Angular 13

Describe the bug
Not application start when Import SCSS....

To Reproduce
Steps to reproduce the behavior:

1. Add import into main.scss file
2. do npm start
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

SassError: Can't find stylesheet to import.
╷
25 │ @import "~np-ui-lib/styles/default-theme";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/main.scss 25:9 root stylesheet

./src/main.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
25 │ @import "~np-ui-lib/styles/default-theme";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/main.scss 25:9 root stylesheet
at tryRunOrWebpackError (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/HookWebpackError.js:88:9)
at webpack_require_module (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5049:12)
at webpack_require (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5006:18)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5077:20
at symbolIterator (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3485:9)
at done (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/Hook.js:18:14)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:4984:43
at symbolIterator (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3482:9)
at timesSync (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3463:5)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:4949:16
at symbolIterator (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3485:9)
at timesSync (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:2297:7)
at Object.eachLimit (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
25 │ @import "~np-ui-lib/styles/default-theme";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/main.scss 25:9 root stylesheet
at Object. (/home/pkbp512/www/VSA/vsa_client/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/home/pkbp512/www/VSA/vsa_client/node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/home/pkbp512/www/VSA/vsa_client/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/home/pkbp512/www/VSA/vsa_client/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/home/pkbp512/www/VSA/vsa_client/src/main.scss:1:7)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
at Hook.eval [as call] (eval at create (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/HookCodeFactory.js:19:10), :7:1)
at Hook.CALL_DELEGATE [as _call] (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/Hook.js:14:14)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5051:39
at tryRunOrWebpackError (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/HookWebpackError.js:83:7)
at webpack_require_module (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5049:12)
at webpack_require (/home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5006:18)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:5077:20
at symbolIterator (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3485:9)
at done (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/home/pkbp512/www/VSA/vsa_client/node_modules/tapable/lib/Hook.js:18:14)
at /home/pkbp512/www/VSA/vsa_client/node_modules/webpack/lib/Compilation.js:4984:43
at symbolIterator (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:3482:9)
at timesSync (/home/pkbp512/www/VSA/vsa_client/node_modules/neo-async/async.js:2297:7)

Generated code for /home/pkbp512/www/VSA/vsa_client/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/home/pkbp512/www/VSA/vsa_client/node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/home/pkbp512/www/VSA/vsa_client/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/home/pkbp512/www/VSA/vsa_client/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/home/pkbp512/www/VSA/vsa_client/src/main.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Can't find stylesheet to import.\n ╷\n25 │ @import "~np-ui-lib/styles/default-theme";\n │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n src/main.scss 25:9 root stylesheet");


Desktop (please complete the following information):

• OS: [e.g. iOS] : Linux
• Browser [e.g. chrome, safari] Gogoe chrome
• Version [e.g. 22] : 102

Thanks