legalesign-document-viewer 0.3.5 → 0.3.6

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

@@ -0,0 +1,42 @@
+* {
+  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

@@ -0,0 +1,84 @@
+import { Host, h } from "@stencil/core";
+export class LsPropsSection {
+    sectionTitle;
+    sectionDescription;
+    row = false;
+    render() {
+        return (h(Host, { key: '3195660fc12d08b71df96c66ca4e6c3f3f9cbede' }, h("div", { key: '0fd2a66c29a3e7c4faeb9acffe6493a8dc03c070', class: this.row ? 'ls-field-properties-section row' : 'ls-field-properties-section' }, h("div", { key: 'b9f826b5be0b9c0d6dd0b96c7860107533604690', class: 'ls-field-properties-section-text' }, h("p", { key: '724a8eefebbe8f83209ccbdebf4ca29d8fe42db0', class: 'ls-field-properties-section-title' }, this.sectionTitle), this.sectionDescription && h("p", { key: '00ddfa612d655ed0cdc75a959666520c0be3267a', class: 'ls-field-properties-section-description' }, this.sectionDescription)), h("slot", { key: 'b1a278befbe7f7cb2b540382f021f6f05d813ced' }))));
+    }
+    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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,212 @@
+:host {
+  position: fixed;
+  z-index: 1000;
+  right: 1rem;
+  bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: end;
+  height: 2.25rem;
+  overflow: visible;
+}
+
+.controls-bar {
+  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;
+}
+
+.controls-bar > :not(:nth-child(1)) {
+  border-left: 1px solid var(--gray-30, #e0e2e5);
+}
+
+button {
+  border: 0;
+}
+
+button:hover {
+  color: var(--gray-100, #45484d);
+  border-radius: 0.5rem;
+}
+
+button:disabled {
+  color: var(--gray-40, #c1c4c8);
+  cursor: not-allowed;
+}
+
+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

@@ -0,0 +1,149 @@
+import { Host, h } from "@stencil/core";
+import { debounce } from "../ls-document-viewer/editorUtils";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsStatusbar {
+    component;
+    /**
+     * The zoom or scale level 100 === 100%.
+     * {number}
+     */
+    zoom;
+    page;
+    pageCount;
+    /**
+     * 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() {
+        attachAllTooltips(this.component.shadowRoot);
+        this.zoom = this.editor.zoom;
+    }
+    render() {
+        return (h(Host, { key: '64355c92fb096e234db1645876f1bc657b513241' }, h("div", { key: '3e70edc7fe64195f425bfcaab685dce704df0ac2', class: 'controls-bar' }, h("div", { key: '5a19afd7bf5386d75c0e35d47511a5dc7f450dc2', class: 'status-bar-section' }, h("button", { key: '8852a1d1ac81af594f519685f6c88adc2444a708', onClick: () => this.setZoom(this.editor.zoom * 0.8), id: "zoom-out-btn", "data-tooltip": "Zoom Out" }, h("ls-icon", { key: '10b2410531f8c0dfd812ea7cc2834a2bf6d8840a', name: "zoom-out" })), h("div", { key: '18bc843aa8cf4a4735e931cad3284ef88946cb22' }, h("input", { key: 'ca66f1376362c97f8958c8413ca5e81e716e2969', type: "range", min: "1", max: "300", value: this.zoom * 100, class: "slider", id: "zoomRange", onInput: () => this.handleZoomInput() })), h("button", { key: 'a0f3ed88103b50363b47e5780aa2e73a39ed4cc8', onClick: () => this.setZoom(this.editor.zoom / 0.8), id: "zoom-in-btn", "data-tooltip": "Zoom In" }, h("ls-icon", { key: 'a07eafbae8c6ba35a7fdeeffc28397d7252edaa8', name: "zoom-in" }))), h("div", { key: 'e498dfce441013b2fc963928af2e1049cbe69fcf', class: 'status-bar-section' }, h("button", { key: '8df4dd354d5208a500f0811e90d31caa57877194', onClick: () => this.fitWidth(), id: "fit-width-btn", "data-tooltip": "Fit Width" }, h("ls-icon", { key: '2277785b7d941b9ad4a522defd2b1ec317e1464d', name: "fit-width" })), h("button", { key: '959e98f46bd14ce670388c3240fce6197f503bac', onClick: () => this.fitHeight(), id: "fit-height-btn", "data-tooltip": "Fit Height" }, h("ls-icon", { key: 'a4ed813952cbd511e03af18b67e0ff4a8fd9aae4', name: "fit-height" }))), h("div", { key: 'c0710f4e5a387d333ed7df84169fa046f231810d', class: 'status-bar-section', style: this.pageCount === 1 && { display: 'none' } }, h("button", { key: '827fa1974c3fc37f8f4083abef2ba1ebea1f0e2f', onClick: () => {
+                this.editor.pagePrev();
+            }, disabled: this.page === 1, id: "prev-page-btn", "data-tooltip": this.page === 1 ? 'No Previous Page' : 'Previous Page' }, h("ls-icon", { key: '21796639ba7b47ac31e6f60e90cf7955940bbe32', name: "chevron-left" })), h("p", { key: 'dee6b2159d14226b9f13ab1412d99ec270dcb985' }, this.page, " / ", this.pageCount), h("button", { key: '15262e65e4cd1aaf96f1b73293fe4d6acdce7aa0', onClick: () => {
+                this.editor.pageNext();
+            }, disabled: this.page === this.pageCount, id: "next-page-btn", "data-tooltip": this.page === this.pageCount ? 'No Next Page' : 'Next Page' }, h("ls-icon", { key: '3dbc18d02d99b3a652af194b071d4cf19d07f25a', name: "chevron-right" })))), h("ls-helper-bar", { key: '302758df0e30c25e9fb11510845ef6d0fd00031c' }), h("ls-tooltip", { key: 'bb89330935f48017bee9de72cc6faa6c67f63fb5', id: "ls-tooltip-master" }), h("slot", { key: '64876c90d09ff4d4c7bf820ccbe50b28d28ae5d6' })));
+    }
+    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
+            },
+            "page": {
+                "type": "number",
+                "attribute": "page",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "pageCount": {
+                "type": "number",
+                "attribute": "page-count",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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

@@ -0,0 +1 @@
+{"version":3,"file":"ls-statusbar.js","sourceRoot":"","sources":["../../../src/components/ls-statusbar/ls-statusbar.tsx"],"names":[],"mappings":"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","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';\nimport { attachAllTooltips } from '../../utils/tooltip';\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  @Prop({ mutable: true }) page: number;\n  @Prop({ mutable: true }) pageCount: 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    attachAllTooltips(this.component.shadowRoot);\n    this.zoom = this.editor.zoom;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={'controls-bar'}>\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)} id=\"zoom-out-btn\" data-tooltip=\"Zoom Out\">\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)} id=\"zoom-in-btn\" data-tooltip=\"Zoom In\">\n            <ls-icon name=\"zoom-in\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'}>\n          <button onClick={() => this.fitWidth()} id=\"fit-width-btn\" data-tooltip=\"Fit Width\">\n            <ls-icon name=\"fit-width\" />\n          </button>\n          <button onClick={() => this.fitHeight()} id=\"fit-height-btn\" data-tooltip=\"Fit Height\">\n            <ls-icon name=\"fit-height\" />\n          </button>\n        </div>\n        <div class={'status-bar-section'} style={this.pageCount === 1 && { display: 'none' }}>\n          <button\n            onClick={() => {\n              this.editor.pagePrev();\n            }}\n            disabled={this.page === 1}\n            id=\"prev-page-btn\"\n            data-tooltip={this.page === 1 ? 'No Previous Page' : 'Previous Page'}\n          >\n            <ls-icon name=\"chevron-left\" />\n          </button>\n          <p>\n            {this.page} / {this.pageCount}\n          </p>\n          <button\n            onClick={() => {\n              this.editor.pageNext();\n            }}\n            disabled={this.page === this.pageCount}\n            id=\"next-page-btn\"\n            data-tooltip={this.page === this.pageCount ? 'No Next Page' : 'Next Page'}\n          >\n            <ls-icon name=\"chevron-right\" />\n          </button>\n        </div>\n        </div>\n        <ls-helper-bar />\n        <ls-tooltip id=\"ls-tooltip-master\" />\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,90 @@
+: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

@@ -0,0 +1,86 @@
+import { Host, h } from "@stencil/core";
+export class LsToggle {
+    checked;
+    indeterminate;
+    valueChange;
+    changeHandler(value) {
+        this.valueChange.emit(value);
+    }
+    render() {
+        return (h(Host, { key: 'f95b58e542f2496d2c39f511dc923bfbfdc1fff2' }, h("label", { key: '3a39c582d63ed93e11b34783bda317690f0f7acf', class: "switch" }, h("input", { key: '1b4e3f1d450af82e99e3ec2d8e76ffb7ddf17e84', type: "checkbox", checked: this.checked, onChange: (e) => {
+                this.changeHandler(e.target.checked);
+            } }), h("span", { key: 'a7fbe2ba77aa2042f8b303692ed7f20b2253b0d5', class: `${this.indeterminate ? 'indeterminate' : 'slider'} round` })), h("slot", { key: 'd3885d6b1389684b0d742303a079d6daea8ee635' })));
+    }
+    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