Hello

Thanks for your professional package for generating QR code.
I'm using this image in a portlet and I like to have some options to style the QR code image e.g. I need variable size for being responsive or some CSS styles to place image in the middle of the portlet. I used ::ng-deep img {} in angular component styles to add style to below image tag, but it affects all image tags in all components we have.
I think it will be good if you add style options to ngx-kjua or at least add spcific class to below image tag for flexible usage of ng-deep to add style to that.

<ngx-kjua>
    <div>
        <img src="" width="400" height="400" style="width: 200px; height: 200px;">
    </div>
</ngx-kjua>

Thanks

Description

I would find it useful that the component does emit his value when it did finish initializing it.

Objective

Being able to bind it with a button that let the user download the file.

Implementation

@Output() emitData = new EventEmitter<any>()

Result

<ngx-kjua
 (emoitData)="downloadFIle = $event"
></ngx-kjua>

@werthdavid How to apply image margin, with background hide

Angular 7
Using primeng

I'm facing the folowing error:

ERROR in node_modules/ngx-kjua/app/modules/ngx-kjua/ngx-kjua.component.d.ts(82,9): error TS1086: An accessor cannot be declared in an ambient context.

Angular: 6.0.2
ngx-kjua: 1.4.0

Imported into the root level app.module.ts using ReadMe details.
import { NgxKjuaModule } from 'ngx-kjua';

ng serve throws the following error. VS-Code highlights and shows the same:

ERROR in src/app/app.module.ts(18,31): error TS2307: Cannot find module 'ngx-kjua'.

All dependencies are installed and visible in the node modules directory

PS: With [email protected] it works!

Description

After the update to 1.14.0 the NgxKjuaComponent throws the following error when it is been initialized / first called in our application (see Stacktrace for more details):

ERROR ReferenceError: require is not defined
The compilation on the other hand runs without any errors.
Moreover version 1.13.2 works fine in the exact same setting.
Do I need a special configuration (e.g special compiler options) to make version 1.14.0 work?

Stacktrace

main.js ERROR ReferenceError: require is not defined
    at new NgxKjuaComponent
    at NodeInjectorFactory.NgxKjuaComponent_Factory [as factory]
    at getNodeInjectable
    at instantiateAllDirectives
    at createDirectivesInstances
    at ɵɵelementStart
    at Module.ɵɵelement
    at MyComponent_Template
    at executeTemplate
    at renderView

The references in the stacktrace point to the following code in the transpiled main.js which is part of the class cunstructor of NgxKjuaComponent:

    if ((0,_angular_common__WEBPACK_IMPORTED_MODULE_1__.isPlatformServer)(this.platformId)) {
      return;
    } else if (!kjua) {
      kjua = require("kjua-svg");
    }

Used versions

  "dependencies": {
	...
    "@angular/common": "13.2.2",
    "@angular/compiler": "13.2.2",
    "@angular/core": "13.2.2",
	...
    "kjua-svg": "1.13.1", (as defined in the peerDependencies)
    "ngx-kjua": "1.14.0",
	...
  },
  "devDependencies": {
	...
    "@angular-devkit/build-angular": "13.2.3",
    "@angular/cli": "13.2.3",
    "@angular/compiler-cli": "13.2.2",
    "@types/node": "17.0.18",
    "typescript": "4.4.4",
	...
  }

Hello,

angular and pakage version:

"@angular/cli": "~12.0.0",
"ngx-kjua": "^1.13.0",

in mode 'imagelabel' or 'labelimage':
mSize, mPosX, mPosY must accept a number or an array of number,
i tray that but i get this message on the angular cli: Type 'number' is not assignable to type 'undefined'. mSize:[10, 2],

here i check the kjua interface i found this:

/**
* label/image size and pos in pc: 0..100
*/
mSize?: number | [number];
mPosX?: number | [number];
mPosY?: number | [number];

we can solve this issues by:

const mSize: [number] = [10, 5] as any;
const mPosX: [number] = [50, 10] as any;
const mPosY: [number] = [50, 2] as any;

or by updating the interface code: '[number]' by 'Array[number]' to accept the array values in 'imagelabel' or 'labelimage' mode.

/**
* label/image size and pos in pc: 0..100
*/
mSize?: number | Array<number>;
mPosX?: number | Array<number>;
mPosY?: number | Array<number>;

