coryrylan / ngx-lite

:package: A collection of lightweight Angular libraries in a single mono repo

ngx-lite

ngxlite.com

Angular 14+

A mono repo collection of lightweight stand alone Angular libraries built with the Angular CLI and ng-packagr

Contributing

The project is still in the early stages but if you would like to contribute check out the CONTRIBUTING.md.

ngx-lite's Issues

ngx-input-star-rating - a11y

The buttons on the rating component are missing the appropriate aria-label attributes.

Update to Angular 13 and beyond?

@coryrylan - Are there any plans to support Angular 13 and beyond?
When attempting to install @ngx-lite/[email protected] on an Angular 13 repository, the following error is thrown:

C:\path\to\angular13-repository>npm i @ngx-lite/json-ld
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.3.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.2" from @ngx-lite/[email protected]
npm ERR! node_modules/@ngx-lite/json-ld
npm ERR!   @ngx-lite/json-ld@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Update not working properly in the input-tag component

Describe the bug
I'm using the ngx-input-tag and it works the first time the form is initialized,
but once i try to patch the corresponding value, the input does not reflect the changes,
instead, if i click outside the component, then the changes are reflected

To Reproduce
Steps to reproduce the behavior:

1. Working Link reproducible demo
2. Delete one of the initial tags
3. Click the submit button, you will see that nothing changes, but if you click outside the input then it gets updated

Expected behavior
If i change the tags value in the form, it should be automatically reflected and it should not require an extra click.

Versions (please complete the following information):

• OS: Windows
• Browser Chrome
• Package Version 0.4.8
• Angular Version 8

ngx-input-tag feature requests (different tag formats and prevent creating new tags)

Describe the solution you'd like

1. ngx-input-tag should allow the tagFormatter to be set via a input (input overrides provider). We have two types of tags on our site and they use different formats.
2. ngx-input-tag should have an option to disable adding tags that are not in the suggested tag array.
3. ngx-input-tag should have an option to prevent backspace from removing a tag.

I would be happy to open a PR.

Update to Angular 10

Work in progress branch https://github.com/coryrylan/ngx-lite/tree/topic/angular-9

Nav-Drawer Highlight Bug

Describe the bug
Focus stays on previously clicked or hovered link.

To Reproduce
I have a gif of it doing it on the ngx-lite site:

Expected behavior
I expected the highlight to show on the hovered or clicked link.

Screenshots
gif above

Versions (please complete the following information):

• Tested in Chrome Version 72.0.3626.96 (Official Build) (64-bit)

@ngx-lite/json-ld is not working as expected

Describe the bug
Following the installation instruction, JSON ld module creating script tag but it doesn't check duplicate. So if we route back to the page again, it will create two scripts. Also, JSON ld can be detected only on load but not on route change.

publish @ngx-lite/input-timepicker

Describe the bug
npm install --save @ngx-lite/input-timepicker fails with module not found.

To Reproduce
Run npm command above

Expected behavior
npm successfully installs the package and users can then import it and use it. I am able to successfully install input-datepicker

Versions (please complete the following information):

• OS: OSX 10.15.1
• Browser: Brave 1.0
• Package Version latest
• Angular Version 8.x

What are your versioning practices?

So this issue comes off the back of a deployment that I did this morning, which failed.
The failure, sadly, was due to:

1. The newest version of this package being incompatible to the version of Angular for which I'm running (10.2.6).
2. Me, not locking down my packages to the exact version but rather allowing a bit of flex with ^ in my package.json for this entry.
3. My assumptions that that any updates to the Dependent Version of Angular would require a Major package update.
4. Again, my assumption that this package followed some sort of Semantic Versioning (major . minor . patch)

Could you provide some sort of Insight into how you version this package? Perhaps it would be worthy of a section in your readme?

Furthermore, may I request that when you change the versions of the dependent packages in the future; that you use some sort of Semantic Versioning to indicate that you've made breaking changes to this package.

And I'd just like to also take the time to thank you and the other contributors for your work on this package. It's saved me a few hours. Sadly it's stolen a few too. However I really do appreciate the hard work and hope that you folks keep it up.

Use Intersection Observer API for in-viewport module

Is your feature request related to a problem? Please describe.

use Intersection Observer API like

https://github.com/TradeMe/ng-defer-load

for in-viewport module

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
use Intersection Observer API to check if an element is in viewport and falls back to scroll detection mechanism for unsupported browsers.

Additional context
Add any other context or screenshots about the feature request here.

Upgrade to Angular 12 causing errors during build

Hi,
Just upgraded to Angular 12, include angular/cli 12.
json-ld library worked for me when using angular 9.

