@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.
@@ -12,13 +12,15 @@ const DEFAULT_COLOR = '#000';
12
12
  const DEFAULT_BACKGROUND = '#fff';
13
13
  const DEFAULT_ERROR_CORRECTION = 'L';
14
14
  /**
15
- * Represents the Kendo UI QR Code component for Angular.
15
+ * Represents the [Kendo UI QR Code component for Angular](slug:overview_qrcode_barcodes).
16
+ *
17
+ * Shows a QR Code for the provided value.
16
18
  *
17
19
  * @example
18
20
  * ```ts
19
21
  * import { Component } from '@angular/core';
20
22
  *
21
- * _@Component({
23
+ * @Component({
22
24
  * selector: 'my-app',
23
25
  * template: `
24
26
  * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
@@ -34,257 +36,72 @@ export class QRCodeComponent extends BaseComponent {
34
36
  renderer;
35
37
  ngZone;
36
38
  /**
37
- * The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
39
+ * Sets the background color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.
38
40
  *
39
41
  * @default "white"
40
- *
41
- * @example
42
- * ```ts-preview
43
- * import { Component } from '@angular/core';
44
- *
45
- * _@Component({
46
- * selector: 'my-app',
47
- * template: `
48
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
49
- * background="#fc0">
50
- * </kendo-qrcode>
51
- * `
52
- * })
53
- * export class AppComponent {
54
- * }
55
- * ```
56
42
  */
57
43
  background;
58
44
  /**
59
- * The border of the QR Code.
60
- *
61
- * @example
62
- * ```ts-preview
63
- * import { Component } from '@angular/core';
64
- * import { Border } from '@progress/kendo-angular-barcodes';
65
- *
66
- * _@Component({
67
- * selector: 'my-app',
68
- * template: `
69
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
70
- * [border]="qrcodeBorder" [padding]="5">
71
- * </kendo-qrcode>
72
- * `
73
- * })
74
- * export class AppComponent {
75
- * qrcodeBorder: Border = {
76
- * color: '#fc0',
77
- * width: 2
78
- * };
79
- * }
80
- * ```
45
+ * Sets the border of the QR Code.
81
46
  */
82
47
  border;
83
48
  /**
84
- * The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.
49
+ * Sets the color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.
85
50
  *
86
51
  * @default "black"
87
- *
88
- * @example
89
- * ```ts-preview
90
- * _@Component({
91
- * selector: 'my-app',
92
- * template: `
93
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
94
- * color="#fc0">
95
- * </kendo-qrcode>
96
- * `
97
- * })
98
- * export class AppComponent {
99
- * }
100
- * ```
101
52
  */
102
53
  color;
103
54
  /**
104
- * The encoding mode used to encode the value.
105
- *
106
- * > **Important** The UTF-8 encoding is not included in the specifications and is not supported by all readers.
55
+ * Sets the encoding mode for the value.
107
56
  *
108
- * The possible values are:
109
- * * `"ISO_8859_1"`&mdash;Supports all characters from the [ISO/IEC 8859-1](https://en.wikipedia.org/wiki/ISO/IEC_8859-1) character set.
110
- * * `"UTF_8"`&mdash;Supports all [Unicode](https://en.wikipedia.org/wiki/List_of_Unicode_characters) characters.
57
+ * > **Important** The UTF-8 encoding is not part of the specifications and some readers may not support it.
111
58
  *
112
59
  * @default "ISO_8859_1"
113
- *
114
- * @example
115
- * ```ts-preview
116
- * _@Component({
117
- * selector: 'my-app',
118
- * template: `
119
- * <kendo-qrcode value="АБВ" encoding="UTF_8">
120
- * </kendo-qrcode>
121
- * `
122
- * })
123
- * export class AppComponent {
124
- * }
125
- * ```
126
60
  */
127
61
  encoding;
128
62
  /**
129
- * The error correction level to use.
130
- *
131
- * The possible values are:
132
- * * `"L"`&mdash;Approximately 7% of the codewords can be restored.
133
- * * `"M"`&mdash;Approximately 15% of the codewords can be restored.
134
- * * `"Q"`&mdash;Approximately 25% of the codewords can be restored.
135
- * * `"H"`&mdash;Approximately 30% of the codewords can be restored.
63
+ * Sets the error correction level.
136
64
  *
137
65
  * @default "L"
138
- *
139
- * @example
140
- * ```ts-preview
141
- * _@Component({
142
- * selector: 'my-app',
143
- * template: `
144
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
145
- * errorCorrection="Q">
146
- * </kendo-qrcode>
147
- * `
148
- * })
149
- * export class AppComponent {
150
- * }
151
- * ```
152
66
  */
153
67
  errorCorrection;
154
68
  /**
155
- * An optional image overlay that will placed over the QR Code.
69
+ * Sets an optional image overlay to display over the QR Code.
156
70
  *
157
- * > **Note** Always test if the code reads correctly with the applied overlay.
158
- * > 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"`.
159
- *
160
- * @example
161
- * ```ts-preview
162
- * import { QRCodeOverlay } from '@progress/kendo-angular-barcodes';
163
- *
164
- * _@Component({
165
- * selector: 'my-app',
166
- * template: `
167
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
168
- * [overlay]="qrcodeOverlay">
169
- * </kendo-qrcode>
170
- * `
171
- * })
172
- * export class AppComponent {
173
- * qrcodeOverlay: QRCodeOverlay = {
174
- * type: 'swiss'
175
- * };
176
- * }
177
- * ```
71
+ * > **Note** Always test if the code scans correctly with the overlay. If needed, increase the `errorCorrection` level to `"M"` or `"H"`.
178
72
  */
