legalesign-document-viewer 0.1.0 → 0.1.2

package/dist/collection/components/ls-field-size/ls-field-size.js

@@ -0,0 +1,105 @@
+import { Host, h } from "@stencil/core";
+export class LsFieldSize {
+    dataItem;
+    mutate;
+    update;
+    // Send one or more mutations up the chain
+    // The source of the chain fires the mutation
+    alter(diff) {
+        const diffs = this.dataItem.map(c => {
+            return { action: "update", data: { ...c, ...diff } };
+        });
+        this.dataItem = diffs.map(d => d.data);
+        this.mutate.emit(diffs);
+        this.update.emit(diffs);
+    }
+    render() {
+        return (h(Host, { key: '25d9b6ba469e6b6b2e0f236529282e89e684e065' }, h("div", { key: 'db43f95f4d932d37eea1b6d735a886551813a7fd', class: "flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30" }, h("button", { key: '9227a946d3dce34de1b2c6bae9c95a723ee1614c', "aria-label": "Make selected fields the same width as the first selected field.", class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width }), "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '88900fc8776b8513ffe6b6bfeddcfcbc73225a12', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '19dabfd4e1cf471ca14f27d6d655b4cb77cf4839', d: "M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '46465688fe1a1dd8cf94b8f216159bd840686519', class: "ls-round-button", onClick: () => this.alter({ height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: 'a0df5a1a31e2b118b04c21f3fa28fcb1d5811db3', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0c1a0f481f9fd28ed4ccf2098746551a28ae1032', d: "M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '435276bc215fde675a89d5f3f318c72b0a10c723', class: "ls-round-button", onClick: () => this.alter({ width: this.dataItem[0].width, height: this.dataItem[0].height }), "aria-label": "Make selected fields the same height and width as the first selected field.", "data-tooltip-id": "le-tooltip", "data-tooltip-content": "Make selected fields the same height and width as the first selected field.", "data-tooltip-place": "top" }, h("svg", { key: '42e7f189b4b2fec56a031272379a3b3540b9ae36', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '245318518d13d13bca367dab4e45a247c8596d1c', d: "M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("slot", { key: '6f214bdecb84e0fef7e0b3346d3a25687befd186' })));
+    }
+    static get is() { return "ls-field-size"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-field-size.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-field-size.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "dataItem": {
+                "type": "unknown",
+                "attribute": "data-item",
+                "mutable": true,
+                "complexType": {
+                    "original": "LSApiElement[]",
+                    "resolved": "LSApiElement[]",
+                    "references": {
+                        "LSApiElement": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSApiElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mutate",
+                "name": "mutate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "update",
+                "name": "update",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LSMutateEvent[]",
+                    "resolved": "LSMutateEvent[]",
+                    "references": {
+                        "LSMutateEvent": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::LSMutateEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=ls-field-size.js.map

package/dist/collection/components/ls-field-size/ls-field-size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-field-size.js","sourceRoot":"","sources":["../../../src/components/ls-field-size/ls-field-size.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { LSApiElement, LSMutateEvent } from '../../components';\n\n@Component({\n  tag: 'ls-field-size',\n  styleUrl: 'ls-field-size.css',\n  shadow: true,\n})\nexport class LsFieldSize {\n  @Prop({ mutable: true }) dataItem: LSApiElement[];\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) mutate: EventEmitter<LSMutateEvent[]>;\n\n  @Event({\n    bubbles: true,\n    cancelable: true,\n    composed: true\n  }) update: EventEmitter<LSMutateEvent[]>;\n\n\n  // Send one or more mutations up the chain\n  // The source of the chain fires the mutation\n  alter(diff: object) {\n\n    const diffs: LSMutateEvent[] = this.dataItem.map(c => {\n      return { action: \"update\", data: { ...c, ...diff } as LSApiElement }\n    })\n\n    this.dataItem = diffs.map(d => d.data as LSApiElement)\n    this.mutate.emit(diffs) \n    this.update.emit(diffs)\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex rounded-[10px] focus:outline-hidden focus:ring-4 focus:ring-offset-0 focus:ring-primary-30\">\n          <button aria-label=\"Make selected fields the same width as the first selected field.\"\n            class=\"ls-round-button\"\n            onClick={()=> this.alter({width: this.dataItem[0].width})}\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Make selected fields the same width as the first selected field.\" data-tooltip-place=\"top\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M14 9V6C14 5.44772 13.5523 5 13 5H11C10.4477 5 10 5.44772 10 6V9M14 15.0104V18C14 18.5523 13.5523 19 13 19H11C10.4477 19 10 18.5523 10 18V15.0104M6.00751 15.0104L4.00751 12M4.00751 12L6.00751 9M4.00751 12H20.0013M18.0013 15.0104L20.0013 12M20.0013 12L18.0013 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n          <button class=\"ls-round-button\" \n          onClick={()=>this.alter({height: this.dataItem[0].height})}\n          aria-label=\"Make selected fields the same height as the first selected field.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Make selected fields the same height as the first selected field.\" data-tooltip-place=\"top\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.00439 10.0042H6.00439C5.45211 10.0042 5.00439 10.4519 5.00439 11.0042V13.0042C5.00439 13.5565 5.45211 14.0042 6.00439 14.0042H9.00439M15.0148 10.0042H18.0044C18.5567 10.0042 19.0044 10.4519 19.0044 11.0042V13.0042C19.0044 13.5565 18.5567 14.0042 18.0044 14.0042H15.0148M15.0148 17.9967L12.0044 19.9967M12.0044 19.9967L9.00439 17.9968M12.0044 19.9967V4.00293M15.0148 6.00299L12.0044 4.00293M12.0044 4.00293L9.00439 6.00293\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path></svg>\n          </button>\n          <button class=\"ls-round-button\" \n          onClick={()=>this.alter({width: this.dataItem[0].width, height: this.dataItem[0].height})}\n          aria-label=\"Make selected fields the same height and width as the first selected field.\"\n            data-tooltip-id=\"le-tooltip\" data-tooltip-content=\"Make selected fields the same height and width as the first selected field.\" data-tooltip-place=\"top\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M4 8V4M4 4H8M4 4L8 8M20 8V4M20 4H16M20 4L16 8M4 16V20M4 20H8M4 20L8 16M20 16V20M20 20H16M20 20L16 16M8 8H10M8 8V10M16 8H14M16 8V10M8 16H10M8 16V14M16 16V14M16 16H14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n        </div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-formfield/inputs/ls-number-input/ls-number-input.css

@@ -0,0 +1,273 @@
+* {
+  box-sizing: border-box;
+  font-family:
+    'IBM Plex Sans',
+    sans-serif;
+  margin: 0;
+}
+
+.host {
+  display: flex;
+  width: 100%;
+  padding: 0.25rem;
+  align-items: flex-start;
+  gap: 0.25rem;
+  border-radius: 0.625rem;
+  border: 1px solid var(--Grey-20, #edeff2);
+  background: var(--Grey-10, #f7f8fa);
+}
+
+.input-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+
+#fieldIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-80);
+}
+
+#fieldIconDisabled {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0.75rem;
+  color: var(--gray-60);
+}
+
+#password-icon {
+  padding-right: 0.25rem;
+}
+
+.icon-input {
+  padding-left: 2.5rem !important;
+}
+
+.button-input {
+  padding-right: 2.5rem !important;
+}
+
+.right-items-input {
+  padding-right: 4rem !important;
+}
+
+.input-basic {
+  display: flex;
+  width: 100%;
+  height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+}
+
+.input-ls {
+  display: flex;
+  width: 100%;
+  height: 1.75rem;
+  padding: 0 0.5rem;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.375rem;
+  /* Shadow/sm */
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /* text-sm/leading-5/font-regular */
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
+
+
+}
+
+.input-ls::-webkit-outer-spin-button,
+.input-ls::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.input-ls {
+  -moz-appearance: textfield;
+}
+
+input-base:active:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+input:focus:not(:disabled) {
+  outline: 1px solid var(--Legalesign-Blue-60, #4456f6);
+  box-shadow:
+    0px 0px 3px 0px rgba(0, 15, 153, 0.25),
+    0px 0px 2px 0px rgba(0, 15, 153, 0.06),
+    0px 0px 0px 4px #9dc3fc;
+}
+
+.default {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-100);
+}
+
+.default:hover {
+  border: 1px solid var(--gray-50, #d8d9dc);
+  background: var(--White, #fff);
+  color: var(--gray-110);
+}
+
+.disabled {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-60);
+  cursor: not-allowed;
+}
+
+.display-only {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background: var(--gray-10, #f7f8fa);
+  color: var(--gray-100);
+  cursor: not-allowed;
+}
+
+.invalid {
+  border: 1px solid var(--red-40, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.invalid:hover {
+  border: 1px solid var(--red-50, #ffa19e);
+  background: var(--White, #fff);
+  color: var(--Red-100, #7a1714);
+}
+
+.valid {
+  border: 1px solid var(--green-40, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.valid:hover {
+  border: 1px solid var(--green-50, #72f0c2);
+  background: var(--White, #fff);
+  color: var(--Green-100, #125241);
+}
+
+.right-items {
+  position: absolute;
+  padding: 0.25rem;
+  height: 36px;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+#invalidIcon {
+  margin: 0 0.5rem;
+  color: var(--red-70);
+}
+
+#validIcon {
+  margin: 0 0.5rem;
+  color: var(--green-60);
+}
+
+.button {
+  display: flex;
+  height: 28px;
+  width: 28px;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--White, #fff);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-90);
+  }
+}
+
+.button-disabled {
+  display: flex;
+  height: 28px;
+  width: 28px;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--gray-40, #D8D9DC);
+  background: var(--gray-=10, #F7F8FA);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  cursor: not-allowed;
+
+  #buttonIcon {
+    color: var(--gray-70);
+  }
+}
+
+.button:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  background: var(--gray-20, #edeff2);
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:active {
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}
+
+.button:focus {
+  display: flex;
+  height: 28px;
+  width: 28px;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0.375rem;
+  border: 1px solid var(--Primary-Blue-Light, #4456f6);
+  background: var(--White, #fff);
+  box-shadow:
+    0px 0px 4px 0px #c7ddff inset,
+    0px 0px 0px 4px #9dc3fc;
+
+  #buttonIcon {
+    color: var(--gray-100);
+  }
+}