legalesign-document-viewer 0.3.3 → 0.3.5

package/dist/collection/components/ls-props-section/ls-props-section.css

@@ -1,42 +0,0 @@
-* {
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.ls-field-properties-section {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.row {
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.ls-field-properties-section-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.25rem;
-}
-
-.ls-field-properties-section-title {
-  color: var(--gray-90, #5e6066);
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25rem; /* 142.857% */
-}
-
-.ls-field-properties-section-description {
-  overflow: hidden;
-  color: var(--gray-80, #6c6e73);
-  text-overflow: ellipsis;
-  font-size: 0.75rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 0.75rem; /* 120% */
-}

package/dist/collection/components/ls-props-section/ls-props-section.js

@@ -1,84 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LsPropsSection {
-    sectionTitle;
-    sectionDescription;
-    row = false;
-    render() {
-        return (h(Host, { key: '9043f4212d573cb7cae6024f0288d3589cab16ca' }, h("div", { key: '73ad46475e8a1b84f775cf50ef38d96856c845ad', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: 'a259ac2223024e3b68e24956ac050afd1ed8ad6a', class: 'ls-field-properties-section-text' }, h("p", { key: 'c649eeccdd07ed13d7761a7390737a7f1b27f476', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '668ec0fbf1c9b036bbaf71469862872da1858c5e', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: '7537449cd511e7fa223c06f96b983ce69a9f6cf8' }))));
-    }
-    static get is() { return "ls-props-section"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-props-section.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-props-section.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "sectionTitle": {
-                "type": "string",
-                "attribute": "section-title",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "sectionDescription": {
-                "type": "string",
-                "attribute": "section-description",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "row": {
-                "type": "boolean",
-                "attribute": "row",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-}
-//# sourceMappingURL=ls-props-section.js.map

package/dist/collection/components/ls-props-section/ls-props-section.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-props-section.js","sourceRoot":"","sources":["../../../src/components/ls-props-section/ls-props-section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,cAAc;IACjB,YAAY,CAAS;IACrB,kBAAkB,CAAU;IAC5B,GAAG,GAAa,KAAK,CAAC;IAE9B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,6BAA6B;gBACtF,4DAAK,KAAK,EAAE,kCAAkC;oBAC5C,0DAAG,KAAK,EAAE,mCAAmC,IAAG,IAAI,CAAC,YAAY,CAAK;oBACrE,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,yCAAyC,IAAG,IAAI,CAAC,kBAAkB,CAAK,CAC1G;gBACN,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'ls-props-section',\n  styleUrl: 'ls-props-section.css',\n  shadow: true,\n})\nexport class LsPropsSection {\n  @Prop() sectionTitle: string;\n  @Prop() sectionDescription?: string;\n  @Prop() row?: boolean = false;\n\n  render() {\n    return (\n      <Host>\n        <div class={this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section'}>\n          <div class={'ls-field-properties-section-text'}>\n            <p class={'ls-field-properties-section-title'}>{this.sectionTitle}</p>\n            {this.sectionDescription && <p class={'ls-field-properties-section-description'}>{this.sectionDescription}</p>}\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-statusbar/ls-statusbar.css

@@ -1,198 +0,0 @@
-: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; /* Remove default styling */
-  width: 100%;
-  height: 8px;
-  background: var(--gray-20, #EDEFF2);
-  border-radius: 5px;
-  outline: none;
-}
-
-/* Chrome, Safari, Edge */
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 8px;
-  height: 8px;
-  background: var(--gray-70, #4a4c51); /* Custom thumb color */
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-/* Firefox */
-input[type="range"]::-moz-range-thumb {
-  width: 8px;
-  height: 8%;
-  background: var(--gray-70, #4a4c51); /* Custom thumb color */
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-/* Track color for Firefox */
-input[type="range"]::-moz-range-track {
-  background: var(--gray-20, #EDEFF2);
-  height: 8px;
-  border-radius: 5px;
-}
-
-/* Track color for Chrome, Safari, Edge */
-input[type="range"]::-webkit-slider-runnable-track {
-  background: var(--gray-20, #EDEFF2);
-  height: 8px;
-  border-radius: 5px;
-}
-
-
-
-/* Global Styles */
-
-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);
-}
-

package/dist/collection/components/ls-statusbar/ls-statusbar.js

@@ -1,107 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { debounce } from "../ls-document-viewer/editorUtils";
-export class LsStatusbar {
-    component;
-    /**
-     * 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');
-        debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);
-    }
-    fitWidth() {
-        const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');
-        const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin
-        console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);
-        const scale = space / this.editor.pageDimensions[0].width;
-        console.log(Math.round(scale * 1e2) / 1e2);
-        this.setZoom(Math.round(scale * 1e2) / 1e2);
-    }
-    fitHeight() {
-        const space = window.screen.height - 40; // 40 for padding/margin
-        const scale = space / this.editor.pageDimensions[0].height;
-        this.setZoom(Math.round(scale * 1e2) / 1e2);
-    }
-    componentDidLoad() {
-        this.zoom = this.editor.zoom;
-    }
-    render() {
-        return (h(Host, { key: '15a8b80e0369f9cdc3aff504f55bd07532b4e84f' }, h("div", { key: '8751d694e48ad6a50884e7e3f5e0df0c6701a038', class: 'status-bar-section' }, h("button", { key: 'f4e0fefd2cf41b69cb43275b25f075433df458cc', onClick: () => this.setZoom(this.editor.zoom * 0.8) }, h("ls-icon", { key: 'f1ae6d4f151224ea7eb2b5dfa95561800170b7de', name: "zoom-out" })), h("div", { key: '4e77bc96db5d08d97f055b495322e7b686d407ca' }, h("input", { key: 'b830130e346460f996ddc47b4ef4b15552168bcd', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: '4370bd3b174429b1d042f0d39679f063c7580f95', onClick: () => this.setZoom(this.editor.zoom / 0.8) }, h("ls-icon", { key: 'dbc5d848170851a631e17ae481804f21e9f29a21', name: "zoom-in" }))), h("div", { key: 'df68e41014aa2c5580cfcf1fa6e6338603865d9c', class: 'status-bar-section' }, h("button", { key: '40a8cade12b425c7802c6e4b6f89f8b91e7bc4aa', onClick: () => this.fitWidth() }, h("ls-icon", { key: '09fba9f625fc24c11264a1654d018e67bbd8529b', name: "fit-width" })), h("button", { key: '85e20a709e23259bf56b0c2e282ba83571dec6b4', onClick: () => this.fitHeight() }, h("ls-icon", { key: '63d499fc88f5714628ba9057c7ac40e8ea1cd315', name: "fit-height" }))), this.editor?._template?.pageCount > 1 && (h("div", { key: 'bdebf6dc045d3251039a354b781c6dd972296b25', class: 'status-bar-section' }, h("button", { key: 'cd173c3857786e946ec125f1ac9adf9621ea6863', onClick: () => {
-                this.editor.pagePrev();
-            } }, h("ls-icon", { key: '8cd55d22e01c8d9c89dadcb205194e04fba1118c', name: "chevron-left" })), h("p", { key: '21de4f4cfdd2cb567e99d8d676da10303c245245' }, this.editor?.pageNum, " / ", this.editor?._template?.pageCount), h("button", { key: '71786b066ad6e4287a12f20873845d3bc28de90a', onClick: () => {
-                this.editor.pageNext();
-            } }, h("ls-icon", { key: '139c259fe653ea229c2d099f467f9b67bfbe28de', name: "chevron-right" })))), h("slot", { key: '4b09d328c1f6be78b858cfa832eb1e6849df49d9' })));
-    }
-    static get is() { return "ls-statusbar"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-statusbar.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-statusbar.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "zoom": {
-                "type": "number",
-                "attribute": "zoom",
-                "mutable": true,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The zoom or scale level 100 === 100%.\n{number}"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "editor": {
-                "type": "unknown",
-                "attribute": "editor",
-                "mutable": false,
-                "complexType": {
-                    "original": "LsDocumentViewer",
-                    "resolved": "LsDocumentViewer",
-                    "references": {
-                        "LsDocumentViewer": {
-                            "location": "import",
-                            "path": "../ls-document-viewer/ls-document-viewer",
-                            "id": "src/components/ls-document-viewer/ls-document-viewer.tsx::LsDocumentViewer"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The parent editor control.\n{LsDocumentViewer}"
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get elementRef() { return "component"; }
-}
-//# sourceMappingURL=ls-statusbar.js.map

package/dist/collection/components/ls-statusbar/ls-statusbar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAO7D,MAAM,OAAO,WAAW;IACX,SAAS,CAAc;IAClC;;;OAGG;IACsB,IAAI,CAAS;IAEtC;;;OAGG;IACK,MAAM,CAAmB;IAEjC,OAAO,CAAC,KAAa;QACnB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAED,eAAe;QACb,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,WAAW,CAAqB,CAAC;QAE5F,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;IAC/D,CAAC;IAED,QAAQ;QACN,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC/E,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,OAAO,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC,wBAAwB;QAEtF,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QACvF,MAAM,KAAK,GAAW,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAClE,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;QAC1C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,SAAS;QACP,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC,wBAAwB;QACjE,MAAM,KAAK,GAAW,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QACnE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YAGH,4DAAK,KAAK,EAAE,oBAAoB;gBAC9B,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC;oBACzD,gEAAS,IAAI,EAAC,UAAU,GAAG,CACpB;gBACT;oBACE,8DAAO,IAAI,EAAC,OAAO,EAAC,GAAG,EAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,WAAW,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAI,CACjI;gBACN,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,GAAG,CAAC;oBACzD,gEAAS,IAAI,EAAC,SAAS,GAAG,CACnB,CACL;YACN,4DAAK,KAAK,EAAE,oBAAoB;gBAC9B,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;oBACpC,gEAAS,IAAI,EAAC,WAAW,GAAG,CACrB;gBACT,+DAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;oBACrC,gEAAS,IAAI,EAAC,YAAY,GAAG,CACtB,CACL;YACL,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,GAAG,CAAC,IAAI,CACxC,4DAAK,KAAK,EAAE,oBAAoB;gBAC9B,+DACE,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;oBACzB,CAAC;oBAED,gEAAS,IAAI,EAAC,cAAc,GAAG,CACxB;gBACT;oBACG,IAAI,CAAC,MAAM,EAAE,OAAO;;oBAAK,IAAI,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,CACzD;gBACJ,+DACE,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;oBACzB,CAAC;oBAED,gEAAS,IAAI,EAAC,eAAe,GAAG,CACzB,CACL,CACP;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { LsDocumentViewer } from '../ls-document-viewer/ls-document-viewer';\nimport { debounce } from '../ls-document-viewer/editorUtils';\n\n@Component({\n  tag: 'ls-statusbar',\n  styleUrl: 'ls-statusbar.css',\n  shadow: true,\n})\nexport class LsStatusbar {\n  @Element() component: HTMLElement;\n  /**\n   * The zoom or scale level 100 === 100%.\n   * {number}\n   */\n  @Prop({ mutable: true }) zoom: number;\n\n  /**\n   * The parent editor control.\n   * {LsDocumentViewer}\n   */\n  @Prop() editor: LsDocumentViewer;\n\n  setZoom(value: number) {\n    this.editor.setZoom(value);\n    this.zoom = value;\n  }\n\n  handleZoomInput() {\n    const zoomInput = this.component.shadowRoot.getElementById('zoomRange') as HTMLInputElement;\n\n    debounce(this.setZoom(parseInt(zoomInput.value) / 100), 700);\n  }\n\n  fitWidth() {\n    const leftBox = this.editor.component.shadowRoot.getElementById('ls-left-box');\n    const space = window.screen.width - leftBox.clientWidth - 60; // 40 for padding/margin\n    \n    console.log('Space width:', space, 'Page width:', this.editor.pageDimensions[0].width);\n    const scale: number = space / this.editor.pageDimensions[0].width;\n    console.log(Math.round(scale * 1e2) / 1e2)\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  fitHeight() {\n    const space = window.screen.height - 40; // 40 for padding/margin\n    const scale: number = space / this.editor.pageDimensions[0].height;\n    this.setZoom(Math.round(scale * 1e2) / 1e2);\n  }\n\n  componentDidLoad() {\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        {/* <button onClick={() => this.editor.displayTable = true}><ls-icon name=\"table\" /></button>\n        <button onClick={() => this.editor.displayTable = false}><ls-icon name=\"template\" /></button> */}\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.setZoom(this.editor.zoom * 0.8)}>\n            <ls-icon name=\"zoom-out\" />\n          </button>\n          <div>\n            <input type=\"range\" min=\"1\" max=\"300\" value={this.zoom * 100} class=\"slider\" id=\"zoomRange\" onInput={() => this.handleZoomInput()} />\n          </div>\n          <button onClick={() => this.setZoom(this.editor.zoom / 0.8)}>\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()}>\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()}>\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        {this.editor?._template?.pageCount > 1 && (\n          <div class={'status-bar-section'}>\n            <button\n              onClick={() => {\n                this.editor.pagePrev();\n              }}\n            >\n              <ls-icon name=\"chevron-left\" />\n            </button>\n            <p>\n              {this.editor?.pageNum} / {this.editor?._template?.pageCount}\n            </p>\n            <button\n              onClick={() => {\n                this.editor.pageNext();\n              }}\n            >\n              <ls-icon name=\"chevron-right\" />\n            </button>\n          </div>\n        )}\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-toggle/ls-toggle.css

@@ -1,90 +0,0 @@
-:host {
-  display: block;
-}
-
-/* The switch - the box around the slider */
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 2.75rem;
-  height: 1.5rem;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-/* The slider */
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--gray-20, #edeff2);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.indeterminate {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--primary-60, #4456f6);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.slider:before {
-  position: absolute;
-  content: '';
-  height: 1.25rem;
-  width: 1.25rem;
-  left: 0.125rem;
-  bottom: 0.125rem;
-  background-color: white;
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-}
-
-.indeterminate::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 0.75rem;
-  height: 0.125rem;
-  background-color: white;
-}
-
-input:checked + .slider {
-  background-color: var(--primary-60, #4456f6);
-}
-
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--primary-60, #4456f6);
-  outline: 4px solid var(--primary-20, #e3e6ff);
-}
-
-input:checked + .slider:before {
-  -webkit-transform: translateX(1.25rem);
-  -ms-transform: translateX(1.25rem);
-  transform: translateX(1.25rem);
-}
-
-/* Rounded sliders */
-.slider.round, .indeterminate.round {
-  border-radius: 34px;
-}
-
-.slider.round:before {
-  border-radius: 50%;
-}

package/dist/collection/components/ls-toggle/ls-toggle.js

@@ -1,86 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LsToggle {
-    checked;
-    indeterminate;
-    valueChange;
-    changeHandler(value) {
-        this.valueChange.emit(value);
-    }
-    render() {
-        return (h(Host, { key: '9a4d61443f92bf65fddf05407f91a01285ccf19f' }, h("label", { key: 'c2bbd322dfdb1e82a99139a412ea1bbed311c92b', class: "switch" }, h("input", { key: 'ffbbda8820f8d42dc316ec873e1d2f1063bceedc', type: "checkbox", checked: this.checked, onChange: (e) => {
-                this.changeHandler(e.target.checked);
-            } }), h("span", { key: 'c5952ebb13c18765abb406ec0916eb26d3db51a2', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: 'cae29b87763a90bd1b2b3f029fff63223aa4020f' })));
-    }
-    static get is() { return "ls-toggle"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["ls-toggle.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["ls-toggle.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "checked": {
-                "type": "boolean",
-                "attribute": "checked",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "indeterminate": {
-                "type": "boolean",
-                "attribute": "indeterminate",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "valueChange",
-                "name": "valueChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=ls-toggle.js.map

package/dist/collection/components/ls-toggle/ls-toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ls-toggle.js","sourceRoot":"","sources":["../../../src/components/ls-toggle/ls-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,IAAI,YAAY,EAAiB,MAAM,eAAe,CAAC;AAO/F,MAAM,OAAO,QAAQ;IACM,OAAO,CAAU;IAClC,aAAa,CAAU;IACf,WAAW,CAAwB;IAEnD,aAAa,CAAC,KAAc;QAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAO,KAAK,EAAC,QAAQ;gBACnB,8DAAO,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAG,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBAC7D,IAAI,CAAC,aAAa,CAAE,CAAC,CAAC,MAAc,CAAC,OAAO,CAAC,CAAA;oBAC7C,CAAC,GACE;gBACL,6DAAM,KAAK,EAAE,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,QAAQ,GAAS,CAC1E;YACR,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event as StencilEvent, EventEmitter  } from '@stencil/core';\n\n@Component({\n  tag: 'ls-toggle',\n  styleUrl: 'ls-toggle.css',\n  shadow: false,\n})\nexport class LsToggle {\n  @Prop({ mutable: true }) checked: boolean;\n  @Prop() indeterminate: boolean;\n  @StencilEvent() valueChange: EventEmitter<boolean>;\n\n  changeHandler(value: boolean) {\n    this.valueChange.emit(value);\n  }\n\n  render() {\n    return (\n      <Host>\n        <label class=\"switch\">\n          <input type=\"checkbox\" checked={this.checked}  onChange={(e) => {\n            this.changeHandler((e.target as any).checked)\n            }\n            }/>\n          <span class={`${this.indeterminate ? 'indeterminate' : 'slider'} round`}></span>\n        </label>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}