@pdfme/ui 1.0.18 → 1.1.1

package/dist/cjs/src/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateBarcodeInput = exports.checkGenerateProps = exports.checkDesignerProps = exports.checkPreviewProps = exports.checkUIProps = exports.checkTemplate = exports.isBarcodeSchema = exports.isImageSchema = exports.isTextSchema = exports.BLANK_PDF = exports.Form = exports.Viewer = exports.Designer = void 0;
+const Designer_js_1 = __importDefault(require("./Designer.js"));
+exports.Designer = Designer_js_1.default;
+const Form_js_1 = __importDefault(require("./Form.js"));
+exports.Form = Form_js_1.default;
+const Viewer_js_1 = __importDefault(require("./Viewer.js"));
+exports.Viewer = Viewer_js_1.default;
+var common_1 = require("@pdfme/common");
+Object.defineProperty(exports, "BLANK_PDF", { enumerable: true, get: function () { return common_1.BLANK_PDF; } });
+Object.defineProperty(exports, "isTextSchema", { enumerable: true, get: function () { return common_1.isTextSchema; } });
+Object.defineProperty(exports, "isImageSchema", { enumerable: true, get: function () { return common_1.isImageSchema; } });
+Object.defineProperty(exports, "isBarcodeSchema", { enumerable: true, get: function () { return common_1.isBarcodeSchema; } });
+Object.defineProperty(exports, "checkTemplate", { enumerable: true, get: function () { return common_1.checkTemplate; } });
+Object.defineProperty(exports, "checkUIProps", { enumerable: true, get: function () { return common_1.checkUIProps; } });
+Object.defineProperty(exports, "checkPreviewProps", { enumerable: true, get: function () { return common_1.checkPreviewProps; } });
+Object.defineProperty(exports, "checkDesignerProps", { enumerable: true, get: function () { return common_1.checkDesignerProps; } });
+Object.defineProperty(exports, "checkGenerateProps", { enumerable: true, get: function () { return common_1.checkGenerateProps; } });
+Object.defineProperty(exports, "validateBarcodeInput", { enumerable: true, get: function () { return common_1.validateBarcodeInput; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,gEAAqC;AAI5B,mBAJF,qBAAQ,CAIE;AAHjB,wDAA6B;AAGF,eAHpB,iBAAI,CAGoB;AAF/B,4DAAiC;AAEd,iBAFZ,mBAAM,CAEY;AAyBzB,wCAWuB;AAVrB,mGAAA,SAAS,OAAA;AACT,sGAAA,YAAY,OAAA;AACZ,uGAAA,aAAa,OAAA;AACb,yGAAA,eAAe,OAAA;AACf,uGAAA,aAAa,OAAA;AACb,sGAAA,YAAY,OAAA;AACZ,2GAAA,iBAAiB,OAAA;AACjB,4GAAA,kBAAkB,OAAA;AAClB,4GAAA,kBAAkB,OAAA;AAClB,8GAAA,oBAAoB,OAAA"}

package/dist/esm/__tests__/assets/helper.js

@@ -0,0 +1,51 @@
+import * as hooks from '../../src/hooks.js';
+import { uuid, getPdfPageSizes, pdf2Pngs } from '../../src/helper.js';
+import { BLANK_PDF } from '@pdfme/common';
+export const setupUIMock = () => {
+    const backgrounds = ['data:image/png;base64,a...'];
+    const pageSizes = [{ height: 297, width: 210 }];
+    const mock = jest.spyOn(hooks, 'useUIPreProcessor');
+    mock.mockImplementation(() => ({ backgrounds, pageSizes, scale: 1, error: null }));
+    getPdfPageSizes = jest.fn().mockReturnValue(Promise.resolve(pageSizes));
+    pdf2Pngs = jest.fn().mockReturnValue(Promise.resolve(backgrounds));
+    uuid = jest
+        .fn()
+        .mockReturnValueOnce('1')
+        .mockReturnValueOnce('2')
+        .mockReturnValueOnce('3')
+        .mockReturnValueOnce('4')
+        .mockReturnValueOnce('5');
+    const FontFace = jest.fn().mockReturnValue({ load: () => Promise.resolve() });
+    global.window.FontFace = FontFace;
+};
+export const getSampleTemplate = () => ({
+    columns: ['field1', 'field2'],
+    sampledata: [
+        {
+            field1: 'bb',
+            field2: 'aaaaaaaaaaaa',
+        },
+    ],
+    basePdf: BLANK_PDF,
+    schemas: [
+        {
+            field1: {
+                type: 'text',
+                position: { x: 20, y: 20 },
+                width: 100,
+                height: 15,
+                alignment: 'left',
+                fontSize: 30,
+                characterSpacing: 0,
+                lineHeight: 1,
+            },
+            field2: {
+                type: 'image',
+                position: { x: 20, y: 35 },
+                width: 100,
+                height: 40,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=helper.js.map

package/dist/esm/__tests__/assets/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../../__tests__/assets/helper.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAY,MAAM,eAAe,CAAC;AAEpD,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,WAAW,GAAG,CAAC,4BAA4B,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;IACpD,IAAI,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAClF,eAA6B,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC;IACtF,QAAsB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC;IACjF,IAAkB,GAAG,IAAI;SACvB,EAAE,EAAE;SACJ,mBAAmB,CAAC,GAAG,CAAC;SACxB,mBAAmB,CAAC,GAAG,CAAC;SACxB,mBAAmB,CAAC,GAAG,CAAC;SACxB,mBAAmB,CAAC,GAAG,CAAC;SACxB,mBAAmB,CAAC,GAAG,CAAC,CAAC;IAC5B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IAC9E,MAAM,CAAC,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAa,EAAE,CAAC,CAAC;IAChD,OAAO,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC7B,UAAU,EAAE;QACV;YACE,MAAM,EAAE,IAAI;YACZ,MAAM,EAAE,cAAc;SACvB;KACF;IACD,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE;QACP;YACE,MAAM,EAAE;gBACN,IAAI,EAAE,MAAM;gBACZ,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC1B,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,EAAE;gBACV,SAAS,EAAE,MAAM;gBACjB,QAAQ,EAAE,EAAE;gBACZ,gBAAgB,EAAE,CAAC;gBACnB,UAAU,EAAE,CAAC;aACd;YACD,MAAM,EAAE;gBACN,IAAI,EAAE,OAAO;gBACb,QAAQ,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE;gBAC1B,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,EAAE;aACX;SACF;KACF;CACF,CAAC,CAAC"}

package/dist/esm/__tests__/components/Designer.test.js

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, act, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Designer from '../../src/components/Designer/index.js';
+import { I18nContext, FontContext } from '../../src/contexts.js';
+import { curriedI18n } from '../../src/i18n.js';
+import { SELECTABLE_CLASSNAME } from '../../src/constants.js';
+import { getDefaultFont } from '@pdfme/common';
+import { setupUIMock, getSampleTemplate } from '../assets/helper.js';
+test('Designer snapshot', () => __awaiter(void 0, void 0, void 0, function* () {
+    setupUIMock();
+    let container = document.createElement('a');
+    act(() => {
+        const { container: c } = render(React.createElement(I18nContext.Provider, { value: curriedI18n('en') },
+            React.createElement(FontContext.Provider, { value: getDefaultFont() },
+                React.createElement(Designer, { template: getSampleTemplate(), onSaveTemplate: console.log, onChangeTemplate: console.log, size: { width: 1200, height: 1200 } }))));
+        container = c;
+    });
+    yield waitFor(() => Boolean(container === null || container === void 0 ? void 0 : container.getElementsByClassName(SELECTABLE_CLASSNAME)));
+    expect(container.firstChild).toMatchSnapshot();
+}));
+//# sourceMappingURL=Designer.test.js.map

package/dist/esm/__tests__/components/Designer.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Designer.test.js","sourceRoot":"","sources":["../../../../__tests__/components/Designer.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,2BAA2B,CAAC;AACnC,OAAO,QAAQ,MAAM,wCAAwC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAErE,IAAI,CAAC,mBAAmB,EAAE,GAAS,EAAE;IACnC,WAAW,EAAE,CAAC;IACd,IAAI,SAAS,GAAgB,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzD,GAAG,CAAC,GAAG,EAAE;QACP,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAC7B,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;YAC5C,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE;gBAC3C,oBAAC,QAAQ,IACP,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,cAAc,EAAE,OAAO,CAAC,GAAG,EAC3B,gBAAgB,EAAE,OAAO,CAAC,GAAG,EAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GACnC,CACmB,CACF,CACxB,CAAC;QACF,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAA,CAAC,CAAC"}

package/dist/esm/__tests__/components/Preview.test.js

@@ -0,0 +1,46 @@
+var __awaiter = (this && this.__awaiter) || function (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());
+    });
+};
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, act, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Preview from '../../src/components/Preview';
+import { I18nContext, FontContext } from '../../src/contexts';
+import { curriedI18n } from '../../src/i18n';
+import { SELECTABLE_CLASSNAME } from '../../src/constants';
+import { getDefaultFont } from '@pdfme/common';
+import { setupUIMock, getSampleTemplate } from '../assets/helper';
+test('Preview(as Viewer) snapshot', () => __awaiter(void 0, void 0, void 0, function* () {
+    setupUIMock();
+    let container = document.createElement('a');
+    act(() => {
+        const { container: c } = render(React.createElement(I18nContext.Provider, { value: curriedI18n('en') },
+            React.createElement(FontContext.Provider, { value: getDefaultFont() },
+                React.createElement(Preview, { template: getSampleTemplate(), inputs: [{ field1: 'field1', field2: 'field2' }], size: { width: 1200, height: 1200 } }))));
+        container = c;
+    });
+    yield waitFor(() => Boolean(container === null || container === void 0 ? void 0 : container.getElementsByClassName(SELECTABLE_CLASSNAME)));
+    expect(container.firstChild).toMatchSnapshot();
+}));
+test('Preview(as Form) snapshot', () => __awaiter(void 0, void 0, void 0, function* () {
+    setupUIMock();
+    let container = document.createElement('a');
+    act(() => {
+        const { container: c } = render(React.createElement(I18nContext.Provider, { value: curriedI18n('en') },
+            React.createElement(FontContext.Provider, { value: getDefaultFont() },
+                React.createElement(Preview, { template: getSampleTemplate(), inputs: [{ field1: 'field1', field2: 'field2' }], size: { width: 1200, height: 1200 }, onChangeInput: console.log }))));
+        container = c;
+    });
+    yield waitFor(() => Boolean(container === null || container === void 0 ? void 0 : container.getElementsByClassName(SELECTABLE_CLASSNAME)));
+    expect(container.firstChild).toMatchSnapshot();
+}));
+//# sourceMappingURL=Preview.test.js.map

package/dist/esm/__tests__/components/Preview.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.test.js","sourceRoot":"","sources":["../../../../__tests__/components/Preview.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA;;GAEG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,2BAA2B,CAAC;AACnC,OAAO,OAAO,MAAM,8BAA8B,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAElE,IAAI,CAAC,6BAA6B,EAAE,GAAS,EAAE;IAC7C,WAAW,EAAE,CAAC;IACd,IAAI,SAAS,GAAgB,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzD,GAAG,CAAC,GAAG,EAAE;QACP,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAC7B,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;YAC5C,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE;gBAC3C,oBAAC,OAAO,IACN,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAChD,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,GACnC,CACmB,CACF,CACxB,CAAC;QACF,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAA,CAAC,CAAC;AAEH,IAAI,CAAC,2BAA2B,EAAE,GAAS,EAAE;IAC3C,WAAW,EAAE,CAAC;IACd,IAAI,SAAS,GAAgB,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IACzD,GAAG,CAAC,GAAG,EAAE;QACP,MAAM,EAAE,SAAS,EAAE,CAAC,EAAE,GAAG,MAAM,CAC7B,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC;YAC5C,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE;gBAC3C,oBAAC,OAAO,IACN,QAAQ,EAAE,iBAAiB,EAAE,EAC7B,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAChD,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EACnC,aAAa,EAAE,OAAO,CAAC,GAAG,GAC1B,CACmB,CACF,CACxB,CAAC;QACF,SAAS,GAAG,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;IAEH,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IACtF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAC;AACjD,CAAC,CAAA,CAAC,CAAC"}

package/dist/esm/__tests__/helper.test.js

@@ -0,0 +1,92 @@
+import { uuid, getUniqSchemaKey } from '../src/helper';
+describe('getUniqSchemaKey test', () => {
+    const getSchema = () => ({
+        type: 'text',
+        position: { x: 0, y: 0 },
+        width: 100,
+        height: 100,
+    });
+    test('getUniqSchemaKey case1', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [Object.assign({ id: uuid(), key: 'b', data: 'b' }, getSchema())];
+        const stackUniqSchemaKeys = [];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy');
+    });
+    test('getUniqSchemaKey case2', () => {
+        const copiedSchemaKey = 'a copy';
+        const schema = [Object.assign({ id: uuid(), key: 'a copy', data: 'a' }, getSchema())];
+        const stackUniqSchemaKeys = [];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 2');
+    });
+    test('getUniqSchemaKey case3', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [
+            Object.assign({ id: uuid(), key: 'a', data: 'a' }, getSchema()),
+            Object.assign({ id: uuid(), key: 'a copy 2', data: 'a' }, getSchema()),
+        ];
+        const stackUniqSchemaKeys = [];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 3');
+    });
+    test('getUniqSchemaKey case4', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [
+            Object.assign({ id: uuid(), key: 'a', data: 'a' }, getSchema()),
+            Object.assign({ id: uuid(), key: 'a copy 2', data: 'a' }, getSchema()),
+        ];
+        const stackUniqSchemaKeys = ['a copy 3'];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 4');
+    });
+    test('getUniqSchemaKey case5', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [
+            Object.assign({ id: uuid(), key: 'a', data: 'a' }, getSchema()),
+            Object.assign({ id: uuid(), key: 'a copy 3', data: 'a' }, getSchema()),
+        ];
+        const stackUniqSchemaKeys = [];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 4');
+    });
+    test('getUniqSchemaKey case6', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [
+            Object.assign({ id: uuid(), key: 'a', data: 'a' }, getSchema()),
+            Object.assign({ id: uuid(), key: 'a copy 3', data: 'a' }, getSchema()),
+        ];
+        const stackUniqSchemaKeys = ['a copy 4'];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 5');
+    });
+    test('getUniqSchemaKey case7', () => {
+        const copiedSchemaKey = 'a';
+        const schema = [Object.assign({ id: uuid(), key: 'a', data: 'a' }, getSchema())];
+        const stackUniqSchemaKeys = ['a copy 2', 'a copy 3', 'a copy 4'];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 5');
+    });
+    test('getUniqSchemaKey case8', () => {
+        const copiedSchemaKey = 'a copy 2';
+        const schema = [Object.assign({ id: uuid(), key: 'a copy 2', data: 'a' }, getSchema())];
+        const stackUniqSchemaKeys = ['a copy 3'];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 4');
+    });
+    test('getUniqSchemaKey case9', () => {
+        const copiedSchemaKey = 'a copy 9';
+        const schema = [Object.assign({ id: uuid(), key: 'a copy 9', data: 'a' }, getSchema())];
+        const stackUniqSchemaKeys = ['a copy 10'];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 11');
+    });
+    test('getUniqSchemaKey case10', () => {
+        const copiedSchemaKey = 'a copy 10';
+        const schema = [Object.assign({ id: uuid(), key: 'a copy 10', data: 'a' }, getSchema())];
+        const stackUniqSchemaKeys = [];
+        const uniqSchemaKey = getUniqSchemaKey({ copiedSchemaKey, schema, stackUniqSchemaKeys });
+        expect(uniqSchemaKey).toBe('a copy 11');
+    });
+});
+//# sourceMappingURL=helper.test.js.map

