smart-webcomponents-react 13.1.1 → 13.1.26

package/qrcode/qrcode.d.ts

@@ -0,0 +1,141 @@
+import React from "react";
+import { QRcodeProperties } from "./../index";
+import { QRcodeLabelPosition, QRcodeRenderAs } from './../index';
+export { QRcodeProperties } from "./../index";
+export { QRcodeLabelPosition, QRcodeRenderAs } from './../index';
+export declare const Smart: any;
+export interface QRcodeProps extends QRcodeProperties {
+    className?: string;
+    style?: React.CSSProperties;
+    onInvalid?: ((event?: Event) => void) | undefined;
+    onCreate?: ((event?: Event) => void) | undefined;
+    onReady?: ((event?: Event) => void) | undefined;
+}
+/**
+ QR Codes encode text values in a two-dimensional pattern.
+*/
+export declare class QRcode extends React.Component<React.HTMLAttributes<Element> & QRcodeProps, any> {
+    private _id;
+    private nativeElement;
+    private componentRef;
+    get id(): string;
+    /** Sets the background color of the QR Code element.
+    *	Property type: string
+    */
+    get backgroundColor(): string;
+    set backgroundColor(value: string);
+    /** Sets whether the QR Code label is visible.
+    *	Property type: boolean
+    */
+    get disaplyLabel(): boolean;
+    set disaplyLabel(value: boolean);
+    /** Sets an embedded image.
+    *	Property type: string
+    */
+    get embedImage(): string;
+    set embedImage(value: string);
+    /** Sets the height of the embedded image.
+    *	Property type: number
+    */
+    get imageHeight(): number;
+    set imageHeight(value: number);
+    /** Sets the width of the embedded image.
+    *	Property type: number
+    */
+    get imageWidth(): number;
+    set imageWidth(value: number);
+    /** Sets the color of the QR Code label.
+    *	Property type: string
+    */
+    get labelCOlor(): string;
+    set labelCOlor(value: string);
+    /** Sets the font family of the QR Code label.
+    *	Property type: string
+    */
+    get labelFont(): string;
+    set labelFont(value: string);
+    /** Sets the font size of the QR Code label.
+    *	Property type: number
+    */
+    get labelFontSize(): number;
+    set labelFontSize(value: number);
+    /** Sets the bottom margin of the QR Code label.
+    *	Property type: number
+    */
+    get labelMarginBottom(): number;
+    set labelMarginBottom(value: number);
+    /** Sets the top margin of the QR Code label.
+    *	Property type: number
+    */
+    get labelMarginTop(): number;
+    set labelMarginTop(value: number);
+    /** Sets the position of the QR Code label.
+    *	Property type: QRcodeLabelPosition
+    */
+    get labelPosition(): QRcodeLabelPosition;
+    set labelPosition(value: QRcodeLabelPosition);
+    /** Sets the color of the QR Code lines.
+    *	Property type: string
+    */
+    get lineColor(): string;
+    set lineColor(value: string);
+    /** Sets the width of the QR Code square.
+    *	Property type: number
+    */
+    get squareWidth(): number;
+    set squareWidth(value: number);
+    /** Sets the rendering mode of the QR Code.
+    *	Property type: QRcodeRenderAs
+    */
+    get renderAs(): QRcodeRenderAs;
+    set renderAs(value: QRcodeRenderAs);
+    /** Sets or gets the value of the QR Code.
+    *	Property type: string
+    */
+    get value(): string;
+    set value(value: string);
+    get properties(): string[];
+    /**  This event is triggered when the value of the QR Code is invalid.
+    *  @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.
+    */
+    onInvalid?: ((event?: Event) => void) | undefined;
+    /**  This event occurs, when the React component is created.
+    *  @param event. The custom event. 	*/
+    onCreate?: ((event?: Event) => void) | undefined;
+    /**  This event occurs, when the React component is completely rendered.
+    *  @param event. The custom event. 	*/
+    onReady?: ((event?: Event) => void) | undefined;
+    get eventListeners(): string[];
+    /** Exports the QR Code.
+    * @param {string} format. The format of the exported file - svg, png, jpg
+    * @param {string} fileName?. The name of the exported file
+    */
+    export(format: string, fileName?: string): void;
+    /** Gets the base64 string of the QR Code
+    * @param {string} format. The dataURL format of the string - svg, png, jpg
+    * @returns {string}
+  */
+    getDataURL(format: string): Promise<any>;
+    /** Gets the base64 string of the QR Code
+    * @param {string} format. The dataURL format of the string - svg, png, jpg
+    * @returns {any}
+  */
+    getDataURLAsync(format: string): Promise<any>;
+    /** Gets the validity of the QR Code
+    * @returns {boolean}
+  */
+    isValid(): Promise<any>;
+    constructor(props: any);
+    componentDidRender(initialize: boolean): void;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    render(): React.ReactElement<{
+        ref: any;
+    }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+}
+export default QRcode;

package/qrcode/qrcode.esm.js

