legalesign-document-viewer 0.7.3 → 0.7.4

package/dist/collection/components/ls-feature-column/ls-feature-column.js

@@ -0,0 +1,114 @@
+import { Host, h } from "@stencil/core";
+import { attachAllTooltips } from "../../utils/tooltip";
+export class LsFeatureColoumn {
+    component;
+    /**
+     * Determines / sets which of the far left 'managers' is active.
+     * {'document' | 'toolbox' | 'participant' }
+     */
+    manager = 'toolbox';
+    /**
+     * The mode that document viewer is being used in.
+     * {'preview' | 'editor' | 'custom'}
+     */
+    mode = 'editor';
+    // Send an manager change up the DOM
+    manage;
+    componentDidLoad() {
+        attachAllTooltips(this.component.shadowRoot);
+    }
+    render() {
+        return (h(Host, { key: '2338c45dc8f06d97b8843e4922288c028cbd9031' }, h("div", { key: 'f66daf214f07736ffec12d1f40ad65c4d8e18ee3', class: this.mode !== "editor" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('document');
+                this.manager = 'document';
+            }, "data-tooltip-title": "Template Details", "data-tooltip": "View and edit Template properties", "data-tooltip-placement": "right" }, h("ls-icon", { key: '3ae5fa371604562092e266d93d4c49f6bb8ba79a', name: "document", size: "1.5rem" })), h("div", { key: '4cd2f26f0b1ce17c9aadb3d904d3b4c7d55feeeb', class: this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('toolbox');
+                this.manager = 'toolbox';
+            }, "data-tooltip-title": "Field Types", "data-tooltip": "Select and place Form Field Elements", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9473d0301b5b8689fce51eae35451049862adf55', name: "typing-input", size: "1.5rem" })), h("div", { key: 'e692becdc1fb353d6d03d4bec3f4dbb1630e2fee', class: this.mode !== "editor" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('participant');
+                this.manager = 'participant';
+            }, "data-tooltip-title": "Participants", "data-tooltip": "Manage Signers, Witnesses and Approvers", "data-tooltip-placement": "right" }, h("ls-icon", { key: 'a63ce2e77357a6a95030f0c1a261b35d858e7afd', name: "user-group", size: "1.5rem" })), h("div", { key: 'c766368c4c53c3e2386f49513d05513ef1d2fa77', class: this.mode !== "compose" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('recipient');
+                this.manager = 'recipient';
+            }, "data-tooltip-title": "Recipients", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '0589a54e4e84072ff9223278c72048a5e1ba6c6b', name: "user-group", size: "1.5rem" })), h("div", { key: '67a8c3549010f01cd4eac8f54bd44906a77216a6', class: this.mode !== "preview" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon', onClick: () => {
+                this.manage.emit('validation');
+                this.manager = 'validation';
+            }, "data-tooltip-title": "Validation", "data-tooltip": "View the list of Recipients for this document", "data-tooltip-placement": "right" }, h("ls-icon", { key: '9fb4b401a35969a6453a380c3795a8f2dab28f71', name: "adjustments", size: "1.5rem" })), h("slot", { key: '4cd8fc2d73e4e5bd0efcdddfed14ba2568d705da' }), h("ls-tooltip", { key: 'f5c006ae7c4dd0944aae1c558951d67210e86a2b', id: "ls-tooltip-master" })));
+    }
+    static get is() { return "ls-feature-column"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ls-feature-column.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "manager": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant'| 'recipient' | 'validation'",
+                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines / sets which of the far left 'managers' is active.\n{'document' | 'toolbox' | 'participant' }"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "manager",
+                "defaultValue": "'toolbox'"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'preview' | 'editor' | 'compose'",
+                    "resolved": "\"compose\" | \"editor\" | \"preview\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The mode that document viewer is being used in.\n{'preview' | 'editor' | 'custom'}"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'editor'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "manage",
+                "name": "manage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'",
+                    "resolved": "\"document\" | \"participant\" | \"recipient\" | \"toolbox\" | \"validation\"",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "component"; }
+}
+//# sourceMappingURL=ls-feature-column.js.map