package/dist/esm/__tests__/helper.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.test.js","sourceRoot":"","sources":["../../../__tests__/helper.test.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/Designer.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { checkDesignerProps, checkTemplate } from '@pdfme/common';
+import { BaseUIClass } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import DesignerComponent from './components/Designer/index.js';
+import { cloneDeep } from './helper.js';
+class Designer extends BaseUIClass {
+    constructor(props) {
+        super(props);
+        checkDesignerProps(props);
+        this.render();
+    }
+    saveTemplate() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        if (this.onSaveTemplateCallback) {
+            this.onSaveTemplateCallback(this.template);
+        }
+    }
+    updateTemplate(template) {
+        checkTemplate(template);
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        this.template = cloneDeep(template);
+        if (this.onChangeTemplateCallback) {
+            this.onChangeTemplateCallback(template);
+        }
+        this.render();
+    }
+    onSaveTemplate(cb) {
+        this.onSaveTemplateCallback = cb;
+    }
+    onChangeTemplate(cb) {
+        this.onChangeTemplateCallback = cb;
+    }
+    render() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        ReactDOM.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
+            React.createElement(FontContext.Provider, { value: this.getFont() },
+                React.createElement(DesignerComponent, { template: this.template, onSaveTemplate: (template) => {
+                        this.template = template;
+                        if (this.onSaveTemplateCallback) {
+                            this.onSaveTemplateCallback(template);
+                        }
+                    }, onChangeTemplate: (template) => {
+                        this.template = template;
+                        if (this.onChangeTemplateCallback) {
+                            this.onChangeTemplateCallback(template);
+                        }
+                    }, size: this.size }))), this.domContainer);
+    }
+}
+export default Designer;
+//# sourceMappingURL=Designer.js.map