After upgrading getting the following errors during build.

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.component.d.ts:10:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDefWithMeta'.

10 static ɵcmp: i0.ɵɵComponentDefWithMeta<NgxJsonLdComponent, "ngx-json-ld", never, { "json": "json"; }, {}, never, never>;
~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.module.d.ts:5:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDefWithMeta'.

5 static ɵmod: i0.ɵɵNgModuleDefWithMeta<NgxJsonLdModule, [typeof i1.NgxJsonLdComponent], [typeof i2.CommonModule], [typeof i1.NgxJsonLdComponent]>;
~~~~~~~~~~~~~~~~~~~~~

**Versions

• OS: Windows
• Package Version ^0.6.3
• Angular Version ~12.0.1

ngx-lite/modal closes on any keyup event

Describe the bug
ngx-lite/modal closes on any keyup event now (not just the escape key). I think it was in the PR that updated to Angular 11. I believe the following screenshot shows the code that made it start doing that.

Screenshots

@ngx-lite/in-viewport not updated for Angular v8

It looks like the code was updated but the version number was not bumped.

How to change colour of starts? I am getting black on my side.

Hi...
Its very nice plugin. Could you plz tell how should we change the colour of stars.

App size increased increased by 38k updating to 0.6.3

Describe the bug
Only updated @ngx-lite/json-ld in my app from "0.6.2" to "0.6.3". After running ng build --prod I noticed the file size of my main.js file increased from 961k to 999k. Deleting the node_modules folder and reinstalling did not fix the issue.

Versions (please complete the following information):

Angular CLI: 11.0.2
Node: 14.15.0
OS: win32 x64

Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@angular/cdk                    11.0.0
@angular/material               11.0.0
@nguniversal/builders           11.0.0
@nguniversal/express-engine     11.0.0
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.1.2

ngx-input-datepicker won't navigate previous and next for months

Seems to be related to a possible copy/paste error:

@ngx-lite/json-ld v.0.6.4 not working with angular 11.2.1

Describe the bug
After installling the latest verison 0.6.4 , when I run my angular project I get the following:
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 31:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 88:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 51:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 106:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 23:26-47
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 82:23-44
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 99:23-45
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 90:23-45
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

To Reproduce
Steps to reproduce the behavior:
1.
2. Go to '...'
3. Click on '....'
4. Scroll down to '....'
5. See error

Expected behavior
It should compile with my angular v11.

Versions (please complete the following information):

• Chrome browser
• Angular Version 11.2.1

Additional context
package.json
{
"name": "pinploy-web",
"version": "1.1.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:ssl": "ng serve --ssl",
"prettier-write": "npx prettier --write .",
"prettier-check": "npx prettier --check .",
"build": "ng build --prod",
"build:dev": "ng build --prod --configuration=dev",
"build:dk": "ng build --prod --configuration=dk",
"test": "ng test",
"lint:fix": "eslint --fix --ext .ts .",
"eslint": "npx eslint src//*.ts",
"eslint:fix": "npx eslint src//*.ts --fix",
"e2e": "ng e2e",
"postinstall": "ngcc",
"webpack-analyzer:analyze:web:prod": "ng run pinploy-web:build --configuration=dk --stats-json=true --statsJson=true",
"webpack-analyzer:web": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "1.1.0",
"@agm/js-marker-clusterer": "^1.1.0",
"@angular/animations": "11.2.1",
"@angular/cdk": "^11.2.1",
"@angular/common": "11.2.1",
"@angular/compiler": "11.2.1",
"@angular/core": "11.2.1",
"@angular/forms": "11.2.1",
"@angular/material": "^11.2.1",
"@angular/platform-browser": "11.2.1",
"@angular/platform-browser-dynamic": "11.2.1",
"@angular/router": "11.2.1",
"@auth0/angular-jwt": "5.0.2",
"@busacca/ng-pick-datetime": "10.0.0",
"@google/markerclustererplus": "^5.1.3",
"@ngx-lite/json-ld": "^0.6.4",
"angular-cropperjs": "^1.0.1",
"angular-google-tag-manager": "1.3.0",
"angularx-social-login": "3.5.4",
"classlist.js": "^1.1.20150312",
"codelyzer": "^6.0.0",
"core-js": "^2.4.1",
"eslint-config-airbnb": "^18.2.1",
"intersection-observer": "^0.10.0",
"js-marker-clusterer": "^1.0.0",
"jsbi": "3.1.4",
"libphonenumber-js": "^1.9.6",
"moment": "^2.29.1",
"ng-in-viewport": "^6.1.0",
"ng-lazyload-image": "9.1.0",
"ng-pick-datetime": "7.0.0",
"ngx-build-plus": "^11.0.0",
"ngx-color": "^6.2.0",
"ngx-cookie-service": "^2.3.0",
"ngx-infinite-scroll": "10.0.1",
"ngx-owl-carousel-o": "^5.0.0",
"ngx-toastr": "13.2.1",
"ngx-webstorage": "7.0.1",
"rxjs": "^6.6.3",
"socket.io-client": "^2.1.1",
"tslib": "^2.0.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^11.1.1",
"@angular-devkit/build-angular": "~0.1102.1",
"@angular-eslint/eslint-plugin": "^1.2.0",
"@angular/cli": "^11.2.1",
"@angular/compiler-cli": "11.2.1",
"@angular/language-service": "11.2.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^14.14.31",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/eslint-plugin-tslint": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"cropperjs": "^1.5.9",
"eslint": "^7.21.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-rxjs": "^3.1.0",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.6.0",
"moment-locales-webpack-plugin": "^1.2.0",
"prettier": "2.2.1",
"protractor": "~7.0.0",
"ts-node": "~3.2.0",
"typescript": "4.0.7",
"webpack-bundle-analyzer": "^4.4.0"
}
}