179
73
  overlay;
180
74
  /**
181
- * The padding of the QR Code. The value sets all paddings in pixels.
75
+ * Sets the padding for the QR Code in pixels.
182
76
  *
183
77
  * @default 0
184
- *
185
- * @example
186
- * ```ts-preview
187
- * import { Component } from '@angular/core';
188
- *
189
- * _@Component({
190
- * selector: 'my-app',
191
- * template: `
192
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
193
- * [padding]="10" background="#fc0">
194
- * </kendo-qrcode>
195
- * `
196
- * })
197
- * export class AppComponent {
198
- * }
199
- * ```
200
78
  */
201
79
  padding;
202
80
  /**
203
- * Sets the preferred rendering mode of the QR Code.
204
- *
205
- * The supported values are:
206
- * * `"canvas"`&mdash;Renders the component as a Canvas element.
207
- * * `"svg"`&mdash;Renders the component as an inline SVG document.
81
+ * Sets the rendering mode for the QR Code.
208
82
  *
209
83
  * @default "svg"
210
- *
211
- * @example
212
- * ```ts-preview
213
- * _@Component({
214
- * selector: 'my-app',
215
- * template: `
216
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
217
- * renderAs="canvas">
218
- * </kendo-qrcode>
219
- * `
220
- * })
221
- * export class AppComponent {
222
- * }
223
84
  * ```
224
85
  */
225
86
  renderAs;
226
87
  /**
227
- * Specifies the size of a QR Code. Numeric values are treated as pixels.
88
+ * Sets the size of the QR Code. Numeric values are in pixels.
228
89
  *
229
90
  * If no size is specified, the size will be determined from the element width and height.
230
91
  * If the element has width or height of zero, a default value of 200 pixels will be used.
231
92
  *
232
93
  * @default "200px"
233
- *
234
- * @example
235
- * ```ts-preview
236
- * _@Component({
237
- * selector: 'my-app',
238
- * template: `
239
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
240
- * [size]="200">
241
- * </kendo-qrcode>
242
- *
243
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
244
- * [style.width.px]="200" [style.height.px]="200">
245
- * </kendo-qrcode>
246
- * `
247
- * })
248
- * export class AppComponent {
249
- * }
250
- * ```
251
94
  */
252
95
  size;
253
96
  /**
254
- * The value of the QR Code.
255
- *
256
- * @example
257
- * ```ts-preview
258
- * _@Component({
259
- * selector: 'my-app',
260
- * template: `
261
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
262
- * </kendo-qrcode>
263
- * `
264
- * })
265
- * export class AppComponent {
266
- * }
267
- * ```
97
+ * Sets the value to encode in the QR Code.
268
98
  */
269
99
  value;
270
100
  /**
271
- * Limits the automatic resizing of the QR Code. Sets the maximum number of times per second
272
- * that the component redraws its content when the size of its container changes.
273
- * Defaults to `10`. To disable the automatic resizing, set it to `0`.
101
+ * Limits how often the QR Code resizes automatically. Sets the maximum redraws per second when the container size changes.
102
+ * Set to `0` to disable automatic resizing.
274
103
  *
275
- * @example
276
- * ```ts
277
- * _@Component({
278
- * selector: 'my-app',
279
- * template: `
280
- * <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
281
- * [resizeRateLimit]="2">
282
- * </kendo-qrcode>
283
- * `
284
- * })
285
- * export class AppComponent {
286
- * }
287
- * ```
104
+ * @default 10
288
105
  */
289
106
  resizeRateLimit = 10;
290
107
  get options() {
@@ -9,34 +9,25 @@ import * as i0 from "@angular/core";
9
9
  import * as i1 from "./qrcode.component";
10
10
  //IMPORTANT: NgModule export kept for backwards compatibility
11
11
  /**
12
- * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
13
- * definition for the QR Code component.
12
+ * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi']) definition for the QR Code component.
14
13
  *
15
- * @example
14
+ * Use this module to add QR Code support to your application.
16
15
  *
17
- * ```ts-no-run
18
- * // Import the QR Code module
16
+ * @example
17
+ * ```ts
18
+ * // Import the QRCodeModule
19
19
  * import { QRCodeModule } from '@progress/kendo-angular-barcodes';
20
20
  *
21
- * // The browser platform with a compiler
22
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
23
- *
24
21
  * import { NgModule } from '@angular/core';
25
- *
26
- * // Import the app component
22
+ * import { BrowserModule } from '@angular/platform-browser';
27
23
  * import { AppComponent } from './app.component';
28
24
  *
29
- * // Define the app module
30
- * _@NgModule({
31
- * declarations: [AppComponent], // declare app component
32
- * imports: [BrowserModule, QRCodeModule], // import QRCodeModule module
33
- * bootstrap: [AppComponent]
25
+ * @NgModule({
26
+ * declarations: [AppComponent],
27
+ * imports: [BrowserModule, QRCodeModule],
28
+ * bootstrap: [AppComponent]
34
29
  * })
35
30
  * export class AppModule {}
36
- *
37
- * // Compile and launch the module
38
- * platformBrowserDynamic().bootstrapModule(AppModule);
39
- *
40
31
  * ```
41
32
  */
42
33
  export class QRCodeModule {