@@ -0,0 +1,376 @@
+
+import '../source/modules/smart.qrcode';
+
+import React from 'react';
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const Smart = window.Smart;
+/**
+ QR Codes encode text values in a two-dimensional pattern.
+*/
+class QRcode extends React.Component {
+    constructor(props) {
+        super(props);
+        this.componentRef = React.createRef();
+    }
+    // Gets the id of the React component.
+    get id() {
+        if (!this._id) {
+            this._id = 'QRcode' + Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+        }
+        return this._id;
+    }
+    /** Sets the background color of the QR Code element.
+    *	Property type: string
+    */
+    get backgroundColor() {
+        return this.nativeElement ? this.nativeElement.backgroundColor : undefined;
+    }
+    set backgroundColor(value) {
+        if (this.nativeElement) {
+            this.nativeElement.backgroundColor = value;
+        }
+    }
+    /** Sets whether the QR Code label is visible.
+    *	Property type: boolean
+    */
+    get disaplyLabel() {
+        return this.nativeElement ? this.nativeElement.disaplyLabel : undefined;
+    }
+    set disaplyLabel(value) {
+        if (this.nativeElement) {
+            this.nativeElement.disaplyLabel = value;
+        }
+    }
+    /** Sets an embedded image.
+    *	Property type: string
+    */
+    get embedImage() {
+        return this.nativeElement ? this.nativeElement.embedImage : undefined;
+    }
+    set embedImage(value) {
+        if (this.nativeElement) {
+            this.nativeElement.embedImage = value;
+        }
+    }
+    /** Sets the height of the embedded image.
+    *	Property type: number
+    */
+    get imageHeight() {
+        return this.nativeElement ? this.nativeElement.imageHeight : undefined;
+    }
+    set imageHeight(value) {
+        if (this.nativeElement) {
+            this.nativeElement.imageHeight = value;
+        }
+    }
+    /** Sets the width of the embedded image.
+    *	Property type: number
+    */
+    get imageWidth() {
+        return this.nativeElement ? this.nativeElement.imageWidth : undefined;
+    }
+    set imageWidth(value) {
+        if (this.nativeElement) {
+            this.nativeElement.imageWidth = value;
+        }
+    }
+    /** Sets the color of the QR Code label.
+    *	Property type: string
+    */
+    get labelCOlor() {
+        return this.nativeElement ? this.nativeElement.labelCOlor : undefined;
+    }
+    set labelCOlor(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelCOlor = value;
+        }
+    }
+    /** Sets the font family of the QR Code label.
+    *	Property type: string
+    */
+    get labelFont() {
+        return this.nativeElement ? this.nativeElement.labelFont : undefined;
+    }
+    set labelFont(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelFont = value;
+        }
+    }
+    /** Sets the font size of the QR Code label.
+    *	Property type: number
+    */
+    get labelFontSize() {
+        return this.nativeElement ? this.nativeElement.labelFontSize : undefined;
+    }
+    set labelFontSize(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelFontSize = value;
+        }
+    }
+    /** Sets the bottom margin of the QR Code label.
+    *	Property type: number
+    */
+    get labelMarginBottom() {
+        return this.nativeElement ? this.nativeElement.labelMarginBottom : undefined;
+    }
+    set labelMarginBottom(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelMarginBottom = value;
+        }
+    }
+    /** Sets the top margin of the QR Code label.
+    *	Property type: number
+    */
+    get labelMarginTop() {
+        return this.nativeElement ? this.nativeElement.labelMarginTop : undefined;
+    }
+    set labelMarginTop(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelMarginTop = value;
+        }
+    }
+    /** Sets the position of the QR Code label.
+    *	Property type: QRcodeLabelPosition
+    */
+    get labelPosition() {
+        return this.nativeElement ? this.nativeElement.labelPosition : undefined;
+    }
+    set labelPosition(value) {
+        if (this.nativeElement) {
+            this.nativeElement.labelPosition = value;
+        }
+    }
+    /** Sets the color of the QR Code lines.
+    *	Property type: string
+    */
+    get lineColor() {
+        return this.nativeElement ? this.nativeElement.lineColor : undefined;
+    }
+    set lineColor(value) {
+        if (this.nativeElement) {
+            this.nativeElement.lineColor = value;
+        }
+    }
+    /** Sets the width of the QR Code square.
+    *	Property type: number
+    */
+    get squareWidth() {
+        return this.nativeElement ? this.nativeElement.squareWidth : undefined;
+    }
+    set squareWidth(value) {
+        if (this.nativeElement) {
+            this.nativeElement.squareWidth = value;
+        }
+    }
+    /** Sets the rendering mode of the QR Code.
+    *	Property type: QRcodeRenderAs
+    */
+    get renderAs() {
+        return this.nativeElement ? this.nativeElement.renderAs : undefined;
+    }
+    set renderAs(value) {
+        if (this.nativeElement) {
+            this.nativeElement.renderAs = value;
+        }
+    }
+    /** Sets or gets the value of the QR Code.
+    *	Property type: string
+    */
+    get value() {
+        return this.nativeElement ? this.nativeElement.value : undefined;
+    }
+    set value(value) {
+        if (this.nativeElement) {
+            this.nativeElement.value = value;
+        }
+    }
+    // Gets the properties of the React component.
+    get properties() {
+        return ["backgroundColor", "disaplyLabel", "embedImage", "imageHeight", "imageWidth", "labelCOlor", "labelFont", "labelFontSize", "labelMarginBottom", "labelMarginTop", "labelPosition", "lineColor", "squareWidth", "renderAs", "value"];
+    }
+    // Gets the events of the React component.
+    get eventListeners() {
+        return ["onInvalid", "onCreate", "onReady"];
+    }
+    /** Exports the QR Code.
+    * @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);
+            });
+        }
+    }
+    /** Gets the base64 string of the QR Code
+    * @param {string} format. The dataURL format of the string - svg, png, jpg
+    * @returns {string}
+  */
+    getDataURL(format) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const getResultOnRender = () => {
+                return new Promise(resolve => {
+                    this.nativeElement.whenRendered(() => {
+                        const result = this.nativeElement.getDataURL(format);
+                        resolve(result);
+                    });
+                });
+            };
+            const result = yield getResultOnRender();
+            return result;
+        });
+    }
+    /** Gets the base64 string of the QR Code
+    * @param {string} format. The dataURL format of the string - svg, png, jpg
+    * @returns {any}
+  */
+    getDataURLAsync(format) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const getResultOnRender = () => {
+                return new Promise(resolve => {
+                    this.nativeElement.whenRendered(() => {
+                        const result = this.nativeElement.getDataURLAsync(format);
+                        resolve(result);
+                    });
+                });
+            };
+            const result = yield getResultOnRender();
+            return result;
+        });
+    }
+    /** Gets the validity of the QR Code
+    * @returns {boolean}
+  */
+    isValid() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const getResultOnRender = () => {
+                return new Promise(resolve => {
+                    this.nativeElement.whenRendered(() => {
+                        const result = this.nativeElement.isValid();
+                        resolve(result);
+                    });
+                });
+            };
+            const result = yield getResultOnRender();
+            return result;
+        });
+    }
+    componentDidRender(initialize) {
+        const that = this;
+        const props = {};
+        const events = {};
+        let styles = null;
+        for (let prop in that.props) {
+            if (prop === 'children') {
+                continue;
+            }
+            if (prop === 'style') {
+                styles = that.props[prop];
+                continue;
+            }
+            if (prop.startsWith('on') && that.properties.indexOf(prop) === -1) {
+                events[prop] = that.props[prop];
+                continue;
+            }
+            props[prop] = that.props[prop];
+        }
+        if (initialize) {
+            that.nativeElement = this.componentRef.current;
+        }
+        for (let prop in props) {
+            if (prop === 'class') {
+                const classNames = props[prop].trim().split(' ');
+                for (let className in classNames) {
+                    if (!that.nativeElement.classList.contains(classNames[className]) && classNames[className] !== "") {
+                        that.nativeElement.classList.add(classNames[className]);
+                    }
+                }
+                continue;
+            }
+            if (props[prop] !== that.nativeElement[prop]) {
+                const normalizeProp = (str) => {
+                    return str.replace(/-([a-z])/g, function (g) {
+                        return g[1].toUpperCase();
+                    });
+                };
+                if (prop === 'hover' || prop === 'active' || prop === 'focus' || prop === 'selected') {
+                    that.nativeElement.setAttribute(prop, '');
+                }
+                const normalizedProp = normalizeProp(prop);
+                that.nativeElement[normalizedProp] = props[prop];
+            }
+        }
+        for (let eventName in events) {
+            that[eventName] = events[eventName];
+            that.nativeElement[eventName.toLowerCase()] = events[eventName];
+        }
+        if (initialize) {
+            if (that.onCreate) {
+                that.onCreate();
+            }
+            that.nativeElement.whenRendered(() => {
+                if (that.onReady) {
+                    that.onReady();
+                }
+            });
+        }
+        // setup styles.
+        if (styles) {
+            for (let styleName in styles) {
+                that.nativeElement.style[styleName] = styles[styleName];
+            }
+        }
+    }
+    componentDidMount() {
+        this.componentDidRender(true);
+    }
+    componentDidUpdate() {
+        this.componentDidRender(false);
+    }
+    componentWillUnmount() {
+        const that = this;
+        if (!that.nativeElement) {
+            return;
+        }
+        that.nativeElement.whenRenderedCallbacks = [];
+        for (let i = 0; i < that.eventListeners.length; i++) {
+            const eventName = that.eventListeners[i];
+            that.nativeElement.removeEventListener(eventName.substring(2).toLowerCase(), that[eventName]);
+        }
+    }
+    render() {
+        return (React.createElement("smart-qrcode", { ref: this.componentRef }, this.props.children));
+    }
+}
+
+export default QRcode;
+export { Smart, QRcode };