ngx-input-star-rating - support half stars

Currently if a score value is 4.5 it rounds to 5 stars instead of displaying 4.5 stars.

Cannot upgrade my project to angular 11 because of ngx-nav-drawer pacakge

Describe the bug
ERROR Error: ASSERTION ERROR: Expecting flags [Expected=> number === boolean <=Actual]
at throwError (core.js:314)
at assertNumber (core.js:245)
at ɵɵviewQuery (core.js:26560)
at NgxNavDrawerComponent_Query (ngx-lite-nav-drawer.js:75)
at executeViewQueryFn (core.js:10882)
at renderView (core.js:9412)
at renderComponent (core.js:10698)
at renderChildComponents (core.js:9283)
at renderView (core.js:9443)
at renderComponent (core.js:10698)

To Reproduce
Steps to reproduce the behavior:

1. Add ngx-nav-drawer in angular 10 project
2. Upgrade to angular 11 using angular cli ng update command (may need force update )
3. Run the project using ng serve
4. Open inspect element window and select console

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

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Package Version [e.g. 1.2.3]
• Angular Version [e.g. 7.x]

Additional context
Add any other context about the problem here.

ngx-input-star-rating - Not possible to increase star size via CSS

Describe the bug
I have edited the CSS for the svg, span and button element but there does not seem a method for increasing the star size

Additional context
Please guide me in increasing the star width and height please.

block elements

update all custom elements to be display block by default

certain components cause page performance issues by using separate event listeners for global events

Describe the bug
If you have several instances of ngx-menu on a page (e.g. in a row for each entity in a list), each one attaches an event listener for document:click and window:keyup. This can cause serious performance issues (slow response to clicks and typing in the browser).

To Reproduce
https://stackblitz.com/edit/angular-vwdj4h

Notice that typing in the text box is really slow with a lot of menus on the page.

Expected behavior
This should not happen. We fixed it by forking the menu component and making it use a shared observable for the document:click and window:keyup events instead of HostListener. This should be done for any component that uses HostListener for a global browser event if a page may contain several instances of that component. The datepicker, input tag, menu, and modal components in ngx-lite could suffer from this same issue.

