@progress/kendo-angular-barcodes 1.0.0-next.202203150945 → 1.0.0

package/dist/es/qrcode.component.js

@@ -0,0 +1,147 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { ChangeDetectionStrategy, Component, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
+import { QRCode } from '@progress/kendo-charts';
+import { BaseComponent } from './base.component';
+import { packageMetadata } from './package-metadata';
+var DEFAULT_COLOR = '#000';
+var DEFAULT_BACKGROUND = '#fff';
+var DEFAULT_ERROR_CORRECTION = 'L';
+/**
+ * Represents the Kendo UI QR Code component for Angular.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
+ *        </kendo-qrcode>
+ *    `
+ * })
+ * export class AppComponent {
+ * }
+ * ```
+ */
+var QRCodeComponent = /** @class */ (function (_super) {
+    tslib_1.__extends(QRCodeComponent, _super);
+    function QRCodeComponent(element, renderer, ngZone) {
+        var _this = _super.call(this, element, renderer, ngZone) || this;
+        _this.element = element;
+        _this.renderer = renderer;
+        _this.ngZone = ngZone;
+        /**
+         * Limits the automatic resizing of the QR Code. Sets the maximum number of times per second
+         * that the component redraws its content when the size of its container changes.
+         * Defaults to `10`. To disable the automatic resizing, set it to `0`.
+         *
+         * @example
+         * ```ts
+         * _@Component({
+         *     selector: 'my-app',
+         *     template: `
+         *         <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
+         *                       [resizeRateLimit]="2">
+         *         </kendo-qrcode>
+         *   `
+         * })
+         * export class AppComponent {
+         * }
+         * ```
+         */
+        _this.resizeRateLimit = 10;
+        return _this;
+    }
+    Object.defineProperty(QRCodeComponent.prototype, "options", {
+        get: function () {
+            return {
+                background: this.background || DEFAULT_BACKGROUND,
+                border: this.border,
+                color: this.color || DEFAULT_COLOR,
+                encoding: this.encoding,
+                errorCorrection: this.errorCorrection || DEFAULT_ERROR_CORRECTION,
+                overlay: this.overlay || {},
+                padding: this.padding,
+                renderAs: this.renderAs,
+                size: this.size,
+                value: this.value
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    QRCodeComponent.prototype.createInstance = function (element, options) {
+        return new QRCode(element, options, this.onError.bind(this));
+    };
+    QRCodeComponent.prototype.onError = function (error) {
+        error.name = packageMetadata.productName + ' QRCode';
+        if (this.isDevMode()) {
+            throw error;
+        }
+        else {
+            console.warn(error);
+        }
+    };
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], QRCodeComponent.prototype, "background", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], QRCodeComponent.prototype, "border", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], QRCodeComponent.prototype, "color", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], QRCodeComponent.prototype, "encoding", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], QRCodeComponent.prototype, "errorCorrection", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], QRCodeComponent.prototype, "overlay", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], QRCodeComponent.prototype, "padding", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], QRCodeComponent.prototype, "renderAs", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], QRCodeComponent.prototype, "size", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], QRCodeComponent.prototype, "value", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Number)
+    ], QRCodeComponent.prototype, "resizeRateLimit", void 0);
+    QRCodeComponent = tslib_1.__decorate([
+        Component({
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            selector: 'kendo-qrcode',
+            exportAs: 'kendoQRCode',
+            template: "\n        <kendo-resize-sensor (resize)=\"onResize()\" [rateLimit]=\"resizeRateLimit\"></kendo-resize-sensor>\n    "
+        }),
+        tslib_1.__metadata("design:paramtypes", [ElementRef,
+            Renderer2,
+            NgZone])
+    ], QRCodeComponent);
+    return QRCodeComponent;
+}(BaseComponent));
+export { QRCodeComponent };

package/dist/es/qrcode.module.js