package/dist/esm/src/Designer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Designer.js","sourceRoot":"","sources":["../../../src/Designer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,EAA2B,kBAAkB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,QAAS,SAAQ,WAAW;IAIhC,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5C;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,cAAc,CAAC,EAAgC;QACpD,IAAI,CAAC,sBAAsB,GAAG,EAAE,CAAC;IACnC,CAAC;IAEM,gBAAgB,CAAC,EAAgC;QACtD,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;IACrC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,QAAQ,CAAC,MAAM,CACb,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC3B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,sBAAsB,EAAE;4BAC/B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;yBACvC;oBACH,CAAC,EACD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,wBAAwB,EAAE;4BACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;yBACzC;oBACH,CAAC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACmB,CACF,EACvB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,QAAQ,CAAC"}

package/dist/esm/src/Form.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
+class Form extends PreviewUI {
+    constructor(props) {
+        super(props);
+        this.render();
+    }
+    onChangeInput(cb) {
+        this.onChangeInputCallback = cb;
+    }
+    render() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        ReactDOM.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
+            React.createElement(FontContext.Provider, { value: this.getFont() },
+                React.createElement(Preview, { template: this.template, size: this.size, inputs: this.inputs, onChangeInput: (arg) => {
+                        const { index, value, key } = arg;
+                        if (this.onChangeInputCallback) {
+                            this.onChangeInputCallback({ index, value, key });
+                        }
+                        this.inputs[index][key] = value;
+                        this.render();
+                    } }))), this.domContainer);
+    }
+}
+export default Form;
+//# sourceMappingURL=Form.js.map