Add the v2.1.0 to the changelog.

@werthdavid Thx for the update <3.

If you wish I can do such update on my own if you give me the access :)

Feature-request

I'm starting to do as follow we my libraries, but basically I update the library version accordingly to the angular one.
Meaning the version here would be v16.0.0.

Doing that way let people see better & directly which version to install.

What do you think ?

was using this in angular 13 universal and this error occurred.

Setup:

<ngx-kjua [text]="settings.data" [renderAsync]="false" [render]="'svg'" [crisp]="true" [minVersion]="1" [ecLevel]="settings.errorCorrectionLevel" [size]="400" [ratio]="undefined" [fill]="settings.fgColor" [back]="settings.bgColor" [rounded]="100" [quiet]="1" [mode]="'plain'" [mSize]="30" [mPosX]="50" [mPosY]="50" [label]="'label text'" [fontname]="'sans-serif'" [fontcolor]="'#ff9818'" [image]="undefined" [cssClass]="'image-auto'"></ngx-kjua>

Hi! First of all, thanks for this awesome package.

I'm having some issues after upgrading to Angular 18 and 18.1.1 version of this lib:

 [ERROR] Cannot assign to import "stringToBytes"

    node_modules/ngx-kjua/fesm2022/ngx-kjua.mjs:587:7:
      587 │ qr_gen.stringToBytes = qr_gen.stringToBytesFuncs["UTF-8"];
          ╵        ~~~~~~~~~~~~~

  Imports are immutable in JavaScript. To modify the value of this import, you must export a setter
  function in the imported file (e.g. "setStringToBytes") and then import and call that function
  here instead.

I didn't have any issue in NG17
Thanks

Edit: I think this is the problem?

I'm using the application builder since it's recommended in v17 and higher

Description

The container height isn't the same as the svg one

Idea how to fix

I'd give the div that we have around the svg the same height & width

Why is it a problem.

As you can see in the picture, I would have loved to add a rounded border all around, but this isn't working properly.

Description

Being able to add an id to the image could be really useful.

Objective

Being able to get the element with its ID so we could download the image in the local machine.

Implementation

@input() id: string

Result

<svg id="myId" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" style="width: 200px; height: 200px;">

Hi,

First of all what a nice library you have here for angular.
Im creating a qr code with vcf contact details. My image is base64 and its too long im getting this error ERROR Error: code length overflow.

do we have any alternative?

and also when generating a qr code, it padding in the side depending on values. Notice the white background differs

Description

Would it be doable to avoid rendering the middle of the qr-code ?

This would enable having gradient under the qr-code

When using ngx-kjua with Angular Universal (for SSR support), an error is thrown, when starting the node web server:

ReferenceError: window is not defined

Would be nice if the library could support angular 17.

Would also be nice if the library also support future angular update, in a way that this does accept those version, since angular is now pretty stable I'm that regards

Hi,

after upgrading to Angular 10 I am getting this warning on build.

Warning: /Users/m/Projects/stocki.fy/ng-client/src/app/app.module.ts depends on 'ngx-kjua'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

I am importing and using the module like shown in the readme.

Description

Same as this issue, but while using svg.

Description

even with quiet: 0 the QR-Code sometimes have a white border.

Expected behavior

Being able to set [quiet]="0" or simple not adding the variable at all and having a nice path that is merged with the border

ERROR in ./src/app/modules/ngx-kjua/ngx-kjua.component.ts
Module not found: Error: Can't resolve 'kjua' in '/Users/dev/Documents/GitHub/ngx-kjua/src/app/modules/ngx-kjua'
Failed to compile

• npm install kjua - ok

guys, can someone show me how to add an image on the qr code using base64? i am a little bit confused, i appreciate your attention.

Hi,
when I import NgxKjuaModule
import { NgxKjuaModule } from 'ngx-kjua';
I have this error:

ERROR in ./node_modules/ngx-kjua/esm5/ngx-kjua.js
Module not found: Error: Can't resolve 'kjua' in 'C:\....\node_modules\ngx-kjua\esm5'

Description

Support v18

Hi,

I would like to add password in my QR code so if and when I scan my barcode, it will ask for password and if I entered correct password then only will able to read the content of barcode.

