smart-webcomponents-angular
Version:
[](https://jqwidgets.com/license/)
467 lines (459 loc) • 23.8 kB
JavaScript
if(typeof window !== 'undefined') {
if (!window['Smart']) {
window['Smart'] = { RenderMode: 'manual' };
}
else {
window['Smart'].RenderMode = 'manual';
}
}
import './../source/modules/smart.qrcode';
import * as i0 from '@angular/core';
import { EventEmitter, Directive, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
class BaseElement {
constructor(ref) {
this.onCreate = new EventEmitter();
this.onReady = new EventEmitter();
this.onAttach = new EventEmitter();
this.onDetach = new EventEmitter();
const that = this;
this.nativeElement = ref.nativeElement;
that.nativeElement.onAttached = () => {
that.onAttach.emit(that.nativeElement);
};
that.nativeElement.onDetached = () => {
that.onDetach.emit(that.nativeElement);
};
}
addEventListener(type, listener, options = false) {
this.nativeElement.addEventListener(type, listener, options);
}
removeEventListener(type, listener, options = false) {
this.nativeElement.removeEventListener(type, listener, options);
}
dispatchEvent(event) {
return this.nativeElement.dispatchEvent(event);
}
blur() {
this.nativeElement.blur();
}
click() {
this.nativeElement.click();
}
focus(options) {
this.nativeElement.focus(options);
}
/** @description Sets or gets the license. */
get license() {
return this.nativeElement ? this.nativeElement.license : undefined;
}
set license(value) {
this.nativeElement ? this.nativeElement.license = value : undefined;
}
/** @description Sets or gets the language. Used in conjunction with the property messages. */
get locale() {
return this.nativeElement ? this.nativeElement.locale : undefined;
}
set locale(value) {
this.nativeElement ? this.nativeElement.locale = value : undefined;
}
/** @description Callback used to customize the format of the messages that are returned from the Localization Module. */
get localizeFormatFunction() {
return this.nativeElement ? this.nativeElement.localizeFormatFunction : undefined;
}
set localizeFormatFunction(value) {
this.nativeElement ? this.nativeElement.localizeFormatFunction = value : undefined;
}
/** @description Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale. */
get messages() {
return this.nativeElement ? this.nativeElement.messages : undefined;
}
set messages(value) {
this.nativeElement ? this.nativeElement.messages = value : undefined;
}
/** @description Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. */
get rightToLeft() {
return this.nativeElement ? this.nativeElement.rightToLeft : undefined;
}
set rightToLeft(value) {
this.nativeElement ? this.nativeElement.rightToLeft = value : undefined;
}
/** @description Determines the theme. Theme defines the look of the element */
get theme() {
return this.nativeElement ? this.nativeElement.theme : undefined;
}
set theme(value) {
this.nativeElement ? this.nativeElement.theme = value : undefined;
}
}
BaseElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: BaseElement, inputs: { license: "license", locale: "locale", localizeFormatFunction: "localizeFormatFunction", messages: "messages", rightToLeft: "rightToLeft", theme: "theme" }, outputs: { onCreate: "onCreate", onReady: "onReady", onAttach: "onAttach", onDetach: "onDetach" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: BaseElement, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onCreate: [{
type: Output
}], onReady: [{
type: Output
}], onAttach: [{
type: Output
}], onDetach: [{
type: Output
}], license: [{
type: Input
}], locale: [{
type: Input
}], localizeFormatFunction: [{
type: Input
}], messages: [{
type: Input
}], rightToLeft: [{
type: Input
}], theme: [{
type: Input
}] } });
let Smart;
if (typeof window !== "undefined") {
Smart = window.Smart;
}
class QRcodeComponent extends BaseElement {
constructor(ref) {
super(ref);
this.eventHandlers = [];
/** @description This event is triggered when the QR Code fails validation—specifically, when its decoded value does not meet the expected format, content requirements, or integrity checks. Developers can listen for this event to handle errors, display user feedback, or prompt for a new QR Code input.
* @param event. The custom event. Custom event was created with: event.detail( invalidCharacters, lengthValidity, patternValidity, value)
* invalidCharacters - An array indicating the invalid characters.
* lengthValidity - A boolean indicating the length validity.
* patternValidity - A boolean indicating the pattern validity.
* value - the invalid value of the QR Code.
*/
this.onInvalid = new EventEmitter();
this.nativeElement = ref.nativeElement;
}
/** @description Creates the component on demand.
* @param properties An optional object of properties, which will be added to the template binded ones.
*/
createComponent(properties = {}) {
this.nativeElement = document.createElement('smart-qrcode');
for (let propertyName in properties) {
this.nativeElement[propertyName] = properties[propertyName];
}
return this.nativeElement;
}
/** @description Specifies the background color applied to the QR Code element, determining the area behind the QR pattern. Accepts any valid CSS color value (e.g., hexadecimal, RGB, or color names). This setting allows you to customize the appearance of the QR Code to match your application's design. */
get backgroundColor() {
return this.nativeElement ? this.nativeElement.backgroundColor : undefined;
}
set backgroundColor(value) {
this.nativeElement ? this.nativeElement.backgroundColor = value : undefined;
}
/** @description Determines whether the label associated with the QR Code is displayed to users. When enabled, the label will appear alongside the QR Code; when disabled, the label will be hidden. */
get displayLabel() {
return this.nativeElement ? this.nativeElement.displayLabel : undefined;
}
set displayLabel(value) {
this.nativeElement ? this.nativeElement.displayLabel = value : undefined;
}
/** @description Embeds an image directly within the file, allowing the image to be displayed without referencing an external URL. This ensures the image is self-contained and always available as part of the JSON data. */
get embedImage() {
return this.nativeElement ? this.nativeElement.embedImage : undefined;
}
set embedImage(value) {
this.nativeElement ? this.nativeElement.embedImage = value : undefined;
}
/** @description Specifies the degree of error correction to be applied, determining how much of the data can be recovered if the file or code is partially damaged or obscured. Higher error correction levels provide more robust data recovery but may increase the file size. */
get errorLevel() {
return this.nativeElement ? this.nativeElement.errorLevel : undefined;
}
set errorLevel(value) {
this.nativeElement ? this.nativeElement.errorLevel = value : undefined;
}
/** @description Specifies the color that will fill the transparent areas of the embedded image. If this property is set to an empty string, the transparent regions will remain fully transparent, allowing the background beneath the image to show through. */
get imageBackgroundColor() {
return this.nativeElement ? this.nativeElement.imageBackgroundColor : undefined;
}
set imageBackgroundColor(value) {
this.nativeElement ? this.nativeElement.imageBackgroundColor = value : undefined;
}
/** @description Specifies the vertical dimension, in pixels or percentage, to display the embedded image. This determines how tall the image will appear within its container, regardless of its original size. */
get imageHeight() {
return this.nativeElement ? this.nativeElement.imageHeight : undefined;
}
set imageHeight(value) {
this.nativeElement ? this.nativeElement.imageHeight = value : undefined;
}
/** @description Specifies the width, in pixels or other valid CSS units, for displaying the embedded image. This determines how wide the image will appear within its container on the webpage. */
get imageWidth() {
return this.nativeElement ? this.nativeElement.imageWidth : undefined;
}
set imageWidth(value) {
this.nativeElement ? this.nativeElement.imageWidth = value : undefined;
}
/** @description Specifies the color used for the text label displayed below or alongside the QR Code. Accepts color values in standard formats such as hex codes (e.g., "#000000"), RGB, or named CSS colors. */
get labelColor() {
return this.nativeElement ? this.nativeElement.labelColor : undefined;
}
set labelColor(value) {
this.nativeElement ? this.nativeElement.labelColor = value : undefined;
}
/** @description Specifies the font family to be used for displaying the QR code label text. This determines the typeface style (e.g., Arial, Verdana, 'Times New Roman') applied to the label beneath or beside the QR code. */
get labelFont() {
return this.nativeElement ? this.nativeElement.labelFont : undefined;
}
set labelFont(value) {
this.nativeElement ? this.nativeElement.labelFont = value : undefined;
}
/** @description Specifies the font size used for the text label displayed below or alongside the QR code. Adjusting this value changes how large or small the label text appears relative to the QR code. Supports standard CSS size units (e.g., px, em, rem). */
get labelFontSize() {
return this.nativeElement ? this.nativeElement.labelFontSize : undefined;
}
set labelFontSize(value) {
this.nativeElement ? this.nativeElement.labelFontSize = value : undefined;
}
/** @description Specifies the amount of space (in pixels, ems, or other CSS units) added to the bottom of the QR Code label, effectively controlling the distance between the label and the elements below it. */
get labelMarginBottom() {
return this.nativeElement ? this.nativeElement.labelMarginBottom : undefined;
}
set labelMarginBottom(value) {
this.nativeElement ? this.nativeElement.labelMarginBottom = value : undefined;
}
/** @description Specifies the amount of space (in pixels or other CSS units) added to the top of the QR Code label, effectively controlling the distance between the label and any elements positioned above it. */
get labelMarginTop() {
return this.nativeElement ? this.nativeElement.labelMarginTop : undefined;
}
set labelMarginTop(value) {
this.nativeElement ? this.nativeElement.labelMarginTop = value : undefined;
}
/** @description Specifies the placement of the label relative to the QR Code, such as positioning it above, below, to the left, or to the right of the QR Code. This property determines where the label will appear in relation to the generated QR Code image. */
get labelPosition() {
return this.nativeElement ? this.nativeElement.labelPosition : undefined;
}
set labelPosition(value) {
this.nativeElement ? this.nativeElement.labelPosition = value : undefined;
}
/** @description Specifies the color used for the QR Code’s foreground lines (modules or squares), determining how the QR Code pattern appears. Accepts color formats such as HEX, RGB, or named colors. The background color is not affected by this setting. */
get lineColor() {
return this.nativeElement ? this.nativeElement.lineColor : undefined;
}
set lineColor(value) {
this.nativeElement ? this.nativeElement.lineColor = value : undefined;
}
/** @description Specifies the width of the generated QR Code, in pixels. This value determines the size of the QR Code square displayed on the page. */
get squareWidth() {
return this.nativeElement ? this.nativeElement.squareWidth : undefined;
}
set squareWidth(value) {
this.nativeElement ? this.nativeElement.squareWidth = value : undefined;
}
/** @description Specifies the rendering method used to display the QR Code, such as SVG, Canvas, or Image. This determines how the QR Code is visually generated and presented in the application. */
get renderAs() {
return this.nativeElement ? this.nativeElement.renderAs : undefined;
}
set renderAs(value) {
this.nativeElement ? this.nativeElement.renderAs = value : undefined;
}
/** @description Gets or sets the content encoded in the QR Code, such as a URL, text, or other data. Use this property to specify or retrieve the information that will be embedded within the generated QR Code. */
get value() {
return this.nativeElement ? this.nativeElement.value : undefined;
}
set value(value) {
this.nativeElement ? this.nativeElement.value = value : undefined;
}
/** @description Specifies or retrieves the width of the QR Code in pixels. If set to 0, the width will be determined automatically based on the QR Code’s content and configuration, ensuring optimal sizing. Setting a specific positive value allows you to control the exact width of the generated QR Code. */
get width() {
return this.nativeElement ? this.nativeElement.width : undefined;
}
set width(value) {
this.nativeElement ? this.nativeElement.width = value : undefined;
}
/** @description Specifies or retrieves the height of the QR code, in pixels. When a value of 0 is assigned, the component automatically calculates and sets the optimal height based on the content and other configuration options. Otherwise, the QR code is rendered with the specified height. */
get height() {
return this.nativeElement ? this.nativeElement.height : undefined;
}
set height(value) {
this.nativeElement ? this.nativeElement.height = value : undefined;
}
/** @description Exports the generated QR Code image in a selected format, such as PNG or SVG, allowing users to download or save the QR Code for use in other applications.
* @param {string} format. The format of the exported file - svg, png, jpg
* @param {string} fileName?. The name of the exported file
*/
export(format, fileName) {
if (this.nativeElement.isRendered) {
this.nativeElement.export(format, fileName);
}
else {
this.nativeElement.whenRendered(() => {
this.nativeElement.export(format, fileName);
});
}
}
/** @description Retrieves the QR Code as a base64-encoded string representation of the image, suitable for embedding directly in HTML or storing for later use.
* @param {string} format. The dataURL format of the string - svg, png, jpg
* @returns {string}
*/
async getDataURL(format) {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getDataURL(format);
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
getDataURLSync(format) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getDataURL(format);
}
return null;
}
/** @description Retrieves the QR code as a Base64-encoded string, allowing you to easily embed or transfer the QR code image in web pages, APIs, or data storage without handling image files directly.
* @param {string} format. The dataURL format of the string - svg, png, jpg
* @returns {any}
*/
async getDataURLAsync(format) {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.getDataURLAsync(format);
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
getDataURLAsyncSync(format) {
if (this.nativeElement.isRendered) {
return this.nativeElement.getDataURLAsync(format);
}
return null;
}
/** @description Retrieves and returns the current validity status of the QR Code, indicating whether the QR Code is active, expired, or invalid.
* @returns {boolean}
*/
async isValid() {
const getResultOnRender = () => {
return new Promise(resolve => {
this.nativeElement.whenRendered(() => {
const result = this.nativeElement.isValid();
resolve(result);
});
});
};
const result = await getResultOnRender();
return result;
}
isValidSync() {
if (this.nativeElement.isRendered) {
return this.nativeElement.isValid();
}
return null;
}
get isRendered() {
return this.nativeElement ? this.nativeElement.isRendered : false;
}
ngOnInit() {
}
ngAfterViewInit() {
const that = this;
that.onCreate.emit(that.nativeElement);
if (Smart)
Smart.Render();
this.nativeElement.classList.add('smart-angular');
if (this.nativeElement.whenRendered)
this.nativeElement.whenRendered(() => { that.onReady.emit(that.nativeElement); });
this.listen();
}
ngOnDestroy() {
this.unlisten();
}
ngOnChanges(changes) {
if (this.nativeElement && this.nativeElement.isRendered) {
for (const propName in changes) {
if (changes.hasOwnProperty(propName)) {
this.nativeElement[propName] = changes[propName].currentValue;
}
}
}
}
/** @description Add event listeners. */
listen() {
const that = this;
that.eventHandlers['invalidHandler'] = (event) => { that.onInvalid.emit(event); };
that.nativeElement.addEventListener('invalid', that.eventHandlers['invalidHandler']);
}
/** @description Remove event listeners. */
unlisten() {
const that = this;
if (that.eventHandlers['invalidHandler']) {
that.nativeElement.removeEventListener('invalid', that.eventHandlers['invalidHandler']);
}
}
}
QRcodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
QRcodeComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: QRcodeComponent, selector: "smart-qrcode, [smart-qrcode]", inputs: { backgroundColor: "backgroundColor", displayLabel: "displayLabel", embedImage: "embedImage", errorLevel: "errorLevel", imageBackgroundColor: "imageBackgroundColor", imageHeight: "imageHeight", imageWidth: "imageWidth", labelColor: "labelColor", labelFont: "labelFont", labelFontSize: "labelFontSize", labelMarginBottom: "labelMarginBottom", labelMarginTop: "labelMarginTop", labelPosition: "labelPosition", lineColor: "lineColor", squareWidth: "squareWidth", renderAs: "renderAs", value: "value", width: "width", height: "height" }, outputs: { onInvalid: "onInvalid" }, exportAs: ["smart-qrcode"], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeComponent, decorators: [{
type: Directive,
args: [{
exportAs: 'smart-qrcode', selector: 'smart-qrcode, [smart-qrcode]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { backgroundColor: [{
type: Input
}], displayLabel: [{
type: Input
}], embedImage: [{
type: Input
}], errorLevel: [{
type: Input
}], imageBackgroundColor: [{
type: Input
}], imageHeight: [{
type: Input
}], imageWidth: [{
type: Input
}], labelColor: [{
type: Input
}], labelFont: [{
type: Input
}], labelFontSize: [{
type: Input
}], labelMarginBottom: [{
type: Input
}], labelMarginTop: [{
type: Input
}], labelPosition: [{
type: Input
}], lineColor: [{
type: Input
}], squareWidth: [{
type: Input
}], renderAs: [{
type: Input
}], value: [{
type: Input
}], width: [{
type: Input
}], height: [{
type: Input
}], onInvalid: [{
type: Output
}] } });
class QRcodeModule {
}
QRcodeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
QRcodeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeModule, declarations: [QRcodeComponent], exports: [QRcodeComponent] });
QRcodeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeModule });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: QRcodeModule, decorators: [{
type: NgModule,
args: [{
declarations: [QRcodeComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports: [QRcodeComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { QRcodeComponent, QRcodeModule, Smart };
//# sourceMappingURL=smart-webcomponents-angular-qrcode.mjs.map