@@ -0,0 +1,52 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { NgModule } from '@angular/core';
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { QRCodeComponent } from './qrcode.component';
+/**
+ * Represents the [NgModule]({{ site.data.urls.angular['ngmoduleapi'] }})
+ * definition for the QR Code component.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the QR Code module
+ * import { QRCodeModule } from '@progress/kendo-angular-barcodes';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, QRCodeModule], // import QRCodeModule module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+var QRCodeModule = /** @class */ (function () {
+    function QRCodeModule() {
+    }
+    QRCodeModule = tslib_1.__decorate([
+        NgModule({
+            declarations: [QRCodeComponent],
+            imports: [ResizeSensorModule],
+            exports: [QRCodeComponent]
+        })
+    ], QRCodeModule);
+    return QRCodeModule;
+}());
+export { QRCodeModule };

package/dist/es2015/barcode-validator.d.ts

@@ -0,0 +1,29 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ValidatorFn } from '@angular/forms';
+import { geometry } from '@progress/kendo-drawing';
+import { BarcodeType } from './chart-types';
+/**
+ * Creates a value validator for a particular Barcode type.
+ *
+ * @param {BarcodeType} type The type of the Barcode.
+ * @param {Size} size The size of the barcode, excluding the text label, padding and border. Optional.
+ * @returns {ValidatorFn}  A validator function that returns an error map with the `barcode` property if the validation check fails, otherwise `null`.
+ *
+ * @example
+ * ```ts-no-run
+ * const control = new FormControl('1234', createBarcodeValidator('EAN8'));
+ * console.log(control.errors);
+ *
+ * // {
+ * //   barcode: {
+ * //     message: 'The value of the "EAN13" encoding should be 12 symbols',
+ * //     value: '1234',
+ * //     type: 'EAN13'
+ * //   }
+ * // }
+ * ```
+ */
+export declare const createBarcodeValidator: (type: BarcodeType, size?: geometry.Size) => ValidatorFn;

package/dist/es2015/barcode-validator.js

@@ -0,0 +1,51 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { barcodeValidator } from '@progress/kendo-charts';
+/**
+ * @hidden
+ */
+const isPresent = (value) => value !== null && value !== undefined;
+const ɵ0 = isPresent;
+/**
+ * Creates a value validator for a particular Barcode type.
+ *
+ * @param {BarcodeType} type The type of the Barcode.
+ * @param {Size} size The size of the barcode, excluding the text label, padding and border. Optional.
+ * @returns {ValidatorFn}  A validator function that returns an error map with the `barcode` property if the validation check fails, otherwise `null`.
+ *
+ * @example
+ * ```ts-no-run
+ * const control = new FormControl('1234', createBarcodeValidator('EAN8'));
+ * console.log(control.errors);
+ *
+ * // {
+ * //   barcode: {
+ * //     message: 'The value of the "EAN13" encoding should be 12 symbols',
+ * //     value: '1234',
+ * //     type: 'EAN13'
+ * //   }
+ * // }
+ * ```
+ */
+export const createBarcodeValidator = (type, size) => {
+    const validator = barcodeValidator(type, size);
+    return (control) => {
+        if (!isPresent(control.value) || control.value === '') {
+            return null;
+        }
+        const result = validator(control.value);
+        if (result.valid === true) {
+            return null;
+        }
+        return {
+            barcode: {
+                message: result.error.message,
+                value: control.value,
+                type: type
+            }
+        };
+    };
+};
+export { ɵ0 };

package/dist/es2015/barcode.component.d.ts