package/dist/esm/src/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAE9C,MAAM,IAAK,SAAQ,SAAS;IAG1B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,aAAa,CAAC,EAAgE;QACnF,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;IAClC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,QAAQ,CAAC,MAAM,CACb,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,OAAO,IACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,aAAa,EAAE,CAAC,GAAkD,EAAE,EAAE;wBACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;wBAClC,IAAI,IAAI,CAAC,qBAAqB,EAAE;4BAC9B,IAAI,CAAC,qBAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;yBACnD;wBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAChC,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,CAAC,GACD,CACmB,CACF,EACvB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,IAAI,CAAC"}

package/dist/esm/src/Viewer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { PreviewUI } from './class.js';
+import { DESTROYED_ERR_MSG } from './constants.js';
+import { I18nContext, FontContext } from './contexts.js';
+import Preview from './components/Preview.js';
+class Viewer extends PreviewUI {
+    constructor(props) {
+        super(props);
+        this.render();
+    }
+    render() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        ReactDOM.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
+            React.createElement(FontContext.Provider, { value: this.getFont() },
+                React.createElement(Preview, { template: this.template, size: this.size, inputs: this.inputs }))), this.domContainer);
+    }
+}
+export default Viewer;
+//# sourceMappingURL=Viewer.js.map