This could be solved by using a SharedEventService like this:

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { fromEvent, EMPTY, Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class SharedEventsService {
  readonly documentClickEvent: Observable<MouseEvent>;

  constructor(@Inject(PLATFORM_ID) platformId: string) {
    const isBrowser = isPlatformBrowser(platformId);

    this.documentClickEvent = isBrowser ? fromEvent<MouseEvent>(document, 'click').pipe(shareReplay()) : EMPTY;
  }
}

I was going to open a PR to fix all of the affected components, but I am unsure how to update @ngx-lite/util to add the shared service.

Allow empty stars (value = 0) with @ngx-lite/input-star-rating component

Is your feature request related to a problem? Please describe.
With a previous version, when i set formControl has a value 0, all stars become empty.
Currently, when set form control to 0 value, the component doesn't update :(

Describe the solution you'd like
Support 0 value.

Require Minimum/Maximum Character Limit for ngx-input-tag ?

Hi,

I use your tag input component in my Angular project for my forms.
Great job ! 👍

However, I can't fill a tag of more than 25 characters (spaces included).
Ex :

• journée-du-patrimoine-fra (works well)
• journée-du-patrimoine-fran (doesn't work)

Is this normal ? Otherwise, how to get no restriction about the maximum number of characters ?

Thk's !

Character or line limit for json-ld?

Attempting to update my schema files for the strategy described by Yoast below, which creates really long structured data files. https://yoast.com/yoast-seo-11-0/

Seeing a cutoff at ~150 lines where the json truncates suddenly and causes an error, since it doesn't close.

Is there anything you're aware of that would be driving that limit?

Support for Angular 16

Could you please add support for Angular 16?

I was upgrading an older project from Angular 14 to 16, and I received a warning of conflicting peer dependency.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ngx-lite/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^16.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.2.12" from @ngx-lite/[email protected]
npm ERR! node_modules/@ngx-lite/json-ld
npm ERR!   @ngx-lite/json-ld@"^14.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR!   peer @angular/common@"^14.2.12" from @ngx-lite/[email protected]
npm ERR!   node_modules/@ngx-lite/json-ld
npm ERR!     @ngx-lite/json-ld@"^14.0.0" from the root project

Update close icon

Use the × html value instead of the current ascii code to properly render the close icon on the tags component. The current version does not consistently render across browsers. For example Chrome OS renders red X instead of the small dark close icon.

tests! tests! tests!

There are little to no unit tests. A few e2e tests. Additional tests need to be added asap.

NgxInputTagComponent fires "TextChange" event even if text doesn't change

It looks like the textChange event fires on every keyup regardless if the actual text changes.

ngx-lite/projects/ngx-input-tag/src/ngx-input-tag.component.ts

Line 157 in ce954f2

this.textChange.emit(input.value);

update all components to OnPush change detection

refactor util lib code

Currently it is not easy to share util shared code between libraries. Currently the project has duplicated code across libs.

Possible but not great solutions

• symlink a util lib
• publish a util lib
• combine all libs into a core instead of stand alone packages (last resort, not ideal)

ng-packagr/ng-packagr#358

Support Angular 7

Could you please add support to Angular 7?

Currently after upgrade to Angular 7 I receive warning with incorrect peer dependencies.

warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/core@^6.0.0".
warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/common@^6.0.0".
warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/platform-browser@^6.0.0".

input-range: cannot read property 'unsubscribe' of undefined

https://github.com/coryrylan/ngx-lite/blob/master/projects/ngx-input-range/src/ngx-input-range.component.ts#L131

This unsubscribe call should be wrapped in an if to ensure that the subscription is not undefined.

TypeError: Cannot read property 'unsubscribe' of undefined
    at NgxInputRangeComponent._7aa‍.r.NgxInputRangeComponent.ngOnDestroy (C:\Builds\estate-sales\Web\node_modules\@ngx-lite\input-range\bundles\ng:\@ngx-lite\input-range\ngx-input-range.component.ts:145:28)
    at callProviderLifecycles (C:\execroot\angular\packages\core\src\view\provider.ts:568:14)
    at callElementProvidersLifecycles (C:\execroot\angular\packages\core\src\view\provider.ts:534:7)
    at callLifecycleHooksChildrenFirst (C:\execroot\angular\packages\core\src\view\provider.ts:522:21)
    at destroyView (C:\execroot\angular\packages\core\src\view\view.ts:511:3)
    at callViewAction (C:\execroot\angular\packages\core\src\view\view.ts:633:7)
    at execComponentViewsAction (C:\execroot\angular\packages\core\src\view\view.ts:559:7)
    at destroyView (C:\execroot\angular\packages\core\src\view\view.ts:510:3)
    at callViewAction (C:\execroot\angular\packages\core\src\view\view.ts:633:7)
    at execEmbeddedViewsAction (C:\execroot\angular\packages\core\src\view\view.ts:580:9)

changeDetection doesn't work when set new value directly with control.setValue() with @ngx-lite/input-star-rating component

Describe the bug
changeDetection doesn't work when set new value directly with control.setValue() with @ngx-lite/input-star-rating component

To Reproduce
Steps to reproduce the behavior:

1. Working https://stackblitz.com/edit/angular-7ukkya reproducible demo
2. Click on 'set to 2' button, the component doesn't updated :(

Expected behavior
when myControl.setValue(3) is called, the component must show 3 stars

Works o localhost, but doesn't work when deployed

Describe the bug
I have an Angular 9 Universal app, and I am trying to use the @ngx-lite/json-ld. It is working fine on my local machine, but when I deploy to AWS, it stops working. Any idea of what might be happening?

To Reproduce
Steps to reproduce the behavior:

1. Working https://stackblitz.com reproducible demo
2. Go to '...'
3. Click on '....'
4. Scroll down to '....'
5. See error

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

Screenshots
If applicable, add screenshots to help explain your problem.

Versions (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Package Version [e.g. 1.2.3]
• Angular Version [e.g. 7.x]

Additional context
Add any other context about the problem here.