@@ -0,0 +1,312 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, NgZone, Renderer2 } from '@angular/core';
+import { Barcode, BarcodeOptions } from '@progress/kendo-charts';
+import { BaseComponent } from './base.component';
+import { BarcodeText, BarcodeType, Border, Padding, RenderMode } from './chart-types';
+/**
+ * Represents the Kendo UI Barcode component for Angular.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ *
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-barcode type="EAN8" value="1234567">
+ *        </kendo-barcode>
+ *    `
+ * })
+ * export class AppComponent {
+ * }
+ * ```
+ */
+export declare class BarcodeComponent extends BaseComponent {
+    protected element: ElementRef;
+    protected renderer: Renderer2;
+    protected ngZone: NgZone;
+    /**
+     * The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "white"
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       background="#fc0">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    background?: string;
+    /**
+     * The border of the Barcode.
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     * import { Border } from '@progress/kendo-angular-barcodes';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       [border]="barcodeBorder" [padding]="5">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     *     barcodeBorder: Border = {
+     *         color: '#fc0',
+     *         width: 2
+     *     };
+     * }
+     * ```
+     */
+    border?: Border;
+    /**
+     * If set to `true`, the Barcode will display the checksum digit next to the value in the text area.
+     *
+     * @default false
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       [checksum]="true">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    checksum?: boolean;
+    /**
+     * The color of the Barcode. Accepts a valid CSS color string, including hex and rgb.
+     *
+     * @default "black"
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       color="#fc0">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    color?: string;
+    /**
+     * The height of the Barcode in pixels.
+     *
+     * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                        [width]="200" [height]="100">
+     *        </kendo-barcode>
+     *
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       style="width: 200px; height: 100px;">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    height?: number;
+    /**
+     * The padding of the Barcode. A numeric value sets all paddings.
+     *
+     * @default 0
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     * import { Padding } from '@progress/kendo-angular-barcodes';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       [padding]="5" background="#fc0">
+     *        </kendo-barcode>
+     *
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       [padding]="barcodePadding" background="#cf0">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     *     barcodePadding: Padding = {
+     *         top: 20,
+     *         bottom: 10,
+     *         left: 5,
+     *         right: 5
+     *     };
+     * }
+     * ```
+     */
+    padding?: Padding | number;
+    /**
+     * Sets the preferred rendering mode of the Barcode.
+     *
+     * The supported values are:
+     * * `"canvas"`&mdash;Renders the component as a Canvas element.
+     * * `"svg"`&mdash;Renders the component as an inline SVG document.
+     *
+     * @default "svg"
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       renderAs="canvas">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    renderAs?: RenderMode;
+    /**
+     * The Barcode text label configuration.
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     * import { BarcodeText } from '@progress/kendo-angular-barcodes';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       [text]="barcodeText">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     *     barcodeText: BarcodeText = {
+     *         color: '#fc0',
+     *         font: '20px monospace'
+     *     };
+     * }
+     * ```
+     */
+    text?: BarcodeText;
+    /**
+     * The symbology (encoding) the Barcode will use.
+     *
+     * @default "Code39"
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN13" value="123456789987">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    type: BarcodeType;
+    /**
+     * The value of the Barcode.
+     *
+     * @example
+     * ```ts-preview
+     * import { Component } from '@angular/core';
+     *
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN13" value="123456789987">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    value: number | string;
+    /**
+     * The width of the Barcode in pixels.
+     *
+     * The Barcode dimensions can also be set through regular CSS styling.
+     *
+     * @example
+     * ```ts-preview
+     * _@Component({
+     *    selector: 'my-app',
+     *    template: `
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                        [width]="200" [height]="100">
+     *        </kendo-barcode>
+     *
+     *        <kendo-barcode type="EAN8" value="1234567"
+     *                       style="width: 200px; height: 100px;">
+     *        </kendo-barcode>
+     *    `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    width?: number;
+    /**
+     * Limits the automatic resizing of the Barcode. Sets the maximum number of times per second
+     * that the component redraws its content when the size of its container changes.
+     * Defaults to `10`. To disable the automatic resizing, set it to `0`.
+     *
+     * @example
+     * ```ts
+     * _@Component({
+     *     selector: 'my-app',
+     *     template: `
+     *         <kendo-barcode type="EAN8" [value]="1234567"
+     *                        [resizeRateLimit]="2">
+     *         </kendo-barcode>
+     *   `
+     * })
+     * export class AppComponent {
+     * }
+     * ```
+     */
+    resizeRateLimit: number;
+    protected readonly options: BarcodeOptions;
+    constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone);
+    protected createInstance(element: any, options: any): Barcode;
+    protected onError(error: Error): void;
+}