package/dist/esm/src/Viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Viewer.js","sourceRoot":"","sources":["../../../src/Viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAE9C,MAAM,MAAO,SAAQ,SAAS;IAC5B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,QAAQ,CAAC,MAAM,CACb,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,OAAO,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CACrD,CACF,EACvB,IAAI,CAAC,YAAY,CAClB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,MAAM,CAAC"}

package/dist/esm/src/class.js

@@ -0,0 +1,112 @@
+import ReactDOM from 'react-dom';
+import { curriedI18n } from './i18n.js';
+import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
+import { debounce, flatten, cloneDeep } from './helper.js';
+import { getDefaultFont, checkUIProps, checkTemplate, checkInputs, checkUIOptions, checkPreviewProps, } from '@pdfme/common';
+const generateColumnsAndSampledataIfNeeded = (template) => {
+    const { schemas, columns, sampledata } = template;
+    const flatSchemaLength = schemas
+        .map((schema) => Object.keys(schema).length)
+        .reduce((acc, cur) => acc + cur, 0);
+    const neetColumns = !columns || flatSchemaLength !== columns.length;
+    const needSampledata = !sampledata || flatSchemaLength !== Object.keys(sampledata[0]).length;
+    // columns
+    if (neetColumns) {
+        template.columns = flatten(schemas.map((schema) => Object.keys(schema)));
+    }
+    // sampledata
+    if (needSampledata) {
+        template.sampledata = [
+            schemas.reduce((acc, cur) => Object.assign(acc, Object.keys(cur).reduce((a, c) => Object.assign(a, { [c]: '' }), {})), {}),
+        ];
+    }
+    return template;
+};
+export class BaseUIClass {
+    constructor(props) {
+        this.lang = DEFAULT_LANG;
+        this.font = getDefaultFont();
+        this.setSize = debounce(() => {
+            if (!this.domContainer)
+                throw Error(DESTROYED_ERR_MSG);
+            this.size = {
+                height: this.domContainer.clientHeight || window.innerHeight,
+                width: this.domContainer.clientWidth || window.innerWidth,
+            };
+            this.render();
+        }, 100);
+        this.resizeObserver = new ResizeObserver(this.setSize);
+        checkUIProps(props);
+        const { domContainer, template, options } = props;
+        const { lang, font } = options || {};
+        this.domContainer = domContainer;
+        this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
+        this.size = {
+            height: this.domContainer.clientHeight || window.innerHeight,
+            width: this.domContainer.clientWidth || window.innerWidth,
+        };
+        this.resizeObserver.observe(this.domContainer);
+        if (lang) {
+            this.lang = lang;
+        }
+        if (font) {
+            this.font = font;
+        }
+    }
+    getI18n() {
+        return curriedI18n(this.lang);
+    }
+    getFont() {
+        return this.font;
+    }
+    getTemplate() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        return this.template;
+    }
+    updateTemplate(template) {
+        checkTemplate(template);
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        this.template = cloneDeep(template);
+        this.render();
+    }
+    updateOptions(options) {
+        checkUIOptions(options);
+        const { lang, font } = options || {};
+        if (lang) {
+            this.lang = lang;
+        }
+        if (font) {
+            this.font = font;
+        }
+        this.render();
+    }
+    destroy() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        ReactDOM.unmountComponentAtNode(this.domContainer);
+        this.resizeObserver.unobserve(this.domContainer);
+        this.domContainer = null;
+    }
+}
+export class PreviewUI extends BaseUIClass {
+    constructor(props) {
+        super(props);
+        checkPreviewProps(props);
+        this.inputs = cloneDeep(props.inputs);
+    }
+    getInputs() {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        return this.inputs;
+    }
+    setInputs(inputs) {
+        if (!this.domContainer)
+            throw Error(DESTROYED_ERR_MSG);
+        checkInputs(inputs);
+        this.inputs = cloneDeep(inputs);
+        this.render();
+    }
+}
+//# sourceMappingURL=class.js.map