package/dist/collection/components/ls-feature-column/ls-feature-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ls-feature-column.js","sourceRoot":"","sources":["../../../src/components/ls-feature-column/ls-feature-column.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, EventEmitter, Event, Element } from '@stencil/core';\nimport { attachAllTooltips } from '../../utils/tooltip';\n\n@Component({\n  tag: 'ls-feature-column',\n  styleUrl: 'ls-feature-column.css',\n  shadow: true,\n})\nexport class LsFeatureColoumn {\n  @Element() component: HTMLElement;\n  /**\n   * Determines / sets which of the far left 'managers' is active.\n   * {'document' | 'toolbox' | 'participant' }\n   */\n  @Prop({ mutable: true }) manager: 'document' | 'toolbox' | 'participant'| 'recipient' | 'validation' = 'toolbox';\n\n\n  /**\n   * The mode that document viewer is being used in.\n   * {'preview' | 'editor' | 'custom'}\n   */\n  @Prop() mode: 'preview' | 'editor' | 'compose' = 'editor';\n\n  // Send an manager change up the DOM\n  @Event() manage: EventEmitter<'document' | 'toolbox' | 'participant' | 'recipient' | 'validation'>;\n\n  componentDidLoad() {\n    attachAllTooltips(this.component.shadowRoot);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'document' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('document');\n            this.manager = 'document';\n          }}\n          data-tooltip-title=\"Template Details\"\n          data-tooltip=\"View and edit Template properties\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"document\" size=\"1.5rem\" />\n        </div>\n        <div\n          class={this.manager === 'toolbox' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('toolbox');\n            this.manager = 'toolbox';\n          }}\n          data-tooltip-title=\"Field Types\"\n          data-tooltip=\"Select and place Form Field Elements\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"typing-input\" size=\"1.5rem\" />\n        </div>\n        \n        <div\n          class={this.mode !== \"editor\" ? 'hidden' : this.manager === 'participant' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('participant');\n            this.manager = 'participant';\n          }}\n          data-tooltip-title=\"Participants\"\n          data-tooltip=\"Manage Signers, Witnesses and Approvers\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"compose\" ? 'hidden' : this.manager === 'recipient' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('recipient');\n            this.manager = 'recipient';\n          }}\n          data-tooltip-title=\"Recipients\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"user-group\" size=\"1.5rem\" />\n        </div>\n\n        <div\n          class={this.mode !== \"preview\" ? 'hidden' : this.manager === 'validation' ? 'activeIcon' : 'defaultIcon'}\n          onClick={() => {\n            this.manage.emit('validation');\n            this.manager = 'validation';\n          }}\n          data-tooltip-title=\"Validation\"\n          data-tooltip=\"View the list of Recipients for this document\"\n          data-tooltip-placement=\"right\"\n        >\n          <ls-icon name=\"adjustments\" size=\"1.5rem\" />\n        </div>\n\n        <slot></slot>\n        <ls-tooltip id=\"ls-tooltip-master\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ls-field-alignment/ls-field-alignment.css

@@ -0,0 +1,370 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+  position: relative;
+}
+
+* {
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.field-set {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  width: 100%;
+}
+
+.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;
+}
+
+.multi-button-group-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.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% */
+}
+
+.input-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-row .input-wrapper input {
+  width: 9.313rem;
+  max-width: 9.313rem;
+}
+
+/* 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: 2.25rem;
+}
+
+.input-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+#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);
+}
+
+#selectLeadingIconDisabled {
+  position: absolute;
+  top: 50%;
+  left: 0.675rem;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--gray-50, #d8d9dc);
+}
+
+
+.has-leading-icon {
+  padding-left: 2.5rem;
+}
+
+input,
+select,
+textarea {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.05);
+  padding: 0.5rem 0.75rem;
+  font-family: var(--font-family);
+  font-size: var(--text-sm);
+  border-radius: 0.5rem;
+  color: var(--gray-100, #45484d);
+  font-weight: 400;
+}
+
+input::placeholder,
+select::placeholder,
+textarea::placeholder {
+  color: var(--gray-60, #afb0b2);
+}
+
+input:hover:not(:disabled),
+select:hover:not(:disabled),
+textarea:hover:not(:disabled) {
+  border-color: var(--gray-50, #c8c9cc);
+  background-color: var(--white, #fff);
+}
+
+input:focus:not(:disabled),
+select:focus:not(:disabled),
+textarea:focus:not(:disabled) {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-40, #79adfc);
+  border-color: var(--primary-60, #4456f6);
+  background-color: var(--white, #fff);
+}
+
+input:active:not(:disabled),
+select:active:not(:disabled),
+textarea:active:not(:disabled) {
+  border-color: var(--primary-50, #5185ff);
+}
+
+input:disabled,
+select:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  background-color: var(--gray-10, #f7f8fa);
+  color: var(--gray-50, #d8d9dc);
+  box-shadow: none;
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  position: relative;
+  height: 1rem;
+  width: 1rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid #d1d5db;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+input[type='checkbox']:checked,
+input[type='checkbox'].indeterminate {
+  background-color: var(--primary-60, #4456f6);
+  border: none;
+}
+
+input[type='checkbox']:checked::after {
+  content: '';
+  position: absolute;
+  top: 45%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(-1, 1);
+  width: 0.5rem;
+  height: 0.25rem;
+  border-bottom: 0.125rem solid white;
+  border-right: 0.125rem solid white;
+}
+
+input[type='checkbox'].indeterminate::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.5rem;
+  height: 0.125rem;
+  background-color: white;
+}
+
+input[type='checkbox']:checked:hover,
+input[type='checkbox'].indeterminate:hover {
+  background-color: var(--primary-70, #2134dc);
+  border: none;
+}
+
+input[type='checkbox']:hover {
+  border: 1px solid #9ca3af;
+}
+
+input[type='checkbox']:focus,
+input[type='checkbox']:active {
+  outline: none;
+  box-shadow: 0 0 0 0.25rem var(--primary-20, #c7ddff);
+  background-color: #f0f4f8;
+}
+
+input[type='checkbox']:disabled {
+  background-color: #f3f4f6;
+  outline: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:disabled:checked {
+  background-color: #e5e7eb;
+  border: none;
+  outline: none;
+  cursor: not-allowed;
+}
+
+.checkbox-container {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.checkbox-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+}
+
+.form-label {
+  color: var(--gray-100, #45484d);
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  width: 100%;
+}
+
+.loading-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  color: var(--primary-60, #0c7cba);
+}
+
+button {
+  border: 0;
+  appearance: button;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  background-color: var(--primary-60, #4456f6);
+  color: white;
+  text-transform: capitalize;
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+}
+
+button.tertiaryGrey {
+  border: 1px solid var(--gray-40, #d8d9dc);
+  background-color: white;
+  color: var(--gray-80, #787a80);
+}
+
+button.tertiaryGrey:hover {
+  border: 1px solid var(--gray-50, #c8c9cc);
+  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;
+  width: 100%;
+}
+
+.button-group button {
+  display: flex;
+  width: 100%;
+  background: transparent;
+  border-radius: unset;
+  padding: 0.25rem 0.75rem;
+  min-width: 2.156rem;
+  color: var(--gray-80, #6c6e73);
+}
+
+.button-group button:disabled {
+  background: var(--gray-10, #f7f8fa);
+  cursor: not-allowed;
+  color: var(--gray-50, #d8d9dc);
+}
+
+.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);
+}