legalesign-document-viewer 0.1.3 → 0.1.4

package/dist/ls-document-viewer/ls-statusbar.entry.js

@@ -0,0 +1,57 @@
+import { r as registerInstance, d as getElement, h, e as Host } from './index-Db-CNFwu.js';
+import { d as debounce } from './editorUtils-DsvPQaAu.js';
+
+const lsStatusbarCss = ":host{position:fixed;z-index:1000;right:1rem;bottom:1rem;display:flex;flex-direction:row;background-color:white;border:1px solid var(--gray-30, #e0e2e5);box-shadow:0px 4px 16px rgba(0, 0, 0, 0.1);border-radius:1rem}*{margin:0;padding:0;box-sizing:border-box}.status-bar-section{display:flex;flex-direction:row;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem}:host>:not(:nth-child(2)){border-left:1px solid var(--gray-30, #e0e2e5)}button{border:0}button:hover{color:var(--gray-100, #45484d);border-radius:0.5rem}input[type=\"range\"]{-webkit-appearance:none;width:100%;height:8px;background:var(--gray-20, #EDEFF2);border-radius:5px;outline:none}input[type=\"range\"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:8px;height:8px;background:var(--gray-70, #4a4c51);border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-thumb{width:8px;height:8%;background:var(--gray-70, #4a4c51);border:none;border-radius:50%;cursor:pointer}input[type=\"range\"]::-moz-range-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}input[type=\"range\"]::-webkit-slider-runnable-track{background:var(--gray-20, #EDEFF2);height:8px;border-radius:5px}p{color:var(--gray-80, #6c6e73);font-family:var(--font-family);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height)}a{color:var(--primary-60, #4456f6);font-size:var(--text-sm);font-style:normal;font-weight:400;line-height:var(--text-sm-line-height);cursor:pointer}a:hover{text-decoration:underline;color:var(--primary-70, #2134dc)}.button-link,.button-link:hover{all:unset}select{appearance:none;height:36px}.input-wrapper{position:relative;width:fit-content}#selectorIcon{position:absolute;top:50%;right:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}#selectLeadingIcon{position:absolute;top:50%;left:0.675rem;transform:translateY(-50%);pointer-events:none;color:var(--gray-80, #6c6e73)}.has-leading-icon{padding-left:2.5rem}button{all:unset;border:0;appearance:button;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-80, #6c6e73);text-transform:capitalize}button.tertiaryGrey:hover{background:var(--gray-10, #f7f8fa)}.button-group{display:flex;border-radius:0.5rem;border:1px solid var(--gray-30, #e0e2e5);background:var(--white, #ffffff);overflow:clip}.button-group button{display:flex;background:transparent;border-radius:unset;padding:0.25rem 0.75rem;min-width:2.156rem;min-height:unset;color:var(--gray-80, #6c6e73)}.button-group button:hover{background:var(--gray-10, #f7f8fa)}.button-group>:first-child{border-radius:0.5rem 0 0 0.5rem}.button-group>:last-child{border-radius:0 0.5rem 0.5rem 0}.button-group>:not(:first-child){border-left:1px solid var(--gray-30, #e0e2e5)}";
+
+const LsStatusbar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get component() { return getElement(this); }
+    /**
+     * The zoom or scale level 100 === 100%.
+     * {number}
+     */
+    zoom;
+    /**
+     * The parent editor control.
+     * {LsDocumentViewer}
+     */
+    editor;
+    setZoom(value) {
+        this.editor.setZoom(value);
+        this.zoom = value;
+    }
+    handleZoomInput() {
+        const zoomInput = this.component.shadowRoot.getElementById('zoomRange');
+        console.log(zoomInput.value);
+        debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
+    }
+    fitWidth() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        const scale = frame.clientWidth / this.editor.pageDimensions[0].width;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    fitHeight() {
+        const frame = this.editor.component.shadowRoot.getElementById('ls-document-frame');
+        const scale = frame.clientHeight / this.editor.pageDimensions[0].height;
+        this.setZoom(Math.round(scale * 1e2) / 1e2);
+    }
+    componentDidLoad() {
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        console.log('editor', this.editor);
+        return (h(Host, { key: 'fa4c308b2988613d8605e35d897c6eb4bf56886b' }, h("div", { key: '8847fc87285c5ea60d1beaa6cd05685ea799a4ad', class: "status-bar-section" }, h("button", { key: '164cf3a126ab28aca68d0066024c43a01dc7fb2b', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'fb60105b72120ed0be1fefb5f567a3aa92a474cc', name: "zoom-out" })), h("div", { key: '85374403e1754200b69aa91077998f3f95a0930a' }, h("input", { key: 'd136e2cef56ffb8ba34c58e78f504d500b1e105e', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '0dfac9ab257fd7e7838b7b2d1828ff16ae8f99e8', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: '724c028a66e931f91ded0ecd1aa79a677fcd6f02', name: "zoom-in" }))), h("div", { key: 'b53ac7eeebf0a32f9388118dd4ea7aef3a9cade4', class: "status-bar-section" }, h("button", { key: 'acd39e8aa4f8642263490b74b2b1d11b632af649', onClick: () => this.fitWidth() }, h("ls-icon", { key: 'a05af9d9cdd4700fd92d9f172c3c65829a5c16aa', name: "fit-width" })), h("button", { key: 'd237cb702b0358865d27df63deaa02b975303d71', onClick: () => this.fitHeight() }, h("ls-icon", { key: '870506fe1d52d05c7830bcd96510879deab54713', name: "fit-height" }))), h("div", { key: 'ec6abd7f5fcfc838c6753ade0ac33d996104caa9', class: "status-bar-section" }, h("button", { key: 'e5fe5ba2bbb9db9092789dbf3049c4b4b46365be', onClick: () => {
+                this.editor.pagePrev();
+            } }, h("ls-icon", { key: '422b9d7fcd419b9177f02d7daf91e51434b87e95', name: "chevron-left" })), h("p", { key: '7586eaa8fa7322c47e18ec8947b28f5ac90b984f' }, "1 / 2"), h("button", { key: '3a9d1b99344eeb643bcf2c257601d6cc654d3a06', onClick: () => {
+                this.editor.pageNext();
+            } }, h("ls-icon", { key: '8c63d85e1897c99028b43d173f08826a87b8e874', name: "chevron-right" }))), h("slot", { key: '521cb9b841135a3e6e39d6e621f0ea168d3ad525' })));
+    }
+};
+LsStatusbar.style = lsStatusbarCss;
+
+export { LsStatusbar as ls_statusbar };
+//# sourceMappingURL=ls-statusbar.entry.esm.js.map
+
+//# sourceMappingURL=ls-statusbar.entry.js.map