package/dist/esm/src/class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../src/class.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/components/CtlBar/Pager.js

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { I18nContext } from '../../contexts.js';
+const btnStyle = {
+    cursor: 'pointer',
+    border: 'none',
+    background: 'none',
+    display: 'flex',
+    alignItems: 'center',
+};
+const Pager = ({ pageCursor, pageNum, setPageCursor }) => {
+    const i18n = useContext(I18nContext);
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+        React.createElement("button", { style: Object.assign(Object.assign({ paddingLeft: '0.5rem' }, btnStyle), { cursor: pageCursor <= 0 ? 'not-allowed' : 'pointer' }), disabled: pageCursor <= 0, onClick: () => setPageCursor(pageCursor - 1) },
+            React.createElement(ChevronLeftIcon, { width: 20, height: 20, color: '#fff' })),
+        React.createElement("strong", { style: { color: 'white', fontSize: '0.9rem', minWidth: 45, textAlign: 'center' } },
+            pageCursor + 1,
+            "/",
+            pageNum),
+        React.createElement("button", { style: Object.assign(Object.assign({ paddingRight: '0.5rem' }, btnStyle), { cursor: pageCursor + 1 >= pageNum ? 'not-allowed' : 'pointer' }), disabled: pageCursor + 1 >= pageNum, onClick: () => setPageCursor(pageCursor + 1) },
+            React.createElement(ChevronRightIcon, { width: 20, height: 20, color: '#fff' }))));
+};
+export default Pager;
+//# sourceMappingURL=Pager.js.map

