@progress/kendo-angular-barcodes
Version:
Kendo UI Angular Barcodes
316 lines (315 loc) • 9.57 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 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';
import * as i0 from "@angular/core";
/**
* 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.px]="200" [style.height.px]="100">
* </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"`—Renders the component as a Canvas element.
* * `"svg"`—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.px]="200" [style.height.px]="100">
* </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 get options(): BarcodeOptions;
constructor(element: ElementRef, renderer: Renderer2, ngZone: NgZone);
protected createInstance(element: any, options: any): Barcode;
protected onError(error: Error): void;
static ɵfac: i0.ɵɵFactoryDeclaration<BarcodeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BarcodeComponent, "kendo-barcode", ["kendoBarcode"], { "background": { "alias": "background"; "required": false; }; "border": { "alias": "border"; "required": false; }; "checksum": { "alias": "checksum"; "required": false; }; "color": { "alias": "color"; "required": false; }; "height": { "alias": "height"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "renderAs": { "alias": "renderAs"; "required": false; }; "text": { "alias": "text"; "required": false; }; "type": { "alias": "type"; "required": false; }; "value": { "alias": "value"; "required": false; }; "width": { "alias": "width"; "required": false; }; "resizeRateLimit": { "alias": "resizeRateLimit"; "required": false; }; }, {}, never, never, true, never>;
}