@progress/kendo-angular-barcodes 19.1.2-develop.1 → 19.1.2-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/barcode-validator.d.ts +7 -6
- package/barcode.component.d.ts +22 -228
- package/barcode.module.d.ts +10 -18
- package/barcodes.module.d.ts +10 -18
- package/chart-types/barcode-types.d.ts +18 -22
- package/chart-types/field-types.d.ts +15 -15
- package/chart-types/qrcode-types.d.ts +24 -33
- package/directives.d.ts +3 -3
- package/esm2022/barcode-validator.mjs +7 -6
- package/esm2022/barcode.component.mjs +22 -228
- package/esm2022/barcode.module.mjs +10 -18
- package/esm2022/barcodes.module.mjs +10 -18
- package/esm2022/directives.mjs +3 -3
- package/esm2022/package-metadata.mjs +2 -2
- package/esm2022/qrcode-validator.mjs +3 -3
- package/esm2022/qrcode.component.mjs +19 -202
- package/esm2022/qrcode.module.mjs +10 -19
- package/fesm2022/progress-kendo-angular-barcodes.mjs +86 -499
- package/package.json +4 -4
- package/qrcode-validator.d.ts +3 -3
- package/qrcode.component.d.ts +19 -202
- package/qrcode.module.d.ts +10 -19
- package/schematics/ngAdd/index.js +1 -1
@@ -17,8 +17,8 @@ const packageMetadata = {
|
|
17
17
|
productName: 'Kendo UI for Angular',
|
18
18
|
productCode: 'KENDOUIANGULAR',
|
19
19
|
productCodes: ['KENDOUIANGULAR'],
|
20
|
-
publishDate:
|
21
|
-
version: '19.1.2-develop.
|
20
|
+
publishDate: 1750152804,
|
21
|
+
version: '19.1.2-develop.3',
|
22
22
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
23
23
|
};
|
24
24
|
|
@@ -126,13 +126,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
126
126
|
}] } });
|
127
127
|
|
128
128
|
/**
|
129
|
-
* Represents the Kendo UI Barcode component for Angular.
|
129
|
+
* Represents the [Kendo UI Barcode component for Angular](slug:overview_barcode_barcodes).
|
130
|
+
*
|
131
|
+
* Use this component to display a barcode in your Angular application.
|
130
132
|
*
|
131
133
|
* @example
|
132
|
-
* ```
|
134
|
+
* ```typescript
|
133
135
|
* import { Component } from '@angular/core';
|
134
136
|
*
|
135
|
-
*
|
137
|
+
* @Component({
|
136
138
|
* selector: 'my-app',
|
137
139
|
* template: `
|
138
140
|
* <kendo-barcode type="EAN8" value="1234567">
|
@@ -148,280 +150,72 @@ class BarcodeComponent extends BaseComponent {
|
|
148
150
|
renderer;
|
149
151
|
ngZone;
|
150
152
|
/**
|
151
|
-
*
|
153
|
+
* Sets the background color of the Barcode. Accepts any valid CSS color string, such as hex or rgb.
|
152
154
|
*
|
153
155
|
* @default "white"
|
154
|
-
*
|
155
|
-
* @example
|
156
|
-
* ```ts-preview
|
157
|
-
* import { Component } from '@angular/core';
|
158
|
-
*
|
159
|
-
* _@Component({
|
160
|
-
* selector: 'my-app',
|
161
|
-
* template: `
|
162
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
163
|
-
* background="#fc0">
|
164
|
-
* </kendo-barcode>
|
165
|
-
* `
|
166
|
-
* })
|
167
|
-
* export class AppComponent {
|
168
|
-
* }
|
169
|
-
* ```
|
170
156
|
*/
|
171
157
|
background;
|
172
158
|
/**
|
173
|
-
*
|
174
|
-
*
|
175
|
-
* @example
|
176
|
-
* ```ts-preview
|
177
|
-
* import { Component } from '@angular/core';
|
178
|
-
* import { Border } from '@progress/kendo-angular-barcodes';
|
179
|
-
*
|
180
|
-
* _@Component({
|
181
|
-
* selector: 'my-app',
|
182
|
-
* template: `
|
183
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
184
|
-
* [border]="barcodeBorder" [padding]="5">
|
185
|
-
* </kendo-barcode>
|
186
|
-
* `
|
187
|
-
* })
|
188
|
-
* export class AppComponent {
|
189
|
-
* barcodeBorder: Border = {
|
190
|
-
* color: '#fc0',
|
191
|
-
* width: 2
|
192
|
-
* };
|
193
|
-
* }
|
194
|
-
* ```
|
159
|
+
* Configures the border of the Barcode.
|
195
160
|
*/
|
196
161
|
border;
|
197
162
|
/**
|
198
|
-
*
|
163
|
+
* Shows the checksum digit next to the value in the text area when set to `true`.
|
199
164
|
*
|
200
165
|
* @default false
|
201
|
-
*
|
202
|
-
* @example
|
203
|
-
* ```ts-preview
|
204
|
-
* _@Component({
|
205
|
-
* selector: 'my-app',
|
206
|
-
* template: `
|
207
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
208
|
-
* [checksum]="true">
|
209
|
-
* </kendo-barcode>
|
210
|
-
* `
|
211
|
-
* })
|
212
|
-
* export class AppComponent {
|
213
|
-
* }
|
214
|
-
* ```
|
215
166
|
*/
|
216
167
|
checksum;
|
217
168
|
/**
|
218
|
-
*
|
169
|
+
* Sets the color of the Barcode. Accepts any valid CSS color string, such as hex or rgb.
|
219
170
|
*
|
220
171
|
* @default "black"
|
221
|
-
*
|
222
|
-
* @example
|
223
|
-
* ```ts-preview
|
224
|
-
* _@Component({
|
225
|
-
* selector: 'my-app',
|
226
|
-
* template: `
|
227
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
228
|
-
* color="#fc0">
|
229
|
-
* </kendo-barcode>
|
230
|
-
* `
|
231
|
-
* })
|
232
|
-
* export class AppComponent {
|
233
|
-
* }
|
234
|
-
* ```
|
235
172
|
*/
|
236
173
|
color;
|
237
174
|
/**
|
238
|
-
*
|
239
|
-
*
|
240
|
-
* The Barcode dimensions can also be set through regular CSS styling.
|
241
|
-
*
|
242
|
-
* @example
|
243
|
-
* ```ts-preview
|
244
|
-
* _@Component({
|
245
|
-
* selector: 'my-app',
|
246
|
-
* template: `
|
247
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
248
|
-
* [width]="200" [height]="100">
|
249
|
-
* </kendo-barcode>
|
175
|
+
* Sets the height of the Barcode in pixels.
|
250
176
|
*
|
251
|
-
*
|
252
|
-
* [style.width.px]="200" [style.height.px]="100">
|
253
|
-
* </kendo-barcode>
|
254
|
-
* `
|
255
|
-
* })
|
256
|
-
* export class AppComponent {
|
257
|
-
* }
|
258
|
-
* ```
|
177
|
+
* You can also set the Barcode dimensions using CSS.
|
259
178
|
*/
|
260
179
|
height;
|
261
180
|
/**
|
262
|
-
*
|
181
|
+
* Sets the padding of the Barcode. Use a number to set all paddings, or a `Padding` object for the individual sides.
|
263
182
|
*
|
264
183
|
* @default 0
|
265
|
-
*
|
266
|
-
* @example
|
267
|
-
* ```ts-preview
|
268
|
-
* import { Component } from '@angular/core';
|
269
|
-
* import { Padding } from '@progress/kendo-angular-barcodes';
|
270
|
-
*
|
271
|
-
* _@Component({
|
272
|
-
* selector: 'my-app',
|
273
|
-
* template: `
|
274
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
275
|
-
* [padding]="5" background="#fc0">
|
276
|
-
* </kendo-barcode>
|
277
|
-
*
|
278
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
279
|
-
* [padding]="barcodePadding" background="#cf0">
|
280
|
-
* </kendo-barcode>
|
281
|
-
* `
|
282
|
-
* })
|
283
|
-
* export class AppComponent {
|
284
|
-
* barcodePadding: Padding = {
|
285
|
-
* top: 20,
|
286
|
-
* bottom: 10,
|
287
|
-
* left: 5,
|
288
|
-
* right: 5
|
289
|
-
* };
|
290
|
-
* }
|
291
|
-
* ```
|
292
184
|
*/
|
293
185
|
padding;
|
294
186
|
/**
|
295
|
-
* Sets the
|
187
|
+
* Sets the rendering mode of the Barcode.
|
296
188
|
*
|
297
|
-
*
|
298
|
-
* * `"canvas"`—Renders the component as a Canvas element.
|
299
|
-
* * `"svg"`—Renders the component as an inline SVG document.
|
189
|
+
* Use `"canvas"` to render as a Canvas element or `"svg"` to render as an inline SVG.
|
300
190
|
*
|
301
191
|
* @default "svg"
|
302
|
-
*
|
303
|
-
* @example
|
304
|
-
* ```ts-preview
|
305
|
-
* _@Component({
|
306
|
-
* selector: 'my-app',
|
307
|
-
* template: `
|
308
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
309
|
-
* renderAs="canvas">
|
310
|
-
* </kendo-barcode>
|
311
|
-
* `
|
312
|
-
* })
|
313
|
-
* export class AppComponent {
|
314
|
-
* }
|
315
|
-
* ```
|
316
192
|
*/
|
317
193
|
renderAs;
|
318
194
|
/**
|
319
|
-
*
|
320
|
-
*
|
321
|
-
* @example
|
322
|
-
* ```ts-preview
|
323
|
-
* import { Component } from '@angular/core';
|
324
|
-
* import { BarcodeText } from '@progress/kendo-angular-barcodes';
|
325
|
-
*
|
326
|
-
* _@Component({
|
327
|
-
* selector: 'my-app',
|
328
|
-
* template: `
|
329
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
330
|
-
* [text]="barcodeText">
|
331
|
-
* </kendo-barcode>
|
332
|
-
* `
|
333
|
-
* })
|
334
|
-
* export class AppComponent {
|
335
|
-
* barcodeText: BarcodeText = {
|
336
|
-
* color: '#fc0',
|
337
|
-
* font: '20px monospace'
|
338
|
-
* };
|
339
|
-
* }
|
340
|
-
* ```
|
195
|
+
* Configures the Barcode text label.
|
341
196
|
*/
|
342
197
|
text;
|
343
198
|
/**
|
344
|
-
*
|
199
|
+
* Sets the symbology (encoding) for the Barcode.
|
345
200
|
*
|
346
201
|
* @default "Code39"
|
347
|
-
*
|
348
|
-
* @example
|
349
|
-
* ```ts-preview
|
350
|
-
* import { Component } from '@angular/core';
|
351
|
-
*
|
352
|
-
* _@Component({
|
353
|
-
* selector: 'my-app',
|
354
|
-
* template: `
|
355
|
-
* <kendo-barcode type="EAN13" value="123456789987">
|
356
|
-
* </kendo-barcode>
|
357
|
-
* `
|
358
|
-
* })
|
359
|
-
* export class AppComponent {
|
360
|
-
* }
|
361
|
-
* ```
|
362
202
|
*/
|
363
203
|
type;
|
364
204
|
/**
|
365
|
-
*
|
366
|
-
*
|
367
|
-
* @example
|
368
|
-
* ```ts-preview
|
369
|
-
* import { Component } from '@angular/core';
|
370
|
-
*
|
371
|
-
* _@Component({
|
372
|
-
* selector: 'my-app',
|
373
|
-
* template: `
|
374
|
-
* <kendo-barcode type="EAN13" value="123456789987">
|
375
|
-
* </kendo-barcode>
|
376
|
-
* `
|
377
|
-
* })
|
378
|
-
* export class AppComponent {
|
379
|
-
* }
|
380
|
-
* ```
|
205
|
+
* Sets the value of the Barcode.
|
381
206
|
*/
|
382
207
|
value;
|
383
208
|
/**
|
384
|
-
*
|
385
|
-
*
|
386
|
-
* The Barcode dimensions can also be set through regular CSS styling.
|
209
|
+
* Sets the width of the Barcode in pixels.
|
387
210
|
*
|
388
|
-
*
|
389
|
-
* ```ts-preview
|
390
|
-
* _@Component({
|
391
|
-
* selector: 'my-app',
|
392
|
-
* template: `
|
393
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
394
|
-
* [width]="200" [height]="100">
|
395
|
-
* </kendo-barcode>
|
396
|
-
*
|
397
|
-
* <kendo-barcode type="EAN8" value="1234567"
|
398
|
-
* [style.width.px]="200" [style.height.px]="100">
|
399
|
-
* </kendo-barcode>
|
400
|
-
* `
|
401
|
-
* })
|
402
|
-
* export class AppComponent {
|
403
|
-
* }
|
404
|
-
* ```
|
211
|
+
* You can also set the Barcode dimensions using CSS.
|
405
212
|
*/
|
406
213
|
width;
|
407
214
|
/**
|
408
|
-
* Limits
|
409
|
-
*
|
410
|
-
* Defaults to `10`. To disable the automatic resizing, set it to `0`.
|
215
|
+
* Limits how often the Barcode resizes automatically. Sets the maximum number of redraws per second when the container size changes.
|
216
|
+
* Set to `0` to disable automatic resizing.
|
411
217
|
*
|
412
|
-
* @
|
413
|
-
* ```ts
|
414
|
-
* _@Component({
|
415
|
-
* selector: 'my-app',
|
416
|
-
* template: `
|
417
|
-
* <kendo-barcode type="EAN8" [value]="1234567"
|
418
|
-
* [resizeRateLimit]="2">
|
419
|
-
* </kendo-barcode>
|
420
|
-
* `
|
421
|
-
* })
|
422
|
-
* export class AppComponent {
|
423
|
-
* }
|
424
|
-
* ```
|
218
|
+
* @default 10
|
425
219
|
*/
|
426
220
|
resizeRateLimit = 10;
|
427
221
|
get options() {
|
@@ -504,13 +298,15 @@ const DEFAULT_COLOR = '#000';
|
|
504
298
|
const DEFAULT_BACKGROUND = '#fff';
|
505
299
|
const DEFAULT_ERROR_CORRECTION = 'L';
|
506
300
|
/**
|
507
|
-
* Represents the Kendo UI QR Code component for Angular.
|
301
|
+
* Represents the [Kendo UI QR Code component for Angular](slug:overview_qrcode_barcodes).
|
302
|
+
*
|
303
|
+
* Shows a QR Code for the provided value.
|
508
304
|
*
|
509
305
|
* @example
|
510
306
|
* ```ts
|
511
307
|
* import { Component } from '@angular/core';
|
512
308
|
*
|
513
|
-
*
|
309
|
+
* @Component({
|
514
310
|
* selector: 'my-app',
|
515
311
|
* template: `
|
516
312
|
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
|
@@ -526,257 +322,72 @@ class QRCodeComponent extends BaseComponent {
|
|
526
322
|
renderer;
|
527
323
|
ngZone;
|
528
324
|
/**
|
529
|
-
*
|
325
|
+
* Sets the background color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.
|
530
326
|
*
|
531
327
|
* @default "white"
|
532
|
-
*
|
533
|
-
* @example
|
534
|
-
* ```ts-preview
|
535
|
-
* import { Component } from '@angular/core';
|
536
|
-
*
|
537
|
-
* _@Component({
|
538
|
-
* selector: 'my-app',
|
539
|
-
* template: `
|
540
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
541
|
-
* background="#fc0">
|
542
|
-
* </kendo-qrcode>
|
543
|
-
* `
|
544
|
-
* })
|
545
|
-
* export class AppComponent {
|
546
|
-
* }
|
547
|
-
* ```
|
548
328
|
*/
|
549
329
|
background;
|
550
330
|
/**
|
551
|
-
*
|
552
|
-
*
|
553
|
-
* @example
|
554
|
-
* ```ts-preview
|
555
|
-
* import { Component } from '@angular/core';
|
556
|
-
* import { Border } from '@progress/kendo-angular-barcodes';
|
557
|
-
*
|
558
|
-
* _@Component({
|
559
|
-
* selector: 'my-app',
|
560
|
-
* template: `
|
561
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
562
|
-
* [border]="qrcodeBorder" [padding]="5">
|
563
|
-
* </kendo-qrcode>
|
564
|
-
* `
|
565
|
-
* })
|
566
|
-
* export class AppComponent {
|
567
|
-
* qrcodeBorder: Border = {
|
568
|
-
* color: '#fc0',
|
569
|
-
* width: 2
|
570
|
-
* };
|
571
|
-
* }
|
572
|
-
* ```
|
331
|
+
* Sets the border of the QR Code.
|
573
332
|
*/
|
574
333
|
border;
|
575
334
|
/**
|
576
|
-
*
|
335
|
+
* Sets the color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.
|
577
336
|
*
|
578
337
|
* @default "black"
|
579
|
-
*
|
580
|
-
* @example
|
581
|
-
* ```ts-preview
|
582
|
-
* _@Component({
|
583
|
-
* selector: 'my-app',
|
584
|
-
* template: `
|
585
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
586
|
-
* color="#fc0">
|
587
|
-
* </kendo-qrcode>
|
588
|
-
* `
|
589
|
-
* })
|
590
|
-
* export class AppComponent {
|
591
|
-
* }
|
592
|
-
* ```
|
593
338
|
*/
|
594
339
|
color;
|
595
340
|
/**
|
596
|
-
*
|
597
|
-
*
|
598
|
-
* > **Important** The UTF-8 encoding is not included in the specifications and is not supported by all readers.
|
341
|
+
* Sets the encoding mode for the value.
|
599
342
|
*
|
600
|
-
* The
|
601
|
-
* * `"ISO_8859_1"`—Supports all characters from the [ISO/IEC 8859-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) character set.
|
602
|
-
* * `"UTF_8"`—Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
|
343
|
+
* > **Important** The UTF-8 encoding is not part of the specifications and some readers may not support it.
|
603
344
|
*
|
604
345
|
* @default "ISO_8859_1"
|
605
|
-
*
|
606
|
-
* @example
|
607
|
-
* ```ts-preview
|
608
|
-
* _@Component({
|
609
|
-
* selector: 'my-app',
|
610
|
-
* template: `
|
611
|
-
* <kendo-qrcode value="АБВ" encoding="UTF_8">
|
612
|
-
* </kendo-qrcode>
|
613
|
-
* `
|
614
|
-
* })
|
615
|
-
* export class AppComponent {
|
616
|
-
* }
|
617
|
-
* ```
|
618
346
|
*/
|
619
347
|
encoding;
|
620
348
|
/**
|
621
|
-
*
|
622
|
-
*
|
623
|
-
* The possible values are:
|
624
|
-
* * `"L"`—Approximately 7% of the codewords can be restored.
|
625
|
-
* * `"M"`—Approximately 15% of the codewords can be restored.
|
626
|
-
* * `"Q"`—Approximately 25% of the codewords can be restored.
|
627
|
-
* * `"H"`—Approximately 30% of the codewords can be restored.
|
349
|
+
* Sets the error correction level.
|
628
350
|
*
|
629
351
|
* @default "L"
|
630
|
-
*
|
631
|
-
* @example
|
632
|
-
* ```ts-preview
|
633
|
-
* _@Component({
|
634
|
-
* selector: 'my-app',
|
635
|
-
* template: `
|
636
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
637
|
-
* errorCorrection="Q">
|
638
|
-
* </kendo-qrcode>
|
639
|
-
* `
|
640
|
-
* })
|
641
|
-
* export class AppComponent {
|
642
|
-
* }
|
643
|
-
* ```
|
644
352
|
*/
|
645
353
|
errorCorrection;
|
646
354
|
/**
|
647
|
-
*
|
648
|
-
*
|
649
|
-
* > **Note** Always test if the code reads correctly with the applied overlay.
|
650
|
-
* > Depending on the length of the value and the size of the overlay, you might need to raise the `errorCorrection` level to `"M"` or `"H"`.
|
355
|
+
* Sets an optional image overlay to display over the QR Code.
|
651
356
|
*
|
652
|
-
*
|
653
|
-
* ```ts-preview
|
654
|
-
* import { QRCodeOverlay } from '@progress/kendo-angular-barcodes';
|
655
|
-
*
|
656
|
-
* _@Component({
|
657
|
-
* selector: 'my-app',
|
658
|
-
* template: `
|
659
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
660
|
-
* [overlay]="qrcodeOverlay">
|
661
|
-
* </kendo-qrcode>
|
662
|
-
* `
|
663
|
-
* })
|
664
|
-
* export class AppComponent {
|
665
|
-
* qrcodeOverlay: QRCodeOverlay = {
|
666
|
-
* type: 'swiss'
|
667
|
-
* };
|
668
|
-
* }
|
669
|
-
* ```
|
357
|
+
* > **Note** Always test if the code scans correctly with the overlay. If needed, increase the `errorCorrection` level to `"M"` or `"H"`.
|
670
358
|
*/
|
671
359
|
overlay;
|
672
360
|
/**
|
673
|
-
*
|
361
|
+
* Sets the padding for the QR Code in pixels.
|
674
362
|
*
|
675
363
|
* @default 0
|
676
|
-
*
|
677
|
-
* @example
|
678
|
-
* ```ts-preview
|
679
|
-
* import { Component } from '@angular/core';
|
680
|
-
*
|
681
|
-
* _@Component({
|
682
|
-
* selector: 'my-app',
|
683
|
-
* template: `
|
684
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
685
|
-
* [padding]="10" background="#fc0">
|
686
|
-
* </kendo-qrcode>
|
687
|
-
* `
|
688
|
-
* })
|
689
|
-
* export class AppComponent {
|
690
|
-
* }
|
691
|
-
* ```
|
692
364
|
*/
|
693
365
|
padding;
|
694
366
|
/**
|
695
|
-
* Sets the
|
696
|
-
*
|
697
|
-
* The supported values are:
|
698
|
-
* * `"canvas"`—Renders the component as a Canvas element.
|
699
|
-
* * `"svg"`—Renders the component as an inline SVG document.
|
367
|
+
* Sets the rendering mode for the QR Code.
|
700
368
|
*
|
701
369
|
* @default "svg"
|
702
|
-
*
|
703
|
-
* @example
|
704
|
-
* ```ts-preview
|
705
|
-
* _@Component({
|
706
|
-
* selector: 'my-app',
|
707
|
-
* template: `
|
708
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
709
|
-
* renderAs="canvas">
|
710
|
-
* </kendo-qrcode>
|
711
|
-
* `
|
712
|
-
* })
|
713
|
-
* export class AppComponent {
|
714
|
-
* }
|
715
370
|
* ```
|
716
371
|
*/
|
717
372
|
renderAs;
|
718
373
|
/**
|
719
|
-
*
|
374
|
+
* Sets the size of the QR Code. Numeric values are in pixels.
|
720
375
|
*
|
721
376
|
* If no size is specified, the size will be determined from the element width and height.
|
722
377
|
* If the element has width or height of zero, a default value of 200 pixels will be used.
|
723
378
|
*
|
724
379
|
* @default "200px"
|
725
|
-
*
|
726
|
-
* @example
|
727
|
-
* ```ts-preview
|
728
|
-
* _@Component({
|
729
|
-
* selector: 'my-app',
|
730
|
-
* template: `
|
731
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
732
|
-
* [size]="200">
|
733
|
-
* </kendo-qrcode>
|
734
|
-
*
|
735
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
736
|
-
* [style.width.px]="200" [style.height.px]="200">
|
737
|
-
* </kendo-qrcode>
|
738
|
-
* `
|
739
|
-
* })
|
740
|
-
* export class AppComponent {
|
741
|
-
* }
|
742
|
-
* ```
|
743
380
|
*/
|
744
381
|
size;
|
745
382
|
/**
|
746
|
-
*
|
747
|
-
*
|
748
|
-
* @example
|
749
|
-
* ```ts-preview
|
750
|
-
* _@Component({
|
751
|
-
* selector: 'my-app',
|
752
|
-
* template: `
|
753
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
|
754
|
-
* </kendo-qrcode>
|
755
|
-
* `
|
756
|
-
* })
|
757
|
-
* export class AppComponent {
|
758
|
-
* }
|
759
|
-
* ```
|
383
|
+
* Sets the value to encode in the QR Code.
|
760
384
|
*/
|
761
385
|
value;
|
762
386
|
/**
|
763
|
-
* Limits
|
764
|
-
*
|
765
|
-
* Defaults to `10`. To disable the automatic resizing, set it to `0`.
|
387
|
+
* Limits how often the QR Code resizes automatically. Sets the maximum redraws per second when the container size changes.
|
388
|
+
* Set to `0` to disable automatic resizing.
|
766
389
|
*
|
767
|
-
* @
|
768
|
-
* ```ts
|
769
|
-
* _@Component({
|
770
|
-
* selector: 'my-app',
|
771
|
-
* template: `
|
772
|
-
* <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
|
773
|
-
* [resizeRateLimit]="2">
|
774
|
-
* </kendo-qrcode>
|
775
|
-
* `
|
776
|
-
* })
|
777
|
-
* export class AppComponent {
|
778
|
-
* }
|
779
|
-
* ```
|
390
|
+
* @default 10
|
780
391
|
*/
|
781
392
|
resizeRateLimit = 10;
|
782
393
|
get options() {
|
@@ -853,19 +464,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
853
464
|
}] } });
|
854
465
|
|
855
466
|
/**
|
856
|
-
*
|
467
|
+
* Use this utility array to access all Barcode related components and directives in a standalone Angular component.
|
857
468
|
*/
|
858
469
|
const KENDO_BARCODE = [
|
859
470
|
BarcodeComponent
|
860
471
|
];
|
861
472
|
/**
|
862
|
-
*
|
473
|
+
* Use this utility array to access all QRCode related components and directives in a standalone Angular component.
|
863
474
|
*/
|
864
475
|
const KENDO_QRCODE = [
|
865
476
|
QRCodeComponent
|
866
477
|
];
|
867
478
|
/**
|
868
|
-
*
|
479
|
+
* Use this utility array to access all `@progress/kendo-angular-barcodes` related components and directives in a standalone Angular component.
|
869
480
|
*/
|
870
481
|
const KENDO_BARCODES = [
|
871
482
|
...KENDO_BARCODE,
|
@@ -874,34 +485,26 @@ const KENDO_BARCODES = [
|
|
874
485
|
|
875
486
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
876
487
|
/**
|
877
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
878
|
-
*
|
488
|
+
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Barcode component.
|
489
|
+
*
|
490
|
+
* Use this module to add Barcode support to your application.
|
879
491
|
*
|
880
492
|
* @example
|
881
493
|
*
|
882
|
-
* ```ts
|
883
|
-
* // Import the
|
494
|
+
* ```ts
|
495
|
+
* // Import the BarcodeModule.
|
884
496
|
* import { BarcodeModule } from '@progress/kendo-angular-barcodes';
|
885
497
|
*
|
886
|
-
* // The browser platform with a compiler
|
887
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
888
|
-
*
|
889
498
|
* import { NgModule } from '@angular/core';
|
890
|
-
*
|
891
|
-
* // Import the app component
|
499
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
892
500
|
* import { AppComponent } from './app.component';
|
893
501
|
*
|
894
|
-
*
|
895
|
-
*
|
896
|
-
*
|
897
|
-
*
|
898
|
-
* bootstrap: [AppComponent]
|
502
|
+
* @NgModule({
|
503
|
+
* declarations: [AppComponent],
|
504
|
+
* imports: [BrowserModule, BarcodeModule],
|
505
|
+
* bootstrap: [AppComponent]
|
899
506
|
* })
|
900
507
|
* export class AppModule {}
|
901
|
-
*
|
902
|
-
* // Compile and launch the module
|
903
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
904
|
-
*
|
905
508
|
* ```
|
906
509
|
*/
|
907
510
|
class BarcodeModule {
|
@@ -920,34 +523,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
920
523
|
|
921
524
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
922
525
|
/**
|
923
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
924
|
-
* definition for the QR Code component.
|
526
|
+
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the QR Code component.
|
925
527
|
*
|
926
|
-
*
|
528
|
+
* Use this module to add QR Code support to your application.
|
927
529
|
*
|
928
|
-
*
|
929
|
-
*
|
530
|
+
* @example
|
531
|
+
* ```ts
|
532
|
+
* // Import the QRCodeModule
|
930
533
|
* import { QRCodeModule } from '@progress/kendo-angular-barcodes';
|
931
534
|
*
|
932
|
-
* // The browser platform with a compiler
|
933
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
934
|
-
*
|
935
535
|
* import { NgModule } from '@angular/core';
|
936
|
-
*
|
937
|
-
* // Import the app component
|
536
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
938
537
|
* import { AppComponent } from './app.component';
|
939
538
|
*
|
940
|
-
*
|
941
|
-
*
|
942
|
-
*
|
943
|
-
*
|
944
|
-
* bootstrap: [AppComponent]
|
539
|
+
* @NgModule({
|
540
|
+
* declarations: [AppComponent],
|
541
|
+
* imports: [BrowserModule, QRCodeModule],
|
542
|
+
* bootstrap: [AppComponent]
|
945
543
|
* })
|
946
544
|
* export class AppModule {}
|
947
|
-
*
|
948
|
-
* // Compile and launch the module
|
949
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
950
|
-
*
|
951
545
|
* ```
|
952
546
|
*/
|
953
547
|
class QRCodeModule {
|
@@ -966,34 +560,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
966
560
|
|
967
561
|
//IMPORTANT: NgModule export kept for backwards compatibility
|
968
562
|
/**
|
969
|
-
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
|
970
|
-
*
|
563
|
+
* Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the Barcode and QR Code components.
|
564
|
+
*
|
565
|
+
* Use this module to add Barcode and QR Code features to your application.
|
971
566
|
*
|
972
567
|
* @example
|
973
568
|
*
|
974
|
-
* ```ts
|
975
|
-
* // Import the Barcodes module
|
569
|
+
* ```ts
|
570
|
+
* // Import the Barcodes module.
|
976
571
|
* import { BarcodesModule } from '@progress/kendo-angular-barcodes';
|
977
572
|
*
|
978
|
-
* // The browser platform with a compiler
|
979
|
-
* import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
980
|
-
*
|
981
573
|
* import { NgModule } from '@angular/core';
|
982
|
-
*
|
983
|
-
* // Import the app component
|
574
|
+
* import { BrowserModule } from '@angular/platform-browser';
|
984
575
|
* import { AppComponent } from './app.component';
|
985
576
|
*
|
986
|
-
*
|
987
|
-
*
|
988
|
-
*
|
989
|
-
*
|
990
|
-
* bootstrap: [AppComponent]
|
577
|
+
* @NgModule({
|
578
|
+
* declarations: [AppComponent],
|
579
|
+
* imports: [BrowserModule, BarcodesModule],
|
580
|
+
* bootstrap: [AppComponent]
|
991
581
|
* })
|
992
582
|
* export class AppModule {}
|
993
|
-
*
|
994
|
-
* // Compile and launch the module
|
995
|
-
* platformBrowserDynamic().bootstrapModule(AppModule);
|
996
|
-
*
|
997
583
|
* ```
|
998
584
|
*/
|
999
585
|
class BarcodesModule {
|
@@ -1015,17 +601,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1015
601
|
*/
|
1016
602
|
const isPresent = (value) => value !== null && value !== undefined;
|
1017
603
|
/**
|
1018
|
-
* Creates a
|
604
|
+
* Creates a validator for a specific Barcode type.
|
605
|
+
*
|
606
|
+
* Use this function to validate a Barcode value for a given `BarcodeType`.
|
1019
607
|
*
|
1020
|
-
* @param
|
1021
|
-
* @param
|
1022
|
-
* @returns
|
608
|
+
* @param type Specifies the type of the Barcode.
|
609
|
+
* @param size Specifies the size of the barcode, excluding the text label, padding, and border. This parameter is optional.
|
610
|
+
* @returns Returns a validator function. The function returns an error map with the `barcode` property if validation fails. Otherwise, it returns `null` if valid.
|
1023
611
|
*
|
1024
612
|
* @example
|
1025
|
-
* ```
|
613
|
+
* ```typescript
|
1026
614
|
* const control = new FormControl('1234', createBarcodeValidator('EAN8'));
|
1027
615
|
* console.log(control.errors);
|
1028
|
-
*
|
1029
616
|
* // {
|
1030
617
|
* // barcode: {
|
1031
618
|
* // message: 'The value of the "EAN13" encoding should be 12 symbols',
|
@@ -1056,10 +643,10 @@ const createBarcodeValidator = (type, size) => {
|
|
1056
643
|
};
|
1057
644
|
|
1058
645
|
/**
|
1059
|
-
* Creates a value validator for a
|
646
|
+
* Creates a value validator for a specific QR Code encoding.
|
1060
647
|
*
|
1061
|
-
* @param {QRCodeEncoding} encoding
|
1062
|
-
* @returns {ValidatorFn}
|
648
|
+
* @param {QRCodeEncoding} encoding Sets the QR Code encoding. Defaults to `ISO_8859_1`.
|
649
|
+
* @returns {ValidatorFn} Returns a validator function. The function returns an error map with the `qrcode` property if the value is invalid. Otherwise, it returns `null`.
|
1063
650
|
*
|
1064
651
|
* @example
|
1065
652
|
* ```ts-no-run
|