package/dist/esm/src/components/CtlBar/Pager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pager.js","sourceRoot":"","sources":["../../../../../src/components/CtlBar/Pager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,MAAM,QAAQ,GAAwB;IACpC,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC;AAQF,MAAM,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAS,EAAE,EAAE;IAC9D,MAAM,IAAI,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAErC,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;QAC7E,gCACE,KAAK,gCACH,WAAW,EAAE,QAAQ,IAClB,QAAQ,KACX,MAAM,EAAE,UAAU,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KAErD,QAAQ,EAAE,UAAU,IAAI,CAAC,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC;YAE5C,oBAAC,eAAe,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAI,CAClD;QACT,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YACrF,UAAU,GAAG,CAAC;;YAAG,OAAO,CAClB;QACT,gCACE,KAAK,gCACH,YAAY,EAAE,QAAQ,IACnB,QAAQ,KACX,MAAM,EAAE,UAAU,GAAG,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KAE/D,QAAQ,EAAE,UAAU,GAAG,CAAC,IAAI,OAAO,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,GAAG,CAAC,CAAC;YAE5C,oBAAC,gBAAgB,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAI,CACnD,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/src/components/CtlBar/Zoom.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+const btnStyle = {
+    cursor: 'pointer',
+    border: 'none',
+    background: 'none',
+    display: 'flex',
+    alignItems: 'center',
+};
+const zoomStep = 0.25;
+const maxZoom = 2;
+const minZoom = 0.25;
+const Pager = ({ zoomLevel, setZoomLevel }) => {
+    const nextZoomOut = zoomLevel - zoomStep;
+    const nextZoomIn = zoomLevel + zoomStep;
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } },
+        React.createElement("button", { style: Object.assign(Object.assign({ paddingLeft: '0.5rem' }, btnStyle), { cursor: minZoom >= nextZoomOut ? 'not-allowed' : 'pointer' }), disabled: minZoom >= nextZoomOut, onClick: () => setZoomLevel(nextZoomOut) },
+            React.createElement(MinusIcon, { width: 20, height: 20, color: '#fff' })),
+        React.createElement("strong", { style: { color: 'white', fontSize: '0.9rem', minWidth: 50, textAlign: 'center' } },
+            Math.round(zoomLevel * 100),
+            "%"),
+        React.createElement("button", { style: Object.assign(Object.assign({ paddingRight: '0.5rem' }, btnStyle), { cursor: maxZoom < nextZoomIn ? 'not-allowed' : 'pointer' }), disabled: maxZoom < nextZoomIn, onClick: () => setZoomLevel(nextZoomIn) },
+            React.createElement(PlusIcon, { width: 20, height: 20, color: '#fff' }))));
+};
+export default Pager;
+//# sourceMappingURL=Zoom.js.map