Is it possible in your QR code script?

Angular: 7.2.11
ngx-kjua: 1.3.1
kjua: 0.1.2

Imported into the root level app.module.ts using readme details.

import { NgxKjuaModule } from 'ngx-kjua';

ng serve throws the following error. Vs code highlights and shows the same:

ERROR in src/app/app.module.ts(24,31): error TS2307: Cannot find module 'ngx-kjua'

All dependencies are installed and visible in the node modules directory

QrCodeHelper should be exported in the public-api.ts

(Downgrading to 1.14.1 works)

I pretty sure you are already aware but this lib needs an update 😉

While Scanning QR Code With iphone Camera Scanner ,
If Number Of The Words while creating Contact more than three not read The name

The error occurs: (Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got null) during compilation in Angular v9; The error occurs because kjua-svg uses [email protected]; Update this, please !!!
[https://github.com/werthdavid/kjua/issues/2#issue-578281722]

Description

Somehow, I've added a number to the qr-code generator and it outputted me a qr-code.

Little did I know that it was just a default image with no value.

Idk why I was to lazy to test it, but I just shipped it.

It didn't work, obviously.

Feature request

Being able to pass a number and it being converted automatically to a string.

Code

From

  @Input()
  text = "";

To

  private _text = "";
  @Input() text(value: any) {
    if (String(value)) this._text = value;
    else if (Number(value)) this._text = value.toString();
    else this._text = "";
  }

I would find it very useful that have a small CHANGELOG.md file that list what does have the new release, so that we know why we are updating the library, and if it may break stuff.

Hi, first of all, thanks for this awesome package.

I'm having trouble installing the lib in an Angular 16 app:
peer @angular/core@">=14.0.0 <16.0.0" from [email protected]

Thanks

Description

Would be nice to accept string instead of only number, so we can write size="200" & [size]="200" at the same time

It would be nice to have a SVG way to render the QR codes.

Trying out v2.0 but getting error with Angular v13.0.0

Error: src/app/components/qr-code/qr-code.component.html:4:7 - error NG8001: 'ngx-kjua' is not a known element:

1. If 'ngx-kjua' is an Angular component, then verify that it is part of this module.
2. If 'ngx-kjua' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

4 <ngx-kjua
~~~~~~~~~
5 [renderAsync]="true"
~~~~~~~~~~~~~~~~~~~~~~~~~~
...
13 [size]="size"
~~~~~~~~~~~~~~~~~~~
14 >

How to use this library on Ionic 5? i've got an error while use this library

Step to reproduce:

1. in blabla.module.ts =
   import { NgxKjuaModule } from 'ngx-kjua'; ... imports: [ ... NgxKjuaModule, ]
2. in blabla.page.html =
   <ngx-kjua [text]="'testttttt'"></ngx-kjua>

i use [email protected]

The logic of the makeEvent-method in QrCodeHelper currently gives a wrong date.

After updating to Angular 9, the following error occurs:

ERROR TypeError: Cannot read property 'nativeElement' of undefined at NgxKjuaComponent.updateView (ngx-kjua-example-7-ybjnas.stackblitz.io/turbo_modules/[email protected]/bundles/ngx-kjua.umd.js:159)

Forked stackblitz project: https://stackblitz.com/edit/ngx-kjua-example-7-ybjnas

Hi.

Thank you for the great plugin.

When running on Angular 14 the following error is displayed.

ERROR TypeError: (kjua_svg__WEBPACK_IMPORTED_MODULE_0___namespace_cache || kjua_svg__WEBPACK_IMPORTED_MODULE_0___namespace_cache) is not a function
    at get template [as template] (http://localhost/src_app_pages_receive_receive_module_ts.js:2464:206)
    at NgxKjuaComponent.renderCode (http://localhost/src_app_pages_receive_receive_module_ts.js:2469:23)
    at NgxKjuaComponent.updateView (http://localhost/src_app_pages_receive_receive_module_ts.js:2495:14)
    at NgxKjuaComponent.ngAfterViewInit (http://localhost/src_app_pages_receive_receive_module_ts.js:2

Using

"kjua-svg": "^1.13.1",
"ngx-kjua": "^1.14.4",

Is there an easy workaround?

Cheers.