package/dist/esm/src/components/CtlBar/Zoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Zoom.js","sourceRoot":"","sources":["../../../../../src/components/CtlBar/Zoom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAElE,MAAM,QAAQ,GAAwB;IACpC,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;CACrB,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC;AACtB,MAAM,OAAO,GAAG,CAAC,CAAC;AAClB,MAAM,OAAO,GAAG,IAAI,CAAC;AAOrB,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAS,EAAE,EAAE;IACnD,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzC,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;IAExC,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,EAAE;QAC7E,gCACE,KAAK,gCACH,WAAW,EAAE,QAAQ,IAClB,QAAQ,KACX,MAAM,EAAE,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KAE5D,QAAQ,EAAE,OAAO,IAAI,WAAW,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,WAAW,CAAC;YAExC,oBAAC,SAAS,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAI,CAC5C;QACT,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE;YACrF,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,CAAC;gBACrB;QACT,gCACE,KAAK,gCACH,YAAY,EAAE,QAAQ,IACnB,QAAQ,KACX,MAAM,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,KAE1D,QAAQ,EAAE,OAAO,GAAG,UAAU,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC;YAEvC,oBAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,GAAI,CAC3C,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/src/components/CtlBar/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Pager from './Pager.js';
+import Zoom from './Zoom.js';
+const barWidth = 250;
+const CtlBar = (props) => {
+    const { size, pageCursor, pageNum, setPageCursor, zoomLevel, setZoomLevel } = props;
+    const width = pageNum > 1 ? barWidth : barWidth / 2;
+    return (React.createElement("div", { style: { position: 'absolute', width: '100%', minHeight: size.height } },
+        React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                position: 'sticky',
+                zIndex: 1,
+                top: '90%',
+                left: `calc(50% - ${width / 2}px)`,
+                width,
+                background: '#777777e6',
+                borderRadius: 2,
+                padding: '0.5rem',
+            } },
+            pageNum > 1 && (React.createElement(React.Fragment, null,
+                React.createElement(Pager, { pageCursor: pageCursor, pageNum: pageNum, setPageCursor: setPageCursor }),
+                React.createElement("strong", { style: { color: 'white', fontSize: '0.9rem', padding: 0 } }, "|"))),
+            React.createElement(Zoom, { zoomLevel: zoomLevel, setZoomLevel: setZoomLevel }))));
+};
+export default CtlBar;
+//# sourceMappingURL=index.js.map

package/dist/esm/src/components/CtlBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/CtlBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,IAAI,MAAM,WAAW,CAAC;AAY7B,MAAM,QAAQ,GAAG,GAAG,CAAC;AAErB,MAAM,MAAM,GAAG,CAAC,KAAY,EAAE,EAAE;IAC9B,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACpF,MAAM,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE;QACzE,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,QAAQ,EAAE,QAAQ;gBAClB,MAAM,EAAE,CAAC;gBACT,GAAG,EAAE,KAAK;gBACV,IAAI,EAAE,cAAc,KAAK,GAAG,CAAC,KAAK;gBAClC,KAAK;gBACL,UAAU,EAAE,WAAW;gBACvB,YAAY,EAAE,CAAC;gBACf,OAAO,EAAE,QAAQ;aAClB;YAEA,OAAO,GAAG,CAAC,IAAI,CACd;gBACE,oBAAC,KAAK,IAAC,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,GAAI;gBACjF,gCAAQ,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EAAE,QAAY,CAC5E,CACJ;YACD,oBAAC,IAAI,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,GAAI